/* ════════════════════════════════════════════════════════════════
   Studio di Psicologia · Reggio Calabria
   Palette naturale: salvia, sabbia, eucalipto, accenti caldi
   Type: Lora (titoli) + Inter (testo)
   ════════════════════════════════════════════════════════════════ */

/* ── 0 · Caratteri ospitati in locale ───────────────────────────
      Lora e Inter (SIL Open Font License 1.1) ridotti ai soli
      glifi latini che servono. Ospitarli qui evita che ogni
      visita passi da un server esterno prima del consenso.
      ────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+2013-2014, U+2018-201A,
                 U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
                 U+20AC, U+2122, U+00D7, U+2192;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('../fonts/lora-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+2013-2014, U+2018-201A,
                 U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
                 U+20AC, U+2122, U+00D7, U+2192;
}
@font-face {
  font-family: 'Lora'; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+2013-2014, U+2018-201A,
                 U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
                 U+20AC, U+2122, U+00D7, U+2192;
}
@font-face {
  font-family: 'Lora'; font-style: italic; font-weight: 500;
  font-display: swap;
  src: url('../fonts/lora-500-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+2013-2014, U+2018-201A,
                 U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
                 U+20AC, U+2122, U+00D7, U+2192;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+2013-2014, U+2018-201A,
                 U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
                 U+20AC, U+2122, U+00D7, U+2192;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+2013-2014, U+2018-201A,
                 U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
                 U+20AC, U+2122, U+00D7, U+2192;
}


/* ── 1 · Token ─────────────────────────────────────────────── */
:root {
  /* colore */
  --cream:      #FAF7F2;
  --cream-2:    #F4EFE7;
  --sand:       #EDE4D6;
  --sand-deep:  #DFD2BE;
  --campo:      #E8DDCB;   /* fondo caldo del blocco centrale */
  --euca-soft:  #C8D4C4;
  --euca:       #A9BBA6;
  --sage:       #7C8F6B;
  --sage-deep:  #556348;
  --terra:      #B4744A;
  --terra-deep: #9A5F39;
  --ink:        #2B3128;
  --ink-soft:   #4A5344;

  --line:       rgba(92, 107, 78, .16);
  --line-soft:  rgba(92, 107, 78, .09);

  /* ombre calde, mai grigie */
  --sh-sm: 0 1px 2px rgba(74, 64, 44, .05), 0 4px 12px rgba(74, 64, 44, .05);
  --sh-md: 0 2px 6px rgba(74, 64, 44, .06), 0 18px 40px -14px rgba(74, 64, 44, .16);
  --sh-lg: 0 4px 10px rgba(74, 64, 44, .05), 0 34px 74px -26px rgba(74, 64, 44, .30);

  /* forma */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --arch: 999px 999px var(--r-lg) var(--r-lg);

  /* ritmo */
  --wrap: min(1280px, 100% - clamp(2.5rem, 9vw, 10rem));
  --sec-y: clamp(4rem, 7vw, 7rem);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* z-scale */
  --z-grain: 5;
  --z-nav: 30;
  --z-menu: 20;
}

/* ── 2 · Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;      /* niente inversione automatica in scuro */
  overflow-x: hidden;
  overflow-x: clip;   /* i browser vecchi usano hidden */
}

html { scroll-padding-top: 6.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  -webkit-tap-highlight-color: transparent;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 1.09375rem; } }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; }

p { text-wrap: pretty; }

a { color: inherit; }

button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible {
  outline: 2.5px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
@supports not selector(:focus-visible) {
  a:focus, button:focus, summary:focus {
    outline: 2.5px solid var(--sage-deep);
    outline-offset: 3px;
  }
}

::selection { background: var(--euca-soft); color: var(--ink); }

.wrap { width: var(--wrap); margin-inline: auto; }

.skip-link {
  position: absolute; left: 1rem; top: -100px;
  z-index: 60; padding: .7rem 1.2rem;
  background: var(--sage-deep); color: var(--cream);
  border-radius: var(--r-sm); font-size: .9rem; font-weight: 500;
  text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

/* grana sottile su tutta la pagina */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none; opacity: .34; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ── 3 · Elementi condivisi ────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: flex-start; gap: .6rem;
  font-size: .75rem; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--sage-deep); margin-bottom: 1.25rem;
}
.eyebrow__dot {
  width: 6px; height: 6px; margin-top: .5em; border-radius: 50%;
  background: var(--terra); flex: none;
}
.eyebrow--light { color: var(--sage-deep); }

.ico { width: 20px; height: 20px; flex: none; }

.btn {
  --bg: transparent; --fg: var(--ink); --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.6rem;
  font-size: .95rem; font-weight: 500; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  min-height: 48px;
  border: 1px solid var(--bd); border-radius: 999px;
  background: var(--bg); color: var(--fg);
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn .ico { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

.btn--primary { --bg: var(--sage-deep); --fg: var(--cream); --bd: var(--sage-deep); box-shadow: var(--sh-sm); }
.btn--primary:hover { --bg: #46523B; --bd: #46523B; box-shadow: var(--sh-md); }

.btn--ghost { --fg: var(--ink); --bd: var(--line); }
.btn--ghost:hover { --bg: var(--sand); --bd: rgba(92,107,78,.3); }

.btn--sm { padding: .6rem 1.1rem; font-size: .875rem; min-height: 44px; }

/* rivelazione allo scroll */
/* Il contenuto e' visibile per definizione. L'animazione si accende
   solo se il JS conferma di essere vivo mettendo .js-reveal su <html>;
   se lo script non parte o non arriva, la pagina resta leggibile. */
.js-reveal .reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0s);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* I ritardi erano attributi style="--d:.06s" nel markup. Spostarli qui
   permette alla Content-Security-Policy di vietare del tutto lo stile
   in linea, senza cambiare di un millisecondo l'animazione. */
.d-06 { --d: .06s; }
.d-08 { --d: .08s; }
.d-10 { --d: .10s; }
.d-12 { --d: .12s; }
.d-14 { --d: .14s; }
.d-16 { --d: .16s; }
.d-18 { --d: .18s; }
.d-24 { --d: .24s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* forma ad arco */
.arch {
  border-radius: var(--arch);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--sand);
  /* Griglia, non blocco. Con «height: auto» e aspect-ratio sull'arco, un
     «height: 100%» sulla foto non trova un'altezza definita a cui
     agganciarsi e la foto torna al proprio rapporto: se non coincide con
     quello dell'arco resta una striscia di fondo scoperta in basso.
     Come cella di griglia invece la foto si stira sempre al riquadro. */
  display: grid;
}
.arch img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.arch--soft { border-radius: 999px 999px var(--r-lg) var(--r-lg); }

.section { padding-block: var(--sec-y); position: relative; }

.head { max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head h2 { font-size: clamp(1.85rem, 1.15rem + 2.4vw, 3rem); }
.head__lead {
  margin-top: 1.15rem; font-size: 1.0625rem; color: var(--ink-soft);
  max-width: 36rem;
}
.head--center .head__lead { margin-inline: auto; }

/* intestazione su due colonne: riempie la larghezza e tiene un solo
   bordo sinistro comune a titoli, schede e passi del percorso */
.head--split { max-width: none; display: grid; gap: 1.15rem; }
@media (min-width: 900px) {
  .head--split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: 0;
    align-items: start;
  }
  .head--split > .eyebrow { grid-column: 1 / -1; margin-bottom: 1.35rem; }
  .head--split > h2 { grid-column: 1; }
  /* compensa il diverso spazio sopra le maiuscole nei due corpi,
     così le prime righe cominciano alla stessa altezza */
  .head--split > .head__lead { grid-column: 2; margin-top: .1rem; max-width: 34rem; }
}

/* ════════════════════════════════════════════════════════════
   4 · NAV
   ════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; z-index: var(--z-nav);
  top: calc(1rem + env(safe-area-inset-top, 0px));
  left: env(safe-area-inset-left, 0px);
  right: env(safe-area-inset-right, 0px);
}
.nav__inner {
  display: flex; align-items: center; gap: 1rem;
  width: var(--wrap); margin-inline: auto;
  padding: .55rem .65rem .55rem 1.15rem;
  border-radius: 999px;
  background: rgba(250, 247, 242, .72);
  border: 1px solid rgba(92, 107, 78, .1);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 2px rgba(74,64,44,.03);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav__inner { background: rgba(250, 247, 242, .97); }
}
.nav.is-stuck .nav__inner {
  background: rgba(250, 247, 242, .93);
  border-color: rgba(92, 107, 78, .16);
  box-shadow: var(--sh-md);
}

.nav__brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; margin-right: auto;
}
.nav__mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  background: var(--sage-deep); color: var(--euca-soft);
}
.nav__mark svg { width: 19px; height: 19px; }
.nav__name { display: flex; flex-direction: column; line-height: 1.15; }
.nav__name strong {
  font-family: 'Lora', serif; font-weight: 500; font-size: 1.02rem;
  color: var(--ink); letter-spacing: -.005em;
}
.nav__name em {
  font-style: normal; font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--sage-deep); margin-top: 1px;
  white-space: nowrap;
}
@media (max-width: 560px) { .nav__city { display: none; } }

.nav__links { display: none; gap: .25rem; }
@media (min-width: 900px) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  padding: .55rem .9rem;
  font-size: .9rem; font-weight: 500;   /* con 400 e 500 caricati, 450 rendeva già 500 */
  text-decoration: none; color: var(--ink-soft);
  border-radius: 999px;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 50%; bottom: .34rem;
  width: 4px; height: 4px; border-radius: 50%; background: var(--terra);
  transform: translate(-50%, 4px) scale(0);
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--ink); background: rgba(168, 187, 166, .2); }
.nav__link.is-current { color: var(--ink); }
.nav__link.is-current::after { transform: translate(-50%, 4px) scale(1); }

.nav__cta { display: none; }
@media (min-width: 900px) { .nav__cta { display: inline-flex; } }

.nav__burger {
  display: grid; place-content: center; gap: 5px;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%; cursor: pointer;
  transition: background-color .25s var(--ease);
}
.nav__burger:hover { background: var(--sand); }
.nav__burger span {
  display: block; width: 19px; height: 1.6px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.3px) rotate(-45deg); }
@media (min-width: 900px) { .nav__burger { display: none; } }

.menu {
  position: relative; z-index: var(--z-menu);
  width: var(--wrap); margin: .5rem auto 0;
  padding: .75rem;
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}
.menu[hidden] { display: none; }
.menu a {
  padding: .95rem 1rem;
  font-size: 1.02rem; text-decoration: none; color: var(--ink);
  border-radius: var(--r-sm);
  transition: background-color .2s var(--ease);
}
.menu a:hover { background: var(--sand); }
.menu__tel {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .35rem; color: var(--sage-deep) !important; font-weight: 500;
  border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* ════════════════════════════════════════════════════════════
   5 · HERO
   ════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding-top: clamp(8.5rem, 10.5vw, 10rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
  background:
    radial-gradient(120% 80% at 82% 8%, rgba(237, 228, 214, .85) 0%, rgba(250, 247, 242, 0) 60%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 55%);
  overflow: hidden;
}
.hero__glow {
  position: absolute; top: -18%; right: -12%;
  width: min(62vw, 720px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 187, 166, .32) 0%, rgba(168, 187, 166, 0) 68%);
  pointer-events: none;
}

.hero__grid { position: relative; display: grid; gap: clamp(2.75rem, 6vw, 4.5rem); }
@media (min-width: 900px) {
  /* testo e immagine partono dalla stessa quota: niente scarto da centratura */
  .hero__grid { grid-template-columns: 1.06fr .94fr; align-items: start; }
  /* su schermi bassi l'hero si stringe, così la riga dell'albo resta visibile */
  .hero { padding-top: min(clamp(8.5rem, 10.5vw, 10rem), 14vh); }
}

/* citazione d'apertura: corsivo, corpo contenuto, il nome resta davanti */
/* firma d'apertura: «Dott.ssa» e il nome hanno lo stesso corpo,
   si distinguono solo per tono e peso */
.hero__byline {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: .46em; row-gap: 0;
  max-width: 100%;
  margin: 0 0 3.6rem;
}
.hero__byline i {
  font-family: 'Lora', Georgia, serif; font-style: normal; font-weight: 400;
  font-size: clamp(2.15rem, 1.35rem + 2.6vw, 3.3rem);
  line-height: 1.16; letter-spacing: -.022em; color: var(--ink-soft);
}
.hero__byline b {
  font-family: 'Lora', Georgia, serif; font-weight: 500;
  font-size: clamp(2.15rem, 1.35rem + 2.6vw, 3.3rem);
  line-height: 1.16; letter-spacing: -.024em; color: var(--ink);
}

.hero__title {
  /* non è più un h1: quello che prima ereditava adesso è scritto qui */
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  text-wrap: balance;
  font-weight: 400;
  font-size: clamp(1.32rem, .98rem + 1.35vw, 1.95rem);
  line-height: 1.46;
  letter-spacing: -.004em;
  margin-bottom: 3.5rem;
  max-width: 30ch;
}
.hero__quote { font-style: italic; display: block; }
.hero__cite {
  display: block; margin-top: 1.25rem;
  font-family: 'Inter', sans-serif; font-style: normal; font-weight: 500;
  font-size: .74rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__cite::before { content: '— '; }

.hero__lead {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  line-height: 1.72; color: var(--ink-soft);
  max-width: 33rem;
}
.hero__lead strong { color: var(--ink); font-weight: 500; }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: min(5rem, 8vh);
}

.hero__note {
  margin-top: clamp(1.6rem, 3.5vh, 3rem);
  font-size: .84rem; letter-spacing: .01em; color: var(--ink-soft);
}

/* media hero */
.hero__media { position: relative; margin: 0; }
.hero__media .arch { aspect-ratio: 4 / 4.6; }
@media (min-width: 900px) {
  .hero__media { padding-left: 1.25rem; }
}

/* ── Hero su telefono ───────────────────────────────────────────────
      Su una colonna sola la foto finiva sotto tutto il testo: a 375px
      cominciava a 871px, cioè 200px sotto la piega, e non la vedeva
      nessuno. Qui la porto subito sotto il nome.

      Per infilarla in mezzo ai paragrafi senza toccare il desktop,
      .hero__text smette di essere una scatola (display: contents) e i
      suoi figli diventano celle della stessa griglia: da lì li ordino.

      La citazione di Beck sale subito sotto la foto, e la frase di Majra
      la segue: è la sua spiegazione, separarle le indebolisce entrambe.

      Sei cose in una schermata non ci stanno da sole, e la prima volta
      le ho fatte stare restringendo la foto: ritratto al 66% della
      colonna, un terzo di bianco morto alla sua destra, e sotto due
      blocchi di testo a piena larghezza. Contati in pixel i conti
      tornavano; guardata, la schermata diceva che la cosa importante
      erano le parole. Il volto perdeva un confronto che non doveva
      nemmeno esserci.

      Qui il ritratto prende tutta la colonna — niente più gutter, niente
      più confronto — e la citazione scende di corpo: da 19 a 16 pixel.
      La frase di Majra resta dov'è, a 15,2: è l'unica cosa che qui si
      legge davvero riga per riga, e la leggibilità non è la variabile
      da sacrificare. A pagare sono le distanze e il ritratto stesso, che
      cresce più in fretta dello schermo: su un telefono basso si stringe
      e libera l'aria, su uno alto arriva a filo di colonna.
      ─────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  /* Sopra: quanto basta a staccare il nome dalla pillola del menù, che
     finisce a 80px. Sotto: due dita, il fondo prosegue nella sezione
     dopo e l'aria serve di più fra i blocchi. */
  .hero { padding-top: clamp(6rem, 21vw, 8rem); padding-bottom: clamp(.75rem, 2.5vw, 1.5rem); }

  /* Lo hero occupa almeno tutta la schermata e distribuisce da solo
     l'aria che avanza. I margini qui sotto restano il ritmo minimo —
     il rapporto fra una distanza e l'altra non cambia — mentre lo
     spazio libero, quello che su un telefono grande resterebbe bianco
     in fondo, viene diviso in parti uguali fra i blocchi. Su uno
     schermo corto non avanza niente e non succede niente. */
  .hero { display: grid; min-height: 100svh; }

  .hero__text  { display: contents; }
  .hero__grid  { gap: 0; align-content: space-between; }

  /* La frase spiega la citazione: le sta subito sotto, prima dei
     pulsanti. Sul desktop l'ordine è già questo.
     Le distanze sono in svh, non in rem: su uno schermo basso si
     stringono da sole invece di far crescere la colonna. Rispetto a
     prima sono tutte più strette di un paio di pixel: quello che tolgo
     qui va nella foto, ed è lì che si vede. */
  /* Il nome sull'asse della pillola del menù. La colonna era già la
     stessa — bordo a bordo, 20px per lato — ma il nome la riempiva solo
     per 302 dei 353 pixel disponibili e restava appeso a sinistra, con
     cinquanta pixel di vuoto a destra proprio sotto un banner simmetrico.
     Centrandolo i due elementi condividono lo stesso centro — lo stesso
     asse su cui, qui sotto, sta tutto il resto della schermata. */
  .hero__byline  { order: 1; justify-content: center; margin-bottom: clamp(.7rem, 2.2svh - 3px, 1.5rem); }
  /* «Dott.ssa Majra Bullace» è quattro caratteri più lungo di «D.ssa
     Majra Bullace»: a 34,4px vuole 348 pixel, e la colonna di un telefono
     da 375 ne offre 335. Andava a capo, la firma diventava alta il doppio
     e la schermata sfondava di 31 pixel.

     Qui il corpo lo detta la larghezza dello schermo invece di un valore
     fisso: «9.5vw - 5px» è la retta che tiene il nome sempre una decina
     di pixel dentro il bordo — 29px su un Android da 360, 32 su un 393,
     34,4 (il valore del desktop, oltre non sale) su un Pro Max. Una riga
     sola a ogni misura, senza rimpicciolire dove non serve. */
  .hero__byline i,
  .hero__byline b { font-size: clamp(1.55rem, 9.5vw - 5px, 2.15rem); }
  /* Quando il ritratto non arriva a filo di colonna — su uno schermo
     basso si stringe — resta in mezzo invece di appoggiarsi a sinistra
     con il vuoto tutto da una parte: era proprio quel vuoto a far
     sembrare la foto piccola. */
  .hero__media   { order: 2; display: grid; justify-items: center; }
  .hero__title   { order: 3; margin: clamp(.85rem, 2.6svh - 4px, 1.8rem) 0 0; }
  /* La frase sta più vicina alla citazione di quanto la citazione stia
     alla foto: si leggono come una cosa sola, domanda e risposta. È il
     margine più stretto dei quattro, e resta il più stretto a ogni
     misura di schermo — ma non può essere stretto quanto quello che
     tiene «Aaron T. Beck» attaccato alla citazione, altrimenti la firma
     galleggia in mezzo e non si capisce più di chi sia. */
  .hero__lead    { order: 4; margin: clamp(.8rem, 1.9svh - 3px, 1.35rem) 0 0; }
  /* i pulsanti prendono il margine più largo di tutti: sono l'ultima
     cosa da leggere prima di agire, e stando più in basso riempiono la
     schermata invece di lasciarla vuota sotto.
     Centrati come tutto il resto: i due insieme non riempiono la colonna,
     e appoggiati a sinistra lasciavano un vuoto solo a destra proprio
     dove finisce la schermata. Se un giorno andassero a capo, il
     justify-content li tiene comunque impilati sull'asse. */
  .hero__actions {
    order: 5; margin-top: clamp(.8rem, 3.4svh - 10px, 2.3rem);
    justify-content: center;
  }
  /* L'albo qui non serve: sul telefono la prima schermata deve dire chi
     è, mostrarla, convincere e far agire — il numero d'iscrizione non fa
     nessuna di queste quattro cose, e rubava l'aria a tutte. Resta scritto
     nel piè di pagina e nella scheda di «Chi sono», dove chi lo cerca lo
     cerca davvero. */
  .hero__note    { display: none; }

  /* Il ritratto arriva a filo di colonna: è il primo elemento della
     pagina per dimensione, e deve esserlo.

     La larghezza resta la valvola di sfogo dell'altezza. «83svh - 352px»
     è una retta molto più ripida dello schermo: a 667px di viewport dà
     202px, a 852px ne dà 355 — cioè più della colonna, e lì il min lo
     ferma al bordo. Su un telefono alto quindi è pieno, su uno basso
     cede spazio alla citazione e ai pulsanti proprio dove manca.

     Il rapporto 4:4,45 è quasi quello del ritaglio originale (0,87):
     si perdono una quindicina di pixel sopra e altrettanti sotto sui
     902 dell'originale, meno del due per cento — testa e mani restano
     dentro a ogni misura. */
  .hero__media .arch {
    aspect-ratio: 4 / 4.45;
    width: min(100%, clamp(150px, 83svh - 352px, 460px));
    height: auto;
  }
  .hero__media .arch img { object-position: center 45%; }

  /* La citazione apre, subito sotto la foto — ma è una citazione, non un
     titolo: a piena colonna, sotto un volto grande, 19 pixel di corsivo
     facevano blocco. Sedici la rimettono al suo posto.

     Centrata, perché sotto un'immagine a piena colonna il margine destro
     sfrangiato la faceva pendere da una parte. È un elemento d'apertura,
     come il nome: si guarda prima di leggerlo. La firma le va dietro. */
  .hero__title { font-size: clamp(1.1rem, .98rem + .45vw, 1.28rem); line-height: 1.45; max-width: none; text-align: center; }
  .hero__cite  { margin-top: clamp(.35rem, .95svh, .65rem); font-size: .7rem; }

  /* La frase non è un secondo titolo: è la risposta alla citazione.
     A 16 contro 15,2 però le due erano praticamente dello stesso corpo —
     un rapporto di 1,05, che l'occhio legge come «due paragrafi», non
     come «una citazione e il suo commento». Adesso 17,6 contro 14,4:
     rapporto 1,22, e insieme al corsivo Lora in nero contro l'Inter in
     grigio la gerarchia si vede al primo colpo d'occhio. Sotto i 14,4
     non scendo, e l'interlinea sale a 1,55 per compensare il corpo.

     L'avevo lasciata a bandiera a sinistra perché la prosa si legge
     meglio così. In pagina però non reggeva: nome, ritratto, citazione
     e firma stanno tutti sullo stesso asse, e questo era l'unico blocco
     che non ci stava — con il bordo destro sfrangiato sembrava storto,
     non allineato. Su tre righe la lettura non ne soffre, e il
     text-wrap: balance le pareggia in lunghezza così che il centraggio
     non lasci una riga mozza in fondo. */
  .hero__lead {
    font-size: clamp(.9rem, .7rem + .5vw, .98rem); line-height: 1.55; max-width: none;
    text-align: center; text-wrap: balance;
  }

}

/* ════════════════════════════════════════════════════════════
   6 · CHI SONO
   ════════════════════════════════════════════════════════════ */
.section--about { background: var(--cream); padding-bottom: clamp(3rem, 5vw, 4.5rem); }

.about { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); }

/* colonna testo su due campate: titolo a sinistra, racconto a destra */
.about__text--split { display: grid; gap: 1.15rem; }
@media (min-width: 940px) {
  .about__text--split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: 0;
    align-items: start;
  }
  .about__text--split > .eyebrow   { grid-column: 1 / -1; grid-row: 1; margin-bottom: 1.35rem; }
  .about__text--split > h2         { grid-column: 1; grid-row: 2; }
  .about__text--split > .prose     { grid-column: 2; grid-row: 2; margin-top: .1rem; }
  .about__text--split > .facts     { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(2.75rem, 4vw, 3.75rem); }
}

.about__text h2 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); }

.prose { margin-top: 1.75rem; display: grid; gap: 1.15rem; }
.prose p { max-width: 38rem; }
.prose em { color: var(--ink); font-style: italic; }

.facts {
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 1.4rem;
}
@media (min-width: 620px) { .facts { grid-template-columns: 1fr 1fr; gap: 1.6rem 2.5rem; } }
/* a piena larghezza le tre voci stanno su una riga sola */
@media (min-width: 940px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem clamp(2rem, 4vw, 3.5rem); } }
.fact dt {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--sage-deep); margin-bottom: .35rem;
}
.fact dd { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink); }

/* citazione */
.pull {
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  max-width: 46rem; text-align: center; position: relative;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
}
.pull::before {
  content: ''; position: absolute; inset: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.pull__quote { width: 32px; height: auto; margin: 0 auto 1.25rem; color: var(--euca); }
.pull p {
  font-family: 'Lora', serif; font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.65rem);
  line-height: 1.55; color: var(--ink);
}

/* ════════════════════════════════════════════════════════════
   7 · PER CHI È
   ════════════════════════════════════════════════════════════ */
.section--who { background: var(--campo); padding-bottom: 0; }

.cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.15rem;
}
@media (min-width: 700px)  { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }

.card {
  padding: 1.85rem 1.65rem 2rem;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(92, 107, 78, .22);
  box-shadow: var(--sh-md);
}
.card__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 1.25rem;
  border-radius: 14px;
  background: var(--euca-soft); color: var(--sage-deep);
  transition: background-color .3s var(--ease);
}
.card:hover .card__ico { background: var(--euca); }
.card__ico svg { width: 22px; height: 22px; }
.card h3 {
  font-size: 1.16rem; margin-bottom: .6rem;
  min-height: calc(2 * 1.18em);   /* due righe riservate: allinea i paragrafi */
}
.card p { font-size: .94rem; line-height: 1.68; }

/* ── il percorso ── */
.journey {
  position: relative; overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--campo);
}
.journey__inner { position: relative; z-index: 1; }

.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 2rem;
  counter-reset: step;
}
/* tre tappe, tre colonne: la riga da due lasciava l'ultima spaiata */
@media (min-width: 720px)  { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; } }
@media (min-width: 1040px) { .steps { gap: 2rem clamp(2rem, 4vw, 4rem); } }

.step { position: relative; padding-top: 2.25rem; }
.step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--euca); opacity: .55;
}
.step::after {
  content: ''; position: absolute; top: -3.5px; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--terra);
}
.step__num {
  font-family: 'Lora', serif; font-size: 1rem; font-weight: 500;
  letter-spacing: .1em; color: var(--sage-deep);
  display: block; margin-bottom: .5rem;
}
.step h3 {
  font-size: 1.2rem; margin-bottom: .55rem;
  min-height: calc(2 * 1.18em);
}
.step p { font-size: .93rem; line-height: 1.68; }


/* ════════════════════════════════════════════════════════════
   8 · CONTATTI
   ════════════════════════════════════════════════════════════ */
.section--contact { background: var(--cream); }

.contact { display: grid; gap: clamp(2.75rem, 6vw, 4.5rem); align-items: start; }
@media (min-width: 940px) { .contact { grid-template-columns: 1fr 1.05fr; } }

.contact__text h2 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); }

/* i due pulsanti di contatto stanno affiancati e vanno a capo insieme */

.phone {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1rem 1.75rem 1rem 1rem;
  text-decoration: none;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--sh-sm);
  transition: background-color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.phone:hover { background: #fff; border-color: rgba(92,107,78,.3); box-shadow: var(--sh-md); }
.phone__ico {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: none;
  border-radius: 50%; background: var(--sage-deep); color: var(--cream);
}
.phone__ico svg { width: 21px; height: 21px; }
.phone__body { display: flex; flex-direction: column; line-height: 1.2; }
.phone__label {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-deep); margin-bottom: .2rem;
}
.phone__num {
  font-family: 'Lora', serif; font-size: 1.45rem; color: var(--ink);
  letter-spacing: .01em;
}

.info { list-style: none; padding: 0; margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.info li { display: flex; gap: .9rem; align-items: flex-start; }
.info .ico { color: var(--sage); margin-top: 4px; }
.info h3 {
  font-family: 'Inter', sans-serif;
  font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--sage-deep); margin-bottom: .3rem;
}
.info p { font-size: .98rem; line-height: 1.6; color: var(--ink); }
.info p strong { font-weight: 500; }
.info a { color: var(--terra-deep); text-underline-offset: 3px; transition: color .2s var(--ease); }
.info a:hover { color: var(--ink); }

/* mappa illustrata */
.contact__map { display: grid; gap: 1.25rem; align-content: start; }

.mapcard {
  margin: 0; overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--cream);
  box-shadow: var(--sh-md);
}
.mapcard__svg { width: 100%; height: auto; display: block; }
.map-lbl {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: .17em; fill: #7A705F;
}
.map-lbl--sea { fill: #5F7059; opacity: .8; }

.pin__pulse { transform-origin: center; animation: pulse 2.8s var(--ease) infinite; }
@keyframes pulse {
  0%       { transform: scale(.62); opacity: .5; }
  70%,100% { transform: scale(1.12); opacity: 0; }
}

.mapcard__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.35rem;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem;
}
.mapcard__foot strong {
  display: block; font-family: 'Lora', serif; font-weight: 500;
  color: var(--ink); font-size: .98rem;
}

.contact__photo { margin: clamp(3rem, 6vw, 4.5rem) 0 0; }
.contact__photo img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center 58%;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
@media (min-width: 760px) { .contact__photo img { aspect-ratio: 5/2; } }
.contact__photo figcaption {
  margin-top: 1rem; font-size: .9rem; line-height: 1.65; color: var(--ink-soft);
  max-width: 46rem;
}
.contact__photo figcaption strong {
  font-family: 'Lora', serif; font-weight: 500; color: var(--ink);
}

/* le due colonne finiscono alla stessa quota: la mappa si allunga */
@media (min-width: 940px) {
  .contact { align-items: stretch; }
  .contact__map { align-content: stretch; }
  .mapcard { display: flex; flex-direction: column; min-height: 0; }
  .mapcard__svg { flex: 1 1 auto; min-height: 0; height: auto; }
}

.closing {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-family: 'Lora', serif; font-style: italic;
  font-size: clamp(1.1rem, .95rem + .8vw, 1.45rem);
  line-height: 1.6; color: var(--ink);
}
/* ════════════════════════════════════════════════════════════
   9 · FOOTER
   ════════════════════════════════════════════════════════════ */
.foot {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ink); color: rgba(244, 239, 231, .72);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
  font-size: .9rem;
}
.foot__grid { display: grid; gap: 2.25rem; }
@media (min-width: 800px) { .foot__grid { grid-template-columns: 1.1fr .7fr 1.2fr; gap: 3rem; } }

.foot__brand { display: flex; align-items: flex-start; gap: .85rem; }
.foot .nav__mark { background: rgba(200, 212, 196, .14); color: var(--euca-soft); }
.foot__brand strong {
  font-family: 'Lora', serif; font-weight: 500; font-size: 1.08rem;
  color: var(--cream);
}
.foot__brand p { line-height: 1.6; }

.foot__nav { display: flex; flex-direction: column; gap: .55rem; }
.foot__nav a {
  text-decoration: none; width: max-content;
  transition: color .2s var(--ease);
}
.foot__nav a:hover { color: var(--cream); }

.foot__legal { display: grid; gap: .5rem; line-height: 1.6; }
.foot__legal a { color: var(--euca-soft); text-underline-offset: 3px; transition: color .2s var(--ease); }
.foot__legal a:hover { color: var(--cream); }

.foot__base {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 239, 231, .12);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .8rem; color: rgba(244, 239, 231, .58);   /* 5,03:1 su --ink: sopra il minimo AA di 4,5 */
}
/* la firma dell'autore: il nome un gradino più chiaro della riga
   che lo contiene, così si legge senza rubare la scena al copyright */
.foot__autore strong { font-weight: 500; color: rgba(244, 239, 231, .82); }

/* ════════════════════════════════════════════════════════════
   10 · Evidenzia i segnaposto  →  aggiungi ?ph=1 all'indirizzo
   ════════════════════════════════════════════════════════════ */
html[data-ph="1"] [data-ph] {
  outline: 2px dashed var(--terra);
  outline-offset: 2px;
  background: rgba(180, 116, 74, .09);
  border-radius: 3px;
}
html[data-ph="1"] [data-ph]::after {
  content: attr(data-ph);
  display: inline-block; vertical-align: super;
  margin-left: .35em; padding: 1px 5px;
  font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--terra-deep); border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════
   11 · Aree di tocco ≥ 44px (WCAG 2.2 · Target Size)
   ════════════════════════════════════════════════════════════ */
.nav__brand { padding-block: .25rem; }

/* i link della barra passavano di poco sotto la misura: 42,8px → 44px */
.nav__link { display: inline-flex; align-items: center; min-height: 44px; }

.foot__nav a { padding-block: .6rem; padding-inline: .6rem; margin-inline: -.6rem; }
.foot__nav { gap: 0; margin-block: -.6rem; }

.foot__legal a,
.info a {
  display: inline-block;
  padding-block: .72rem;
  margin-block: -.72rem;
}


/* ── "Il mio modo di lavorare": testo a sinistra come tutto il resto,
      immagine a destra a riempire la colonna. Il vuoto asimmetrico
      sotto il titolo era la cosa che non funzionava. ──────────────── */
.metodo {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 1.75rem;
}
@media (min-width: 900px) {
  .metodo {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: stretch;
  }
}
.metodo__testo { display: grid; gap: 1.15rem; align-content: start; }
.metodo__testo h3 {
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  line-height: 1.2; margin-bottom: .55rem;
}
.metodo__testo p { max-width: 34rem; }

.metodo__foto { margin: 0; }
.metodo__foto picture { display: block; height: 100%; }
.metodo__foto img {
  width: 100%; height: 100%; min-height: 320px;
  object-fit: cover; object-position: center 50%;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

/* ── "Di cosa mi occupo": tre destinatari e aree di intervento ────── */

/* la citazione sul campo caldo non ha bisogno dei filetti */
.pull--campo { margin-block: clamp(2.5rem, 5vw, 4rem); }
.pull--campo::before { border: 0; }

.cards--tre { margin-top: 0; }
@media (min-width: 700px)  { .cards--tre { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cards--tre { grid-template-columns: repeat(3, 1fr); } }
.cards--tre .card { padding: 2rem 1.85rem 2.15rem; }
.cards--tre .card h3 { min-height: 0; }
.cards--tre .card p + p { margin-top: .85rem; }

/* le aree diventano un unico oggetto: un pannello con celle divise da
   filetti. Prima erano quattro colonne di testo appoggiate sul fondo,
   e accanto alle schede piene sembravano un appunto */
.aree {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
}
/* Era 25,6px: troppo vicino ai titoli delle schede (18,6px) per
   leggersi come apertura di un blocco nuovo, troppo lontano dall'h2
   della sezione (48px) per sembrare voluto. Portato al gradino che
   mancava alla scala — 48 → 32 → 18,6 — resta chiaramente sotto al
   titolo della sezione senza contendergli il posto. */
.aree__titolo {
  font-size: clamp(1.45rem, 1.15rem + 1.05vw, 2rem);
  line-height: 1.2;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.aree__lista {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
@media (min-width: 680px)  { .aree__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .aree__lista { grid-template-columns: repeat(4, 1fr); } }
.aree__lista li {
  background: #F8F5EF;
  padding: 1.7rem 1.5rem 1.85rem;
}
.aree__ico {
  display: block; color: var(--sage-deep);
  margin-bottom: 1rem;
}
.aree__ico svg { width: 22px; height: 22px; }
.aree__lista h4 {
  font-family: 'Lora', Georgia, serif; font-weight: 500;
  font-size: 1.04rem; line-height: 1.3; color: var(--ink);
  margin-bottom: .6rem;
  min-height: calc(2 * 1.3em);   /* due righe riservate: allinea i testi */
}
.aree__lista p { font-size: .92rem; line-height: 1.65; }

/* ── "Lo studio": due immagini di pari altezza, poi la nota personale ── */
.section--studio { background: var(--cream); }

.studio { display: grid; gap: 1.25rem; }
@media (min-width: 820px) {
  .studio {
    grid-template-columns: 1.55fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
  }
}
.studio__foto { margin: 0; }
.studio__foto picture { display: block; height: 100%; }
.studio__foto img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.studio__foto--larga img { min-height: 300px; object-position: center 58%; }
.studio__foto:not(.studio__foto--larga) img { min-height: 300px; object-position: center 74%; }
/* ── Sul telefono le due foto stanno affiancate ────────────────────
      Una sotto l'altra occupavano quasi due schermate prima di
      arrivare al testo. Accostate diventano una coppia sola.
      Il selettore e' doppio per battere il :not() qui sopra, che ha
      la stessa forza ma viene prima. ─────────────────────────────── */
@media (max-width: 819px) {
  .studio { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .studio .studio__foto img {
    aspect-ratio: 1 / 1;          /* quadrate: la prima e' orizzontale, la
                                     seconda verticale, e il quadrato e'
                                     l'unico taglio che non rovina nessuna */
    height: auto;
    min-height: 0;                /* i 300px servivano a colonna piena */
    border-radius: var(--r-md);   /* 28px su una piastrella stretta erano troppi */
  }
}

.studio__nota {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 44rem;
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
  line-height: 1.6; color: var(--ink);
}



/* WhatsApp: stesso pulsante, marchio nel verde dell'app */
.phone--wa .phone__ico { background: #1FA855; }
.phone--wa .phone__ico svg { width: 22px; height: 22px; }

/* ── i pulsanti di contatto stanno sulla stessa riga ─────────────── */
.azioni {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: 2rem;
}
.azioni .phone { margin-top: 0; }

/* ── Segreteria e linea diretta ──────────────────────────────────────
      Due blocchi, non una fila di tre bottoni: chi legge deve capire
      in un colpo d'occhio che il primo numero serve a prenotare e il
      secondo arriva a Majra. La spiegazione sta sotto ai pulsanti, non
      dentro, così il bersaglio da toccare resta grande e pulito.
      ──────────────────────────────────────────────────────────────── */
.canali { display: grid; gap: clamp(1.85rem, 3.5vw, 2.6rem); margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.canale__tag {
  font-family: 'Inter', sans-serif;
  font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--sage-deep);
}
.canale .azioni { margin-top: .9rem; }
.canale__nota {
  margin-top: .95rem; max-width: 34rem;
  font-size: .93rem; line-height: 1.62; color: var(--ink-soft);
}
.phone--wa .phone__num { font-size: 1.32rem; }

/* ════════════════════════════════════════════════════════════
   12 · Domande frequenti — un blocco che si apre su richiesta
   ════════════════════════════════════════════════════════════ */
/* Le domande vivono dentro «Contatti»: lo sfondo lo mette già la sezione,
   qui serve solo l'aria che le stacca dai recapiti. */
.faq-zona { margin-top: clamp(3rem, 6vw, 4.5rem); }
.faq {
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .55);
  overflow: hidden;
}
.faq__apri {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem clamp(1.25rem, 3vw, 1.9rem);
  cursor: pointer; list-style: none;
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  color: var(--ink);
  transition: background-color .25s var(--ease);
}
.faq__apri::-webkit-details-marker { display: none; }
.faq__apri::marker { content: ''; }
.faq__apri:hover { background: rgba(255, 255, 255, .8); }
.faq__piu { width: 22px; height: 22px; flex: none; color: var(--sage-deep); transition: transform .3s var(--ease); }
.faq[open] > .faq__apri { border-bottom: 1px solid var(--line-soft); }
.faq[open] > .faq__apri .faq__piu { transform: rotate(45deg); }

.faq__corpo { padding: .35rem clamp(1.25rem, 3vw, 1.9rem) 1rem; }

.faq__voce { border-bottom: 1px solid var(--line-soft); }
.faq__voce:last-child { border-bottom: 0; }
.faq__voce summary {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 500; color: var(--ink); line-height: 1.5;
  transition: color .2s var(--ease);
}
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__voce summary::marker { content: ''; }
.faq__voce summary::before {
  content: '+'; flex: none;
  width: 1.1em; font-family: 'Lora', Georgia, serif; font-size: 1.15em;
  line-height: 1.3; color: var(--sage-deep);
}
.faq__voce[open] summary::before { content: '–'; }
.faq__voce summary:hover { color: var(--sage-deep); }
.faq__voce p {
  margin: 0 0 1.15rem 1.95rem;
  font-size: .97rem; line-height: 1.7; max-width: 46rem;
}
@media (min-width: 900px) {
  .faq__voce summary { font-size: 1.05rem; }
}

/* ════════════════════════════════════════════════════════════
   13 · Pagina 404
        Vive da sola: nessun menu, nessuno script. Solo il modo
        di tornare indietro e il numero di telefono, perché chi
        arriva qui spesso stava cercando proprio quello.
   ════════════════════════════════════════════════════════════ */
.persa {
  min-height: 100svh;
  display: grid; place-items: center;
  background: var(--cream);
}
.persa__box {
  max-width: 34rem;
  padding-block: clamp(3rem, 10vw, 6rem);
  text-align: center;
}
.persa__mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto 2rem;
  border-radius: 15px;
  color: var(--euca-soft); background: var(--sage-deep);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.persa__mark:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.persa__mark svg { width: 27px; height: 27px; }

.persa .eyebrow { justify-content: center; }
.persa h1 {
  font-size: clamp(1.85rem, 1.15rem + 2.4vw, 2.9rem);
  margin-bottom: 1.15rem;
}
.persa__testo { color: var(--ink-soft); line-height: 1.75; margin-bottom: 2.25rem; }
.persa__azioni {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}


/* ════════════════════════════════════════════════════════════
   14 · Pagine di testo — note legali, privacy
        Come la 404: vivono da sole, senza menu e senza script.
        Una colonna stretta e nient'altro, perché qui si legge —
        non si naviga.
   ════════════════════════════════════════════════════════════ */
.doc { background: var(--cream); }
.doc__box {
  max-width: 44rem;
  padding-block: clamp(3rem, 9vw, 5.5rem) clamp(3rem, 7vw, 5rem);
}

/* stessa foglia della 404, stesso comportamento al passaggio del mouse */
.doc__mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 2.25rem;
  border-radius: 15px;
  color: var(--euca-soft); background: var(--sage-deep);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.doc__mark:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.doc__mark svg { width: 27px; height: 27px; }

.doc h1 {
  font-size: clamp(1.85rem, 1.15rem + 2.4vw, 2.9rem);
  margin-bottom: .6rem;
}
.doc__data {
  font-size: .85rem; letter-spacing: .04em; color: var(--sage-deep);
  margin-bottom: 2rem;
}
/* il cappello: dice a cosa serve la pagina prima che si cominci a leggerla */
.doc__occhiello {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.2rem);
  line-height: 1.65; color: var(--ink);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
}

.doc__sez { margin-top: clamp(2.25rem, 4.5vw, 3rem); }
.doc__sez h2 {
  font-family: 'Inter', sans-serif;
  font-size: .74rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: .9rem;
}
.doc__sez p {
  color: var(--ink-soft); line-height: 1.78;
  margin-bottom: .95rem;
}
.doc__sez p:last-child { margin-bottom: 0; }
.doc__sez strong { font-weight: 500; color: var(--ink); }
.doc__sez a {
  color: var(--terra-deep);
  text-underline-offset: 3px;
  display: inline-block; padding-block: .5rem; margin-block: -.5rem;   /* 44px netti: il minimo WCAG per un bersaglio */
  transition: color .2s var(--ease);
}
.doc__sez a:hover { color: var(--ink); }

/* i recapiti: una riga per riga, con l'aria che serve perche' due
   bersagli da 44px in verticale non si pestino i piedi */
.doc__recapiti {
  list-style: none; padding: 0; margin-top: .55rem;
  display: grid; gap: 1rem;
  color: var(--ink-soft);
}
.doc__recapiti a { padding-block: .5rem; margin-block: -.5rem; }

/* L'unica cosa in questa pagina che qualcuno potrebbe dover leggere di
   corsa. Il filetto rosso la rende trovabile scorrendo senza leggere. */
.doc__urgenza {
  margin-top: 1.4rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--terra);
  background: var(--cream-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* l'elenco dei fornitori: puntini di foglia, non pallini di sistema */
.doc__elenco { list-style: none; padding: 0; margin: 0 0 .95rem; display: grid; gap: .85rem; }
.doc__elenco li {
  position: relative; padding-left: 1.35rem;
  color: var(--ink-soft); line-height: 1.78;
}
.doc__elenco li::before {
  content: ''; position: absolute; left: .1rem; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--euca);
}
.doc__elenco strong { font-weight: 500; color: var(--ink); }

/* termini tecnici e indirizzi: si distinguono senza gridare */
.doc__cod { font-size: .93em; letter-spacing: .01em; color: var(--sage-deep); }

.doc__fine {
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: .75rem;
}