/* ==========================================================================
   I am Vanesita — foglio di stile unico, condiviso dalle tre lingue.

   Scritto mobile-first: gli stili base sono quelli del telefono, che è lo
   scenario reale (link in bio di Instagram e TikTok, browser in-app). Le
   media query min-width allargano, non restringono.

   Impostazione: editoriale. Il bianco è il materiale, la gerarchia la fa la
   tipografia. L'ocra della foto è l'unico accent, e l'unico blocco di colore
   pieno di tutta la pagina è quello dietro al ritratto del hero.

   Elemento firma: la barretta ocra corta che apre ogni occhiello di sezione,
   ripresa dalla sottolineatura sotto "Vanesita" nel logo. Uno solo, ovunque.
   ========================================================================== */

/* --------------------------------------------------------------- Font
   latin per il testo, "brand" è un sottoinsieme di due caratteri caricato
   solo quando serve la İ di FARMASİ (1,3 KB invece di 35). */
@font-face{font-family:Fraunces;src:url(/fonts/fraunces-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(/fonts/fraunces-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(/fonts/fraunces-brand-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0130-0131,U+011E-011F,U+015E-015F}
@font-face{font-family:Fraunces;src:url(/fonts/fraunces-brand-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0130-0131,U+011E-011F,U+015E-015F}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-brand-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0130-0131,U+011E-011F,U+015E-015F}
@font-face{font-family:Inter;src:url(/fonts/inter-brand-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0130-0131,U+011E-011F,U+015E-015F}

/* --------------------------------------------------------------- Token */
:root{
  /* superfici */
  --paper:#fff;
  --paper-2:#faf9f7;

  /* testo: grigi caldi, mai nero pieno */
  --ink:#2b2a28;
  --ink-2:#6b6660;

  --line:#eceae6;
  --line-strong:#d9d5ce;

  /* accent: CTA primarie, barretta firma, blocco del hero */
  --accent:#e9b93c;
  --accent-deep:#d8a828;
  --wa:#25d366;          /* solo dentro l'icona WhatsApp */

  /* scala di spaziatura, base 8 */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:160px;

  --radius:16px;
  --wrap:1180px;
  --read:65ch;
  --tap:44px;            /* area minima toccabile */

  --shadow-photo:0 24px 60px -34px rgba(43,42,40,.5);
  --shadow-lift:0 14px 34px -20px rgba(43,42,40,.42);
  --shadow-head:0 1px 0 var(--line),0 10px 30px -24px rgba(43,42,40,.5);

  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.55s;
  --shift:10px;          /* traslazione delle animazioni, ridotta su mobile */

  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:Fraunces,Georgia,"Times New Roman",serif;

  interpolate-size:allow-keywords;   /* abilita la transizione dell'accordion */
}

/* --------------------------------------------------------------- Base */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s3)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}

/* freccia disegnata, non un carattere: la → non esiste nei font del sito
   e verrebbe presa dal font di sistema, diverso su ogni dispositivo */
.path i::after,.btn::after{
  content:"";width:1.05em;height:1.05em;flex:none;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform .45s var(--ease);
}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* --------------------------------------------------- Logo (solo HTML/CSS) */
.logo{
  font-family:var(--serif);font-weight:700;font-size:1.05rem;
  letter-spacing:-.03em;text-decoration:none;line-height:1;
  display:inline-flex;align-items:baseline;gap:.12em;white-space:nowrap;
}
.logo em{font-style:normal;box-shadow:inset 0 -.22em 0 rgba(233,185,60,.45)}
.logo::after{content:"";width:.16em;height:.16em;border-radius:50%;background:var(--accent);display:inline-block}

/* --------------------------------------------------------------- Header
   Trasparente sopra il hero, diventa solido appena si scorre: la classe
   .is-stuck la mette reveal.js con una sentinella, senza listener di scroll. */
.site-head{
  position:sticky;top:0;z-index:20;background:transparent;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s var(--ease);
}
.site-head.is-stuck{
  background:color-mix(in srgb,var(--paper) 93%,transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  box-shadow:var(--shadow-head);
}
@supports not (backdrop-filter:blur(1px)){
  .site-head.is-stuck{background:var(--paper)}
}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;padding-block:6px;padding-inline:14px}

.site-nav{width:100%;order:3;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav ul{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0}
.site-nav a{
  display:flex;align-items:center;min-height:var(--tap);white-space:nowrap;text-decoration:none;
  font-size:.84rem;font-weight:500;color:var(--ink-2);position:relative;
  transition:color .35s var(--ease);
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.site-nav a:hover{color:var(--ink)}
.site-nav a:hover::after{transform:scaleX(1)}

.lang-nav{margin-left:auto}
.langs{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.langs a{
  display:flex;align-items:center;justify-content:center;min-width:34px;min-height:var(--tap);
  text-decoration:none;font-size:.74rem;font-weight:600;letter-spacing:.08em;color:var(--ink-2);
  transition:color .35s var(--ease);
}
.langs a:hover{color:var(--ink)}
.langs [aria-current="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}

/* CTA WhatsApp: conversione "soft", neutra e compatta. Il giallo resta alle
   due CTA principali, il verde solo dentro l'icona. */
.wa-head{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;
  width:var(--tap);height:var(--tap);border-radius:50%;
  font-size:.8rem;font-weight:600;text-decoration:none;color:var(--ink);
  border:1px solid var(--line-strong);background:var(--paper);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.wa-head span{display:none}
.wa-head svg{width:17px;height:17px;fill:var(--wa);flex:none}
.wa-head:hover{transform:translateY(-1px);border-color:var(--ink);box-shadow:var(--shadow-lift)}

/* --------------------------------------------------------------- Sezioni */
section{padding-block:var(--s5)}
.sec-alt{background:var(--paper-2)}

/* elemento firma: barretta ocra che apre ogni occhiello di sezione */
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 var(--s3);display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}

h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.028em;line-height:1.06;margin:0;text-wrap:balance}
h1{font-size:clamp(1.85rem,7.6vw,4rem)}
h2{font-size:clamp(1.75rem,6.4vw,2.9rem);margin-bottom:var(--s3);line-height:1.08}
h3{font-size:1.08rem;line-height:1.28;letter-spacing:-.015em}
p{margin:0 0 var(--s2);text-wrap:pretty}
.lede{font-size:1.05rem;color:var(--ink-2);max-width:52ch}
.prose{max-width:var(--read)}
.prose p{color:var(--ink-2)}

/* Link testuale: sottolineatura che si disegna da sinistra */
.link{
  text-decoration:none;
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--line-strong),var(--line-strong));
  background-size:0% 1px,100% 1px;background-position:0 100%,0 100%;background-repeat:no-repeat;
  transition:background-size .5s var(--ease);padding-bottom:2px;
}
.link:hover{background-size:100% 1px,100% 1px}

/* --------------------------------------------------------------- Hero */
.hero{padding-top:var(--s2);padding-bottom:var(--s5)}
.hero-grid{
  display:grid;column-gap:var(--s2);row-gap:var(--s2);align-items:center;
  grid-template-columns:76px minmax(0,1fr);
  grid-template-areas:"photo id" "copy copy" "cta cta";
}
.hero-photo{grid-area:photo;margin:0;position:relative}
/* Il blocco ocra dietro al ritratto: unico blocco di colore pieno del sito.
   Sul tondino è un alone concentrico, non sfalsato: su 76px uno scarto di
   dieci pixel si legge come un errore di allineamento, non come una scelta.
   Torna a essere un blocco sfalsato da 940px, dove il ritratto è grande. */
.hero-photo::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  background:var(--accent);z-index:-1;
}
.hero-photo picture{display:block;width:76px;height:76px;border-radius:50%;overflow:hidden}
/* zoom sul viso: nel tondino serve il volto, non la figura intera */
.hero-photo img{width:100%;height:100%;object-fit:cover;transform:scale(2) translate(-2%,20%)}
.hero-id{grid-area:id}
.hero-id .eyebrow{margin:0 0 4px}
.hero-id b{font-family:var(--serif);font-weight:600;font-size:1.05rem;display:block;letter-spacing:-.02em}
.hero-id span{display:none;font-size:.86rem;color:var(--ink-2)}
.hero-copy{grid-area:copy}
.hero-cta{grid-area:cta}
.hero h1{margin-bottom:var(--s2)}
.hero .lede{font-size:1rem;margin-bottom:0}

/* ------------------------------------------------- Dual-path (le due CTA) */
.paths{display:grid;gap:12px;margin-top:20px}
.path{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:18px 20px;background:var(--paper);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.path--team{border-color:var(--ink)}
.path b{font-family:var(--serif);font-size:1.14rem;font-weight:700;line-height:1.2;letter-spacing:-.022em}
.path span{font-size:.9rem;color:var(--ink-2)}
.path i{
  font-style:normal;font-weight:600;font-size:.85rem;margin-top:10px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);
  border:1px solid var(--line-strong);border-radius:99px;padding:0 var(--s2) 0 18px;
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.path--team i{background:var(--accent);border-color:var(--accent)}
.path:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--ink)}
.path:hover i::after{transform:translateX(4px)}
.path--team:hover i{background:var(--accent-deep)}
.paths-note{font-size:.82rem;color:var(--ink-2);margin:var(--s2) 0 0;max-width:58ch}
.steps+.paths-note{margin-top:var(--s4)}

/* --------------------------------------------------------------- Step
   La numerazione è l'elemento grafico della sezione: grande, grigio chiaro. */
.steps{display:grid;gap:var(--s4);margin:var(--s4) 0 0;padding:0;list-style:none;counter-reset:s}
.step{counter-increment:s;position:relative;padding-top:var(--s1)}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--serif);font-weight:700;font-size:clamp(2.8rem,11vw,4.4rem);
  line-height:.8;letter-spacing:-.04em;color:var(--line);display:block;margin-bottom:14px;
}
.step h3{margin-bottom:6px}
.step p{margin:0;font-size:.94rem;color:var(--ink-2)}

/* --------------------------------------------------------------- Bottoni */
.btn{
  display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);
  text-decoration:none;font-weight:600;font-size:.94rem;padding:0 var(--s3);
  border-radius:99px;border:1px solid var(--accent);
  background:var(--accent);color:var(--ink);margin-top:var(--s2);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
}
.btn--ghost{background:transparent;border-color:var(--line-strong)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);background:var(--accent-deep);border-color:var(--accent-deep)}
.btn--ghost:hover{background:var(--paper);border-color:var(--ink)}
.btn:hover::after{transform:translateX(4px)}
.btn-note{font-size:.8rem;color:var(--ink-2);margin:14px 0 0;max-width:52ch}

/* --------------------------------------------------------------- Manifesto */
.manifesto{
  margin:var(--s4) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--line);
  font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,4.4vw,1.6rem);
  line-height:1.3;letter-spacing:-.022em;
}
.manifesto footer{font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--ink-2);margin-top:14px}

/* --------------------------------------------------------------- Foto
   Stesso raggio, stessa ombra, stesso rapporto 4:5 ovunque. */
.shot{display:block;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow-photo)}
.shot img{width:100%;transition:transform .7s var(--ease)}
.shot:hover img{transform:scale(1.02)}

.split{display:grid;gap:var(--s4)}
.split figure{margin:0}
.proof figcaption{font-size:.82rem;color:var(--ink-2);margin-top:14px}

/* --------------------------------------------------------------- FAQ */
.faq{margin-top:var(--s3)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;min-height:var(--tap);
  font-family:var(--serif);font-weight:600;font-size:1.04rem;line-height:1.3;letter-spacing:-.02em;
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ink-2)}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;
  font-family:var(--sans);font-weight:400;font-size:1.4rem;color:var(--ink-2);line-height:0;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .5s var(--ease),color .35s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(135deg);color:var(--ink)}
.faq .answer{padding:0 0 var(--s3);margin:0;font-size:.95rem;color:var(--ink-2)}

/* apertura fluida senza JS; dove non è supportata l'accordion funziona uguale */
@supports selector(details::details-content){
  .faq details::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size .5s var(--ease),opacity .4s var(--ease),content-visibility .5s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto;opacity:1}
}

/* --------------------------------------------------- Contatto WhatsApp */
.wa-line{
  margin:var(--s3) 0 0;font-size:.94rem;color:var(--ink-2);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
}
.wa{
  display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);
  font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:99px;padding:0 20px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.wa svg{width:16px;height:16px;fill:var(--wa);flex:none}
.wa:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--ink)}

/* --------------------------------------------------------------- Pagine legali */
.page-legal{padding-block:var(--s5) var(--s6)}
.page-legal h1{font-size:clamp(1.9rem,7vw,3rem);margin-bottom:var(--s2)}
.page-legal .lede{margin-bottom:var(--s4)}
.page-legal h2{font-size:clamp(1.15rem,3.6vw,1.4rem);margin:var(--s4) 0 var(--s2)}
.page-legal .prose p{margin-bottom:var(--s2)}

/* --------------------------------------------------------------- 404 */
.page-404{padding-block:var(--s6) var(--s7);display:grid;align-content:center;min-height:60vh}
.page-404 h1{font-size:clamp(1.9rem,7.6vw,3.2rem);margin-bottom:var(--s2)}
.page-404 .paths-note{margin-top:var(--s4)}

/* --------------------------------------------------------------- CTA finale */
.final{border-top:1px solid var(--line);padding-block:var(--s5)}

/* --------------------------------------------------------------- Footer */
.site-foot{background:var(--paper-2);border-top:1px solid var(--line);padding-block:var(--s5);font-size:.86rem;color:var(--ink-2)}
.site-foot .logo{font-size:1.3rem;color:var(--ink);margin-bottom:var(--s2)}
.site-foot p{margin:0 0 12px;max-width:60ch}

/* Footer a colonne: identità, contatti, note. Su mobile è una colonna sola,
   nello stesso ordine. */
.foot-grid{display:grid;gap:var(--s4)}
.foot-brand p{margin:0}
.foot-brand strong{color:var(--ink);font-family:var(--serif);font-weight:600;font-size:1.02rem;letter-spacing:-.015em}
.foot-fine{font-size:.82rem}
.foot-fine p:last-child{margin-bottom:0}

.socials{display:flex;gap:12px;list-style:none;margin:var(--s2) 0 0;padding:0}
.socials a{
  display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;
  border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.socials a:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.socials svg{width:18px;height:18px;fill:currentColor}
.socials .is-wa svg{fill:var(--wa)}
.foot-legal{border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s3);font-size:.79rem}
.foot-legal p{margin-bottom:6px;max-width:none}

/* Da 360px: quasi tutti i telefoni in circolazione. L'header sta su due righe
   con la CTA WhatsApp accanto alle lingue. */
@media (min-width:360px){
  .logo{font-size:1.1rem}
  .site-head .wrap{gap:0 10px;padding-inline:18px}
  .langs a{min-width:38px}
}

/* ==========================================================================
   Da 480px: c'è spazio per far respirare header e tipografia
   ========================================================================== */
@media (min-width:480px){
  .logo{font-size:1.3rem}
  .site-head .wrap{gap:0 var(--s2);padding-inline:var(--s3)}
  .langs a{min-width:44px;font-size:.76rem}
  .wa-head{width:auto;height:auto;min-height:40px;border-radius:99px;padding:0 var(--s2)}
  .wa-head span{display:inline}
  .hero-grid{grid-template-columns:96px minmax(0,1fr);column-gap:var(--s3)}
  .hero-photo picture{width:96px;height:96px}
  .hero-id span{display:block}
}

/* ==========================================================================
   Da 760px: due colonne
   ========================================================================== */
@media (min-width:760px){
  :root{--shift:16px}
  html{scroll-padding-top:88px}
  section{padding-block:var(--s6)}
  .wrap{padding:0 var(--s4)}
  .site-head .wrap{padding-block:10px}

  .paths{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .path{padding:var(--s3) var(--s4) var(--s3)}
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,.78fr);align-items:center;gap:var(--s5)}
  /* con --flip si invertono ordine e larghezze, altrimenti la foto finirebbe
     nella colonna larga del testo */
  .split--flip{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}
  .split--flip > :first-child{order:2}
  .split--flip > figure{order:1}
  /* "Chi sono": foto sfalsata, non allineata al centro del testo */
  .split--offset{align-items:start}
  .split--offset > figure{margin-top:var(--s5)}

  .final{padding-block:var(--s6)}
  .hero .lede{font-size:1.05rem}

  .foot-grid{grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.2fr);gap:var(--s5);align-items:start}
  .foot-legal{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
  .foot-legal p{margin-bottom:0}
  .hero{padding-top:var(--s4);padding-bottom:var(--s6)}
}

/* ==========================================================================
   Da 940px: composizione asimmetrica del hero, ritratto da copertina
   ========================================================================== */
@media (min-width:940px){
  /* riga singola solo quando c'è davvero spazio per logo, navigazione,
     lingue e CTA: sotto i 940 l'header resta su due righe */
  .site-head .wrap{flex-wrap:nowrap;gap:var(--s4)}
  .site-nav{width:auto;order:0;overflow:visible;margin-left:var(--s2)}

  section{padding-block:var(--s7)}
  .final{padding-block:var(--s7)}
  .hero{padding-top:var(--s5);padding-bottom:var(--s7)}

  .hero-grid{
    grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
    grid-template-areas:"id photo" "copy photo" "cta cta";
    column-gap:var(--s5);row-gap:0;align-items:start;
  }
  .hero-id{align-self:end;margin-bottom:var(--s2)}
  .hero-cta{margin-top:var(--s5)}
  .hero .paths{margin-top:0}
  .hero-photo{align-self:center}
  .hero-photo picture{
    width:100%;height:auto;border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow-photo);
  }
  .hero-photo img{
    width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:52% 45%;
    transform:none;transition:transform .7s var(--ease);
  }
  .hero-photo:hover img{transform:scale(1.02)}
  /* il blocco ocra, sfalsato dietro al ritratto */
  .hero-photo::before{inset:var(--s3) calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3);border-radius:var(--radius)}

  .lede{font-size:1.12rem}
  .hero h1{margin-bottom:var(--s3)}
  .split{gap:var(--s6)}
}

/* ==========================================================================
   MOVIMENTO — additivo: senza JS e senza animazioni la pagina è già completa
   ========================================================================== */
@keyframes rise{from{opacity:0;transform:translateY(var(--shift))}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .62s var(--ease) both;animation-delay:var(--d,0ms)}
}
/* ritardi della sequenza del hero: classi, non style inline, così la
   Content-Security-Policy può vietare gli stili inline */
.d1{--d:120ms}.d2{--d:240ms}.d3{--d:360ms}.d4{--d:460ms}

.js .reveal{opacity:0;transform:translateY(var(--shift));transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .reveal.in{opacity:1;transform:none}

.js .reveal .stg{opacity:0;transform:translateY(var(--shift));transition:opacity .5s var(--ease) var(--sd,0ms),transform .5s var(--ease) var(--sd,0ms)}
.js .reveal.in .stg{opacity:1;transform:none}
.stg:nth-child(1){--sd:90ms}
.stg:nth-child(2){--sd:200ms}
.stg:nth-child(3){--sd:310ms}
.stg:nth-child(4){--sd:420ms}
.stg:nth-child(5){--sd:530ms}
.stg:nth-child(6){--sd:640ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal,.js .reveal .stg,.reveal,.stg,.rise{opacity:1!important;transform:none!important}
}