/* ============================================================
   ALI GAADOUDI — Kinesiologist & Movement Specialist, Calgary
   A. GLOBAL DESIGN SYSTEM  ·  B. NAVBAR  ·  C. FULL-SCREEN HERO
   Apple-grade minimalism · Glassmorphism · 25% radii
   Brand: 0B1F40 / FF914D / FBF7F4 / AF777C / 8B5E3C
============================================================ */

:root {
  /* ---------- Base ---------- */
  --white: #FFFFFF;
  --black: #000000;

  /* ---------- Testo (alto contrasto su bianco) ---------- */
  --text:       #1D1D1F;
  --text-body:  #424248;
  --text-muted: #6E6E73;
  --hairline:   #E8E8ED;
  --surface:    #F5F5F7;

  /* ---------- Accenti brand ---------- */
  --navy:       #0B1F40;
  --navy-700:   #14305C;
  --navy-900:   #061428;
  --orange:     #FF914D;
  --orange-600: #F0762B;
  --orange-100: #FFE7D6;
  --rose:       #AF777C;
  --clay:       #8B5E3C;

  /* ---------- Tipografia ---------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* font dei titoli */
  --font-display: "Archivo", "Inter", -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.85rem, 5.6vw, 5rem);
  --fs-h2:      clamp(2rem, 3.6vw, 3rem);
  --fs-h3:      1.3125rem;
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* ---------- Raggi (25%) ---------- */
  --r-sm:   14px;
  --r-md:   24px;
  --r-lg:   36px;
  --r-xl:   48px;
  --r-pill: 999px;

  /* ---------- Ombre ---------- */
  --sh-xs:  0 1px 2px rgba(0, 0, 0, .04);
  --sh-sm:  0 4px 18px rgba(0, 0, 0, .05);
  --sh-md:  0 16px 48px rgba(0, 0, 0, .07);
  --sh-lg:  0 40px 100px -20px rgba(0, 0, 0, .18);
  --sh-cta: 0 12px 32px rgba(0, 0, 0, .20);

  /* ---------- Vetro ---------- */
  --glass:        rgba(255, 255, 255, .66);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-line:   rgba(255, 255, 255, .75);
  --blur:         saturate(180%) blur(20px);

  --glass-dark:      rgba(255, 255, 255, .10);
  --glass-dark-line: rgba(255, 255, 255, .22);

  /* ---------- Ritmo ---------- */
  --nav-h:     72px;      /* sovrascritto a 80px in sections.css */
  --section:   clamp(6rem, 10vw, 9.5rem);
  --container: 1180px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   Reset & base
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  text-wrap: balance;
}
p { text-wrap: pretty; }

::selection { background: var(--orange-100); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.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;
}

/* ============================================================
   Vetro
============================================================ */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-md);
}

/* ============================================================
   Bottoni
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 54px;
  padding-inline: 2rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Rete di sicurezza: nessun bottone può superare il proprio contenitore. */
.btn { max-width: 100%; }

/* Su schermi molto stretti (fino a 400px) i CTA con testo lungo
   uscivano dal riquadro: qui riducono il padding e possono andare
   a capo, mantenendo l'altezza minima tattile di 54px. */
@media (max-width: 400px) {
  .btn {
    padding-inline: 1.25rem;
    white-space: normal;
    height: auto;
    min-height: 54px;
    padding-block: .875rem;
    line-height: 1.3;
    text-align: center;
  }
}

.btn-light {
  background: var(--white);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.btn-light:hover { background: #F2F2F4; box-shadow: 0 16px 40px rgba(0, 0, 0, .30); }

.btn-frost {
  background: var(--glass-dark);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--glass-dark-line);
  color: var(--white);
}
.btn-frost:hover {
  background: rgba(255, 255, 255, .20);
  border-color: rgba(255, 255, 255, .40);
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--sh-sm);
}
.btn-primary:hover { background: var(--navy-700); box-shadow: var(--sh-cta); }

.btn-ghost {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  color: var(--text);
  box-shadow: var(--sh-xs);
}
.btn-ghost:hover { background: var(--white); box-shadow: var(--sh-sm); }

.btn-sm { height: 42px; padding-inline: 1.3rem; font-size: var(--fs-xs); }

.btn .chev { transition: transform .4s var(--ease); }
.btn:hover .chev { transform: translateX(3px); }

/* ============================================================
   B. NAVBAR (struttura base — la griglia è in sections.css)
============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-top: 1rem;
  transition: padding .45s var(--ease);
}
.site-header.scrolled { padding-top: .5rem; }

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: var(--nav-h);
  padding: 0 .75rem 0 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
  transition: background .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease);
}

.brand { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--navy);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.brand-name {
  font-size: .9375rem; font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
  transition: color .5s var(--ease);
}
.brand-role {
  font-size: .75rem; font-weight: 500;
  color: rgba(255, 255, 255, .70);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .5s var(--ease);
}

.nav { display: flex; align-items: center; gap: .125rem; }
.nav a {
  display: block;
  padding: .5rem .75rem;
  border-radius: var(--r-pill);
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav a:hover  { color: var(--white); background: rgba(255, 255, 255, .14); }
.nav a.active { color: var(--orange); background: transparent; font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* stato scrolled: vetro bianco, testo scuro */
.site-header.scrolled .nav-shell {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: var(--sh-md);
}
.site-header.scrolled .brand-name  { color: var(--text); }
.site-header.scrolled .brand-role  { color: var(--text-muted); }
.site-header.scrolled .nav a       { color: var(--text-body); }
.site-header.scrolled .nav a:hover { color: var(--text); background: rgba(0, 0, 0, .05); }
.site-header.scrolled .nav a.active{ color: var(--orange-600); background: transparent; }
.site-header.scrolled .burger span { background: var(--text); }

.nav-cta {
  background: var(--white);
  color: var(--text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.site-header.scrolled .nav-cta {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--sh-sm);
}

/* Hamburger */
.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
}
.burger span {
  width: 18px; height: 1.6px; border-radius: 2px;
  background: var(--white);
  transition: transform .4s var(--ease), opacity .25s var(--ease), background .5s var(--ease);
}
.burger.open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Sheet mobile */
.sheet {
  margin-top: .5rem;
  padding: .75rem;
  border-radius: var(--r-lg);
  max-height: calc(100svh - var(--nav-h) - 1.5rem);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden;
  transform: translateY(-12px) scale(.98);
  transform-origin: top center;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
/* aperto: card bianca compatta + velo scuro DIETRO (via box-shadow), così
   la hero resta oscurata sullo sfondo e non spuntano i suoi pulsanti */
.sheet.open {
  opacity: 1; visibility: visible; transform: none;
  box-shadow: 0 0 0 100vh rgba(8, 22, 45, .88), 0 22px 45px rgba(6, 20, 40, .35);
}
.sheet a {
  display: block;
  padding: .875rem 1rem;
  border-radius: var(--r-md);
  font-size: 1rem; font-weight: 500;
  color: var(--navy);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.sheet a:hover { background: rgba(11, 31, 64, .05); }
/* pagina corrente evidenziata in arancione, come nel menu desktop */
.sheet a.active { color: var(--orange); }
/* il CTA resta un pulsante vero: flex centrato, non il link a blocco del menu */
.sheet .btn {
  width: 100%;
  margin-top: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  padding: .95rem 1.25rem;
}
/* il CTA nel menu è navy: il testo resta bianco */
.sheet .btn.btn-primary { color: var(--white); }

/* ============================================================
   C. HERO — full-screen
============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;

  background-image: url("assets/hero-bg.jpg");
  background-size: cover;
  /* ancorata in alto: su monitor larghi e bassi (2:1 e oltre) il ritaglio
     verticale parte dal centro e taglierebbe la testa di Ali, che nella
     foto sta a un paio di punti percentuali dal bordo superiore. */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--navy-900);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(6, 20, 40, .97) 0%,
      rgba(6, 20, 40, .94) 34%,
      rgba(6, 20, 40, .74) 54%,
      rgba(6, 20, 40, .34) 78%,
      rgba(6, 20, 40, .14) 100%),
    linear-gradient(180deg,
      rgba(6, 20, 40, .45) 0%,
      rgba(6, 20, 40, 0)   28%,
      rgba(6, 20, 40, 0)   64%,
      rgba(6, 20, 40, .35) 100%);
}

.hero-inner {
  position: relative;
  width: 100%;
  padding-top: calc(var(--nav-h) + 1.75rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  /* allinea il contenuto hero al logo dell'header (padding interno del pill) */
  padding-left: calc(var(--gutter) + 1rem);
}

/* ============================================================
   FASCIA BENEFICI — sotto la hero (le 3 card)
============================================================ */
.strip-band {
  background: var(--navy-900);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.strip-band > .container {
  max-width: 1400px;
  padding-left: calc(var(--gutter) + 1rem);
}
.strip-band .hero-strip { margin-top: 0; }

/* la hero usa più larghezza dello schermo */
.hero > .container { max-width: 1400px; }
.hero-content { max-width: 72rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 36px;
  padding: 0 1rem 0 .75rem;
  border-radius: var(--r-pill);
  background: var(--glass-dark);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--glass-dark-line);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}
.eyebrow .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 145, 77, .28);
}

.hero h1 {
  margin-top: 1.125rem;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.03;
  color: var(--white);
  text-shadow: 0 2px 40px rgba(6, 20, 40, .45);
}
.hero h1 .line   { display: block; }
/* su desktop ogni frase resta su una riga sola */
@media (min-width: 700px) { .hero h1 .line { white-space: nowrap; } }
.hero h1 .accent { color: rgba(255, 255, 255, .62); }

/* credenziali sotto l'eyebrow — info minori, piccole */
.hero-creds {
  margin-top: .625rem;
  font-size: .75rem;
  font-style: italic;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .58);
}

.hero .lead {
  max-width: 34rem;
  margin-top: 1.375rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 24px rgba(6, 20, 40, .40);
}
.hero .lead strong { color: var(--white); font-weight: 600; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 1.75rem;
}

.hero-note {
  margin-top: 1rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .62);
}

.hero-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-top: clamp(1rem, 2vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--glass-dark-line);
  border: 1px solid var(--glass-dark-line);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}
.hero-strip li {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.1rem 1.5rem;
  background: rgba(255, 255, 255, .10);
}
.hero-strip .ico {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--orange);
}
.hero-strip .ico svg { width: 20px; height: 20px; }
.hero-strip .txt { display: flex; flex-direction: column; line-height: 1.35; }
.hero-strip .txt { min-width: 0; }
.hero-strip .txt b    { font-size: .9375rem; font-weight: 600; color: var(--white); letter-spacing: -0.015em; white-space: nowrap; }
.hero-strip .txt span { font-size: .75rem; letter-spacing: 0; color: rgba(255, 255, 255, .68); white-space: nowrap; }

.scroll-hint {
  position: absolute;
  left: 50%; bottom: 1.75rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  pointer-events: none;
}
.scroll-hint .mouse {
  width: 22px; height: 34px;
  border: 1.5px solid rgba(255, 255, 255, .40);
  border-radius: var(--r-pill);
  position: relative;
}
.scroll-hint .mouse::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 6px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .8);
  animation: wheel 1.8s var(--ease) infinite;
}
@keyframes wheel {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

/* ============================================================
   Segnaposto da completare prima del go-live (visibili in rosso)
============================================================ */
.todo {
  display: inline;
  padding: .1rem .45rem;
  border-radius: 6px;
  background: #FFE5E5;
  border: 1px solid #E5484D;
  color: #B4232A;
  font-weight: 600;
  font-size: .9em;
}

/* ============================================================
   Cookie consent
============================================================ */
.cc-banner {
  position: fixed;
  left: 50%; bottom: clamp(.75rem, 2vw, 1.5rem);
  transform: translateX(-50%) translateY(130%);
  width: min(700px, calc(100% - 1.5rem));
  z-index: 300;
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden;
  transition: transform .55s var(--ease), opacity .45s var(--ease), visibility .45s;
}
.cc-banner.show { transform: translateX(-50%); opacity: 1; visibility: visible; }
.cc-banner h4 { font-size: 1.0625rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; }
.cc-banner p  { font-size: .875rem; line-height: 1.6; color: var(--text-body); }
.cc-banner a  { color: var(--orange-deep); text-decoration: underline; }
.cc-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
.cc-actions .btn { height: 46px; padding: 0 1.25rem; font-size: .875rem; }

/* pulsante per riaprire le preferenze */
.cc-prefs {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 94;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); color: var(--navy);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-md); cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s,
              background .3s var(--ease), color .3s var(--ease);
}
.cc-prefs.show { opacity: 1; visibility: visible; }
.cc-prefs:hover { background: var(--navy); color: var(--white); }
.cc-prefs svg { width: 18px; height: 18px; }

/* contenuto di terze parti bloccato finché non c'è consenso */
.cc-block {
  display: grid; place-items: center; gap: .9rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
  border: 1px dashed rgba(11, 31, 64, .18);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.cc-block p { font-size: .9rem; line-height: 1.6; color: var(--text-body); max-width: 34rem; }

@media (max-width: 640px) {
  .cc-actions { flex-direction: column; }
  .cc-actions .btn { width: 100%; }
}

/* Con il menu mobile aperto, il banner cookie (z-index 300) finiva sopra
   il pannello del menu (z-index 100) e ne copriva le voci basse — su
   schermo stretto e in orizzontale quasi tutte. Mentre il menu è aperto
   banner e pulsante preferenze si tolgono di mezzo, e tornano alla chiusura. */
body.menu-open .cc-banner.show,
body.menu-open .cc-prefs.show {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================================
   Reveal on scroll
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* i 3 elementi della strip compaiono in dissolvenza, senza scorrere dal basso */
.strip-band .reveal { transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }

/* le immagini entrano con un micro-zoom (solo transform: nessun costo di layout) */
figure.reveal,
.case-media.reveal,
.split-media.reveal { transform: translateY(24px) scale(.985); }
figure.reveal.in,
.case-media.reveal.in,
.split-media.reveal.in { transform: none; }

/* i titoli di sezione entrano un filo prima e più corti, per dare ritmo */
.section-head.reveal { transform: translateY(18px); }

/* ============================================================
   Micro-interazioni (leggere: solo transform/colore)
============================================================ */
.btn:active { transform: translateY(0) scale(.985); }

.service:hover,
.post:hover { border-color: rgba(255, 145, 77, .38); }

.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Zoom lento dell'immagine dentro la card ---------- */
.service-media,
.post-media,
.article-card .media,
.post .media { overflow: hidden; }

.service-media img,
.post-media img,
.article-card .media img,
.post .media img { transition: transform .8s var(--ease); will-change: transform; }

.service:hover .service-media img,
.post:hover .post-media img,
.article-card:hover .media img,
.post:hover .media img { transform: scale(1.055); }

/* ---------- Trattamento uniforme delle immagini ---------- */
.service-media,
.post-media,
.article-card .media,
.post .media { border-radius: var(--r-md); }
.service-media,
.post-media { box-shadow: inset 0 0 0 1px rgba(11, 31, 64, .07); }

/* ---------- Barra di avanzamento lettura (articoli) ---------- */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 200;
  background: rgba(11, 31, 64, .08);
  pointer-events: none;
}
.read-progress i {
  display: block; height: 100%; width: 100%;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
}

/* ---------- Torna su ---------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 95;
  display: grid; place-items: center;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--navy); color: var(--white);
  box-shadow: var(--sh-md); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease),
              visibility .35s, background .3s var(--ease), color .3s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--orange); color: var(--navy); }
.to-top svg { width: 18px; height: 18px; }

.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute; left: .75rem; right: .75rem; bottom: .34rem;
  height: 1.5px; border-radius: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a.active::after { display: none; }
.d5 { transition-delay: .40s; }

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 1080px) {
  .hero-strip { grid-template-columns: 1fr; }
}

/* Hero: due immagini, scelte in base alla PROPORZIONE del viewport.
   L'hero è alto quanto lo schermo, quindi ciò che conta non è la larghezza
   in pixel ma quanto il viewport è stretto rispetto all'altezza: un tablet
   da 900px in verticale ha lo stesso problema di un telefono.
   Il file desktop è 16:9: su un viewport verticale il ritaglio ne mostra
   solo la fascia centrale e Ali, che sta sulla destra, sparisce.
   Sotto 6/5 di proporzione si passa alla versione verticale, inquadrata
   su di lui. Verificato da 320x653 a 1920x1080. */
@media (max-aspect-ratio: 6/5) {
  .hero { background-image: url("assets/hero-bg-mobile.jpg"); }
}

@media (max-width: 860px) {
  .hero::before {
    background:
      linear-gradient(180deg,
        rgba(6, 20, 40, .78) 0%,
        rgba(6, 20, 40, .62) 45%,
        rgba(6, 20, 40, .82) 100%);
  }
  .hero-content { max-width: 100%; }
  .scroll-hint { display: none; }
}

@media (max-width: 640px) {
  .brand-role { display: none; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }

  /* margini simmetrici su mobile (niente indentazione extra a sinistra) */
  .hero-inner { padding-left: var(--gutter); }
  .strip-band > .container { padding-left: var(--gutter); }

  /* l'occhiello lungo può andare a capo invece di essere tagliato */
  .eyebrow {
    white-space: normal;
    height: auto;
    min-height: 34px;
    padding-block: .35rem;
    border-radius: 16px;
    line-height: 1.3;
  }

  /* SOLO home + mobile: l'occhiello perde il contenitore (restano pallino
     arancione e testo) per non confondersi con la card del menu a tendina */
  .hero .eyebrow {
    background: none;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    min-height: 0;
    height: auto;
    border-radius: 0;
    color: rgba(255, 255, 255, .62);
  }
}

/* ============================================================
   Motion & fallback
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-shell { background: rgba(6, 20, 40, .72); }
  .site-header.scrolled .nav-shell,
  .sheet { background: rgba(255, 255, 255, .97); }
  .eyebrow, .hero-strip li, .btn-frost { background: rgba(6, 20, 40, .55); }
}

/* ============================================================
   Aree tattili — ampliamento invisibile
   ------------------------------------------------------------
   Alcuni bersagli restavano sotto i 44px raccomandati da Apple
   (Google indica 48px). Invece di ingrandirli graficamente, si
   estende solo l'area sensibile al tocco con un ::after
   trasparente in posizione assoluta: non occupa spazio nel
   flusso, quindi il layout resta identico al pixel.
   L'estensione di ciascuno è calibrata sullo spazio libero
   misurato attorno all'elemento, così due aree non si
   sovrappongono mai (niente tocchi che finiscono sul link
   sbagliato).
============================================================ */
.footer-social a,
.footer-bottom nav a,
.footer-credit,
.link-arrow,
.crumbs a { position: relative; }

.footer-social a::after,
.footer-bottom nav a::after,
.footer-credit::after,
.link-arrow::after,
.crumbs a::after { content: ""; position: absolute; }

/* icone social: 40x40 -> 44x44 (spazio libero attorno: 24px) */
.footer-social a::after   { inset: -2px; }
/* Privacy / Terms: altezza 22px -> 38px (spazio libero: 16px) */
.footer-bottom nav a::after { inset: -8px -10px; }
/* "Design by EGSLAB": 22px -> 38px */
.footer-credit::after     { inset: -8px -6px; }
/* "Read the full story": 26px -> 44px (spazio abbondante) */
.link-arrow::after        { inset: -9px -8px; }
/* briciole di pane: 22px -> 38px; ai lati resto prudente (gap .5rem) */
.crumbs a::after          { inset: -8px -3px; }

/* I titoli delle card articolo sono link inline: sugli elementi
   inline il padding verticale allarga l'area cliccabile senza
   alterare l'altezza della riga, quindi il layout non si muove. */
.article-card .body h3 a { padding-block: .6875rem; }