/* =====================================================================
   Emotional Dentistry — site.css
   Palette: turquoise family on warm ivory. Rounded, glass, generous space.
   Section banners divide the file — search "===" to jump.
   ===================================================================== */

/* ================= TOKENS ================= */
:root {
  /* Brand palette (from BRIEF §4) */
  --turq:        #3AB6C9;
  --turq-light:  #5AC8DC;
  --turq-deep:   #28AABE;
  --turq-ink:    #1F7E8C;

  --ivory:       #F7F3EB;   /* dominant background */
  --ivory-2:     #EFE9DC;   /* subtle contrast */
  --cream:       #FDFBF6;   /* card fill */
  --sand:        #C9A96A;   /* premium accent — use sparingly */

  --ink:         #1E2A2D;   /* long-form body */
  --ink-soft:    #5A5F62;
  --muted:       #989898;
  --line:        rgba(30, 42, 45, 0.10);
  --line-strong: rgba(30, 42, 45, 0.20);

  /* Effects */
  --glass-bg:      rgba(255, 255, 255, 0.55);
  --glass-bg-dark: rgba(255, 255, 255, 0.35);
  --glass-border:  rgba(255, 255, 255, 0.7);
  --shadow-sm:  0 1px 2px rgba(30, 42, 45, .06), 0 2px 6px rgba(30, 42, 45, .04);
  --shadow-md:  0 4px 12px rgba(30, 42, 45, .08), 0 12px 32px rgba(30, 42, 45, .06);
  --shadow-lg:  0 12px 32px rgba(30, 42, 45, .12), 0 32px 64px rgba(30, 42, 45, .10);
  --shadow-brand: 0 12px 40px rgba(58, 182, 201, .28);

  /* Rounded corners */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Type */
  --serif: 'Fraunces', 'Iowan Old Style', 'Georgia', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --easing: cubic-bezier(.2, .8, .2, 1);
  --dur: 320ms;

  --nav-h: 80px;
}

/* ================= RESET ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: var(--turq-ink); text-decoration: none; }
a:hover { color: var(--turq-deep); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.2rem, 4.4vw + .5rem, 4.4rem); font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 2.5vw + .6rem, 2.8rem); }
h3 { font-size: clamp(1.3rem, 1.2vw + .8rem, 1.7rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }

::selection { background: var(--turq); color: #fff; }

/* ================= LAYOUT ================= */
.container { width: min(1200px, 100% - 2.4rem); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - 2.4rem); margin-inline: auto; }

main { padding-top: var(--nav-h); }

/* Section rhythm — each section has full top padding + zero bottom padding, so
   adjacent sections don't double-pad. The very last section still needs air
   before the footer, and the footer itself adds margin-top. */
section { padding: clamp(2.5rem, 4vw, 4.5rem) 0 0; }
section:last-of-type { padding-bottom: clamp(2rem, 3vw, 3.5rem); }

.section__head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section__eyebrow {
  font: 500 .78rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turq-deep);
  margin-bottom: .8rem;
  display: inline-block;
}
.section__lede { font-size: 1.1rem; color: var(--ink-soft); }

/* Icon sizing (defined in helpers.php icon()) */
.ico { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform var(--dur) var(--easing),
              box-shadow var(--dur) var(--easing),
              background var(--dur) var(--easing);
  cursor: pointer;
  border: none;
  will-change: transform;
}
.btn--primary {
  background: linear-gradient(135deg, var(--turq) 0%, var(--turq-deep) 100%);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 46px rgba(58, 182, 201, .38);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
}
.btn--ghost:hover {
  background: var(--cream);
  border-color: var(--turq);
  color: var(--turq-ink);
  transform: translateY(-2px);
}
.btn--sm { padding: .65em 1.2em; font-size: .88rem; }

/* Glass secondary — the hero's second CTA. Frosted pill in the same glass as
   the eyebrow and the fact tags, with a turquoise halo that breathes out every
   few seconds (same gesture as the pins on the fact tags). The halo lives on
   ::after so hover can still change the button's own shadow. */
.btn--glass {
  position: relative; isolation: isolate;   /* keep the halo inside the button's own stacking context */
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn--glass::after {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  animation: btn-halo 4.5s ease-out 2s infinite;
}
.btn--glass:hover {
  background: #fff;
  color: var(--turq-ink);
  border-color: var(--turq);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
@keyframes btn-halo {
  0%        { box-shadow: 0 0 0 0 rgba(58, 182, 201, .45); }
  35%, 100% { box-shadow: 0 0 0 16px rgba(58, 182, 201, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn--glass::after { animation: none; } }

/* ================= NAV ================= */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  transition: background var(--dur) var(--easing),
              backdrop-filter var(--dur) var(--easing),
              box-shadow var(--dur) var(--easing);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.nav__brand { display: flex; align-items: center; text-decoration: none; }
/* --- Fluid compression ramp ------------------------------------------------
   Eight -- now seven -- nav voices in IT AND EN do not fit the 1200px-capped
   container at full size much below 1240px: the flex items shrink until labels
   wrap and the nav renders as two rows of buttons. Rather than dropping to a
   burger at the first sign of pressure, the nav gives space back gradually.
   Type alone is not enough -- it is only ~60% of the nav width, the rest being
   padding, gaps and the logo -- so all four ramp together from their original
   values at 1240px down to a minimum at 1024px, then hold flat until the burger
   takes over at 960px. 960 is the ORIGINAL burger breakpoint, restored: hiding
   the Team voice freed ~56px, which is what lets the nav span its whole intended
   range without wrapping. Measured EN slack (the binding case): 102px at 1024px,
   38px at 960px, 0px at 900px -- so 960 is the real floor, not a round number.
   Vertical padding is deliberately NOT on the ramp: link height and tap targets
   never shrink. `white-space: nowrap` is the guard -- past the ramp's budget the
   nav crowds rather than silently going two-row.
   EN is the binding language (longest labels); re-measure it if a voice is added
   back or a label is lengthened. */
.nav__logo {
  height: clamp(34px, 4.63vw - 13.41px, 44px);
  width: auto; max-width: 100%;
  display: block;
  transition: transform var(--dur) var(--easing);
}
.nav__brand:hover .nav__logo { transform: scale(1.02); }

.nav__menu {
  display: flex; align-items: center;
  gap: clamp(.2rem, 2.222vw - 19.56px, .5rem);
}
.nav__link {
  position: relative;
  padding: .55rem clamp(.5rem, 2.963vw - 22.34px, .9rem);
  white-space: nowrap;
  border-radius: var(--r-pill);
  font-size: clamp(.87rem, 0.4444vw + 9.37px, .93rem);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--easing), background var(--dur) var(--easing);
}
.nav__link:hover { background: rgba(58, 182, 201, .12); color: var(--turq-ink); }
.nav__link.is-active { color: var(--turq-deep); }
.nav__link.is-active::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 18px; height: 2px; border-radius: 2px;
  background: var(--turq);
  transform: translateX(-50%);
}
.nav__link--cta {
  background: var(--ink);
  color: var(--ivory) !important;
  padding: .6rem clamp(.75rem, 3.333vw - 22.13px, 1.2rem);
  margin-left: .4rem;
}
.nav__link--cta:hover {
  background: var(--turq-deep);
  color: #fff !important;
  transform: translateY(-1px);
}

/* Language switcher: minimal pill IT · EN, current lang highlighted */
.nav__lang {
  display: inline-flex; align-items: center;
  margin-left: .6rem;
  padding: .25rem .55rem;
  border-radius: var(--r-pill);
  background: rgba(30, 42, 45, 0.06);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.nav__lang-btn {
  color: var(--muted);
  text-decoration: none;
  padding: .1rem .3rem;
  border-radius: 4px;
  transition: color var(--dur) var(--easing);
}
.nav__lang-btn:hover { color: var(--ink); }
.nav__lang-btn.is-active { color: var(--turq-deep); }
.nav__lang-sep { color: rgba(30, 42, 45, 0.25); padding: 0 .1rem; }
@media (max-width: 960px) {
  .nav__lang { margin: 1rem auto 0; align-self: center; padding: .4rem .9rem; font-size: 1rem; }
}

/* Solid variants — inner pages OR scrolled state */
.nav--solid,
.nav.is-scrolled {
  background: rgba(247, 243, 235, 0.85);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

/* Burger — hidden on desktop */
.nav__burger { display: none; }

@media (max-width: 960px) {
  .nav__logo { height: 38px; }
  /* The button stays 44x44 — that is the minimum comfortable tap target, and it is
     the icon inside that needed fixing, not the button. It was `display: grid`
     with three implicit auto rows: `align-content` defaults to stretch, so the
     rows split the full 44px and each bar centred in its own ~14.7px band. The
     `margin: 4px 0` never had any effect, and the ±6px close transform was sized
     for a gap that was never there, so the X did not meet either.
     Flex + an explicit gap makes the spacing real; deriving the transform from the
     same two variables keeps the X exact if either is ever retuned. */
  .nav__burger {
    --bar-h: 2px;
    --bar-gap: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bar-gap);
    width: 44px; height: 44px;
    border: none; background: transparent; cursor: pointer;
    padding: 0;
  }
  .nav__burger span {
    display: block; width: 22px; height: var(--bar-h);
    background: var(--ink); border-radius: 2px;
    transition: transform var(--dur) var(--easing), opacity 180ms;
  }
  /* one bar + one gap is exactly the distance to the centre bar */
  .nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(calc(var(--bar-h) + var(--bar-gap))) rotate(45deg);
  }
  .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(calc(-1 * (var(--bar-h) + var(--bar-gap)))) rotate(-45deg);
  }

  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: 2rem 1.4rem;
    background: rgba(247, 243, 235, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 350ms var(--easing), opacity 260ms;
    overflow-y: auto;
    height: calc(100dvh - var(--nav-h));
  }
  body.nav-open .nav__menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .nav__link { font-size: 1.2rem; padding: 1rem 1.4rem; border-radius: var(--r-md); }
  .nav__link--cta { margin: 1rem 0 0; text-align: center; justify-content: center; }
  /* In the stacked menu the links are left-aligned rows: a centred underline sits under
     nothing. The active mark becomes a vertical bar before the label. */
  .nav__link.is-active::after {
    left: .45rem; top: 50%; bottom: auto;
    width: 3px; height: 1.3em;
    transform: translateY(-50%);
  }
  .nav__link--cta.is-active::after { display: none; }
}

/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: grid; align-items: center;
  padding: 5rem 0;   /* main already clears the fixed nav; equal air above and below */
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 15% 20%,  rgba(58, 182, 201, 0.28), transparent 55%),
    radial-gradient(circle at 85% 80%,  rgba(90, 200, 220, 0.20), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(201, 169, 106, 0.10), transparent 55%),
    var(--ivory);
}
.hero::after {
  /* Grain */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.16 0 0 0 0 0.18 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .35; pointer-events: none;
}
/* Two-column hero: intro (text + CTA) on the left, the "stage" on the right.
   The stage is an arch — the same doorway on Viale Trastevere since 1978 — with
   the portrait standing in it and the two facts pinned on like magazine call-outs. */
.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.hero__intro { min-width: 0; }

.hero__stage {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 520px;
  container-type: inline-size;   /* lets the ghost numeral size itself in cqw */
}
/* Everything inside the scene is sized in % of its width, so the whole
   composition scales as one object between breakpoints. */
.hero__scene {
  position: relative;
  aspect-ratio: 13 / 15;
}
.hero__year {
  /* Ghost numeral behind the arch — outlined, not filled, so it stays a texture */
  position: absolute; left: -6%; top: -2%; z-index: 0;
  font-family: var(--serif);
  font-size: clamp(6rem, 18cqw + 3rem, 10.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(40, 170, 190, .32);
  user-select: none;
  animation: hero-up 1.2s var(--easing) both .2s;
}
.hero__arch {
  position: absolute; left: 50%; bottom: 0; z-index: 1;
  width: 74%; height: 79%;
  translate: -50% 0;
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  background: linear-gradient(180deg, var(--turq-light) 0%, var(--turq) 55%, var(--turq-deep) 100%);
  box-shadow: var(--shadow-brand), inset 0 -40px 60px rgba(31, 126, 140, .25);
  transform-origin: 50% 100%;
  animation: hero-arch 1s var(--easing) both .1s;
}
.hero__arch::before {
  /* inner frame line, like a doorway's inner edge */
  content: ''; position: absolute; inset: 12px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: inherit;
}
.hero__arch::after {
  /* soft highlight so the arch reads as a volume, not a flat pill */
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 30% 10%, rgba(255,255,255,.35), transparent 55%);
}
.hero__portrait {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  width: 86%; height: auto;
  translate: -50% 0;
  filter: drop-shadow(0 18px 28px rgba(30, 42, 45, .22));
  /* Purely decorative: no pointer, no selection, no drag ghost — it should read as part of the background */
  pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  animation: hero-up 1.1s var(--easing) both .35s;
}

/* Facts — glass tags pinned to the scene */
.hero__fact {
  position: absolute; z-index: 3;
  width: min(220px, 50%);
  padding: .95rem 1.1rem 1rem;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.hero__fact::before {
  /* the pin */
  content: ''; position: absolute; top: 1.2rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--turq);
  box-shadow: 0 0 0 4px rgba(58, 182, 201, .25);
  animation: hero-pulse 2.6s ease-in-out infinite;
}
.hero__fact--years { left: -6%; top: 31%; animation: hero-up .8s var(--easing) both .9s, hero-float 6s ease-in-out 1.7s infinite alternate; }
.hero__fact--years::before { right: -5px; }
.hero__fact--team  { right: -3%; bottom: 7%; animation: hero-up .8s var(--easing) both 1.1s, hero-float 7s ease-in-out 2.2s infinite alternate-reverse; }
.hero__fact--team::before  { left: -5px; }

.hero__fact__num { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--turq-deep); }
.hero__fact__lbl { font-size: .8rem; line-height: 1.35; color: var(--ink-soft); margin-top: .3rem; }

/* 1978 ——●——— oggi */
.hero__timeline {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .75rem;
  font: 600 .66rem/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--turq-ink);
}
.hero__timeline i {
  flex: 1; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--turq), var(--sand));
  transform-origin: 0 50%;
  animation: hero-grow 1.3s var(--easing) both 1.4s;
}

/* overlapping faces = the team */
.hero__faces { display: flex; margin-bottom: .6rem; }
.hero__faces img {
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center 20%;
  border: 2px solid #fff; box-shadow: var(--shadow-sm);
}
.hero__faces img + img { margin-left: -9px; }

/* Entrance choreography — text first, then the arch, then the doctor, then the tags */
.hero__intro > * { animation: hero-up .8s var(--easing) both; }
.hero__intro > :nth-child(1) { animation-delay: .05s; }
.hero__intro > :nth-child(2) { animation-delay: .15s; }
.hero__intro > :nth-child(3) { animation-delay: .25s; }
.hero__intro > :nth-child(4) { animation-delay: .35s; }

@keyframes hero-up    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-arch  { from { opacity: 0; transform: scaleY(.82); } to { opacity: 1; transform: none; } }
@keyframes hero-grow  { from { transform: scaleX(0); } to { transform: none; } }
@keyframes hero-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes hero-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(58, 182, 201, .25); } 50% { box-shadow: 0 0 0 8px rgba(58, 182, 201, .10); } }

@media (max-width: 900px) {
  .hero { min-height: 0; padding-bottom: 3.5rem; }
  .hero__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__stage { justify-self: center; max-width: 440px; }
  .hero__year { display: none; }
}
@media (max-width: 560px) {
  /* Tags leave the scene and sit in a row underneath it */
  .hero__stage { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
  .hero__scene { grid-column: 1 / -1; max-width: 300px; margin-inline: auto; width: 100%; }
  .hero__fact { position: static; width: auto; animation: hero-up .8s var(--easing) both .7s; }
  .hero__fact::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__intro > *, .hero__year, .hero__arch, .hero__portrait, .hero__fact,
  .hero__fact::before, .hero__timeline i { animation: none; }
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45em 1em;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  font-size: .82rem;
  font-weight: 500;
  color: var(--turq-deep);
  letter-spacing: .06em;
  margin-bottom: 1.6rem;
}
.hero__eyebrow .ico { color: var(--turq); }
.hero h1 { max-width: 22ch; margin-bottom: 1.2rem; }
.hero__lede {
  max-width: 55ch;
  font-size: clamp(1.05rem, .3vw + 1rem, 1.25rem);
  color: var(--ink-soft);
  margin-bottom: 2.2rem;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ================= GLASS CARD (reusable) ================= */
.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  transition: transform var(--dur) var(--easing),
              box-shadow var(--dur) var(--easing),
              border-color var(--dur) var(--easing);
  position: relative;
  overflow: hidden;
}
.card--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--glass-border);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(58, 182, 201, .35);
}

/* ================= TERAPIE GRID + CARDS ================= */
.terapie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  --tg-gap: 1.6rem;
  gap: var(--tg-gap);
}
/* Force 3 cols on wider screens so cards can breathe with photo on top */
@media (min-width: 900px) {
  .terapie-grid { grid-template-columns: repeat(3, 1fr); }
}

.terapia-card {
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  position: relative;
  transition: transform var(--dur) var(--easing),
              box-shadow var(--dur) var(--easing),
              border-color var(--dur) var(--easing);
}
.terapia-card:hover {
  transform: translateY(-6px);
  border-color: rgba(58, 182, 201, .5);
  box-shadow: var(--shadow-lg);
}
/* Turquoise glow scoped to the body area — does not tint the media image */
.terapia-card__body::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 100% 0%, rgba(58, 182, 201, .22), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur) var(--easing);
  pointer-events: none;
}
.terapia-card:hover .terapia-card__body::before { opacity: 1; }

/* Media (image at top) */
.terapia-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(58,182,201,.14), rgba(90,200,220,.06));
}
.terapia-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--easing);
}
.terapia-card:hover .terapia-card__media img { transform: scale(1.05); }

/* Fallback when the terapia has no /assets/images/terapie/{slug}.webp yet */
.terapia-card__media--fallback {
  display: grid; place-items: center;
  color: var(--turq-deep);
}
.terapia-card__media--fallback .ico {
  width: 64px; height: 64px;
  opacity: .5;
  stroke-width: 1.4;
  transition: transform var(--dur) var(--easing), opacity var(--dur) var(--easing);
}
.terapia-card:hover .terapia-card__media--fallback .ico { transform: scale(1.08) rotate(-4deg); opacity: .75; }

/* Body (text at bottom) */
.terapia-card__body {
  padding: 1.4rem 1.6rem 1.6rem;
  display: flex; flex-direction: column;
  flex-grow: 1;
  position: relative;
  z-index: 3;
}
.terapia-card__body h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.terapia-card__tagline { color: var(--ink-soft); font-size: .95rem; flex-grow: 1; margin: 0 0 1rem; line-height: 1.5; }
.terapia-card__cta {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; color: var(--turq-deep);
  transition: gap var(--dur) var(--easing);
}
.terapia-card__cta .ico { transition: transform var(--dur) var(--easing); }
.terapia-card:hover .terapia-card__cta { gap: .8em; }
.terapia-card:hover .terapia-card__cta .ico { transform: translateX(4px); }

/* ============ EXPANDING TERAPIA CARDS (hub grid only) ============
   On hover a card unfurls sideways into the neighbouring cell and reveals its
   "Cosa facciamo" list in two columns. The grid NEVER reflows: the card keeps its
   cell, and two absolutely-positioned layers do the work —

     .terapia-card__sheet   the visual box (fill/border/radius/shadow) — grows in width
     .terapia-card__panel   the list — sits at final width, un-clips via clip-path

   Both use the same duration/easing, so the sheet's growing edge and the panel's
   un-clipping edge travel together and read as one widening card.
   Cards in the last column (3n) mirror: they unfurl to the LEFT.

   THE OVERLAP RULE — both layers are permanently `pointer-events: none`, so the
   pointer is only ever resolved against the *grid cells*, never against whatever
   is currently painted on top of them. Sweeping onto a covered neighbour hands the
   expansion straight over: one motion, no dead zone, and no ambiguity about which
   card a click belongs to. The row reads like a filmstrip. The cost is that the
   cursor cannot park inside the open panel — it does not need to, since the panel
   holds no controls and the card's own cell stays clickable throughout. */

.terapia-card__sheet,
.terapia-card__panel { display: none; }

/* 1210px is set by the panel, not by the nav. (The nav used to wrap below ~1210px
   in EN, which is what this threshold originally tracked; the fluid ramp in the
   NAV section now keeps it on one row down to 1024px, so the two are independent.)
   What binds here is the two-column list: the panel is one grid column wide, and
   below ~1210px the longest lists no longer fit its height at a legible type size.
   Measured headroom on the tightest card (Implantologia, 10 items): 114px at
   1210px, 51px at 1150px, negative by 920px. Lower this only alongside a
   re-measure. */
@media (hover: hover) and (min-width: 1210px) {

  /* --- the sheet takes over the card's chrome --------------------------- */
  .terapia-card--expandable {
    background: transparent;
    border-color: transparent;
    overflow: visible;          /* let the panel escape the cell */
    isolation: isolate;
  }
  .terapia-card--expandable:is(:hover, :focus-visible) {
    box-shadow: none;
    border-color: transparent;
  }

  .terapia-card__sheet {
    display: block;
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;       /* see THE OVERLAP RULE */
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: width        var(--tg-in) var(--easing) var(--tg-delay),
                box-shadow   var(--dur) var(--easing),
                border-color var(--dur) var(--easing);
  }
  .terapia-card--expandable > .terapia-card__media,
  .terapia-card--expandable > .terapia-card__body { position: relative; z-index: 2; }

  /* The media clips itself now that the card no longer does. The 1px margin is
     load-bearing: the sheet carries the card border, and a full-bleed image would
     paint straight over it — leaving the hairline visible alongside the body but
     missing alongside the photo, which reads as a seam across the card. */
  .terapia-card--expandable .terapia-card__media {
    margin: 1px 1px 0;
    border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
    overflow: hidden;
    transition: border-radius var(--dur) var(--easing);
  }

  /* --- timings: deliberate opening, snappy close ------------------------
     The open delay is what keeps a fast sweep across the row from strobing:
     cells the pointer only passes through never get far enough to draw. */
  .terapia-card--expandable { --tg-in: 260ms; --tg-delay: 0ms; }
  .terapie-grid--expand .terapia-card--expandable:is(:hover, :focus-visible) {
    --tg-in: 560ms; --tg-delay: 130ms;
  }

  /* --- spotlight: the rest of the grid steps back (tone only, no scale —
         a size change on every neighbour reads as the grid twitching) -----
     --tg-tone is deliberately NOT --easing: cubic-bezier(.2,.8,.2,1) is heavily
     front-loaded, so most of an opacity change lands in the first ~90ms and the
     fade reads as a snap. A symmetric curve, a longer duration, and the same
     130ms beat the card waits before opening make the dimming part of one
     gesture rather than a separate flick. Restoring skips the delay so letting
     go of the grid feels immediate. */
  .terapie-grid--expand { --tg-tone: cubic-bezier(.33, 0, .3, 1); }
  .terapie-grid--expand .terapia-card {
    transition: transform var(--dur) var(--easing),
                opacity 320ms var(--tg-tone),
                filter  320ms var(--tg-tone);
  }
  .terapie-grid--expand:has(.terapia-card--expandable:is(:hover, :focus-visible))
  .terapia-card:not(:is(:hover, :focus-visible)) {
    opacity: .34;
    filter: saturate(.5);
    transition: opacity 480ms var(--tg-tone) 130ms,
                filter  480ms var(--tg-tone) 130ms;
  }
  /* No lift. The card is already announcing itself by growing sideways; adding a
     translateY on top gives two competing motions from one gesture. The shadow
     below still does the elevation work -- it is what separates the open card
     from the dimmed neighbours it is covering. */
  .terapie-grid--expand .terapia-card--expandable:is(:hover, :focus-visible) {
    z-index: 20;
    transform: none;
  }
  .terapie-grid--expand .terapia-card--expandable:is(:hover, :focus-visible) .terapia-card__sheet {
    width: calc(200% + var(--tg-gap));
    box-shadow: var(--shadow-lg);
    border-color: rgba(58, 182, 201, .45);
  }

  /* the old body-scoped glow would stop at the original card width and draw a
     seam down the middle of the expanded box — move it onto the sheet instead */
  .terapia-card--expandable .terapia-card__body::before { display: none; }
  .terapia-card__sheet::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 100% 0%, rgba(58, 182, 201, .13), transparent 46%);
    opacity: 0;
    transition: opacity var(--dur) var(--easing);
    pointer-events: none;
  }
  .terapia-card--expandable:is(:hover, :focus-visible) .terapia-card__sheet::after { opacity: 1; }

  /* --- the image dissolves into the card fill instead of ending on an edge */
  .terapia-card--expandable .terapia-card__media::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 38%;
    background: linear-gradient(to right,
                rgba(253, 251, 246, 0) 0%,
                rgba(253, 251, 246, .45) 52%,
                var(--cream) 95%);
    opacity: 0;
    transition: opacity var(--tg-in) var(--easing) var(--tg-delay);
    pointer-events: none;
    z-index: 1;
  }
  .terapia-card--expandable:is(:hover, :focus-visible) .terapia-card__media::after { opacity: 1; }
  /* ...and downward, so it dissolves on both open edges rather than sitting in a box */
  .terapia-card--expandable .terapia-card__media::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    background: linear-gradient(to bottom, rgba(253, 251, 246, 0), var(--cream) 94%);
    opacity: 0;
    transition: opacity var(--tg-in) var(--easing) var(--tg-delay);
    pointer-events: none;
    z-index: 1;
  }
  .terapia-card--expandable:is(:hover, :focus-visible) .terapia-card__media::before { opacity: 1; }

  /* No photo zoom while the card is open. The card is already growing sideways;
     a second scale on the image underneath reads as two motions competing, and
     the zoom pushes pixels straight into the feathered edge that is supposed to
     be dissolving. Cards below the breakpoint keep the zoom -- there it is the
     only hover feedback they have. */
  .terapie-grid--expand .terapia-card--expandable:is(:hover, :focus-visible) .terapia-card__media img {
    transform: none;
  }

  /* square off the corner the sheet now continues past */
  .terapia-card--expandable:is(:hover, :focus-visible) .terapia-card__media { border-top-right-radius: 0; }

  /* --- the panel -------------------------------------------------------- */
  .terapia-card__panel {
    display: flex;
    position: absolute;
    top: 0; bottom: 0;
    left: 100%;
    width: calc(100% + var(--tg-gap));
    z-index: 2;
    align-items: center;
    padding: 1.15rem 1.6rem 1.15rem .6rem;
    pointer-events: none;       /* see THE OVERLAP RULE */
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--tg-in) var(--easing) var(--tg-delay);
  }
  .terapia-card--expandable:is(:hover, :focus-visible) .terapia-card__panel {
    clip-path: inset(0 0 0 0);
  }

  /* Seam softener. The photo is opaque, so it blocks the sheet's turquoise glow —
     which leaves a hard edge exactly where the photo ends and the panel begins.
     Below the photo the glow runs on uninterrupted beneath the title and
     description, which is why the seam only ever reads in the upper half of the
     open card. This cream bloom is anchored on the panel's inner edge and centred
     on the photo's band, so it cancels the tint right where the two meet and has
     faded out by the time it reaches the text below. */
  .terapia-card__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(78% 60% at 0% 30%,
                var(--cream) 0%,
                rgba(253, 251, 246, .58) 44%,
                rgba(253, 251, 246, 0) 82%);
    opacity: 0;
    transition: opacity var(--tg-in) var(--easing) var(--tg-delay);
    pointer-events: none;
  }
  .terapia-card--expandable:is(:hover, :focus-visible) .terapia-card__panel::before { opacity: 1; }

  /* Hard guard: the list is a teaser, the detail page holds the authoritative
     version. Clipping here keeps a future `trattamenti` edit from spilling text
     outside the card. At 1210px (the narrowest width this effect runs at) the
     longest current list uses ~85% of the available height.
     position/z-index keep the text above the seam bloom. */
  .terapia-card__panel-in {
    position: relative; z-index: 1;
    width: 100%; max-height: 100%; overflow: hidden;
  }

  .terapia-card__panel-h {
    display: block;
    font-family: var(--serif);
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--turq-ink);
    margin-bottom: .85rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 220ms var(--easing), transform 220ms var(--easing);
  }
  .terapia-card--expandable:is(:hover, :focus-visible) .terapia-card__panel-h {
    opacity: 1; transform: none;
    transition-delay: calc(var(--tg-delay) + 180ms);
  }

  .terapia-card__list {
    list-style: none;
    margin: 0; padding: 0;
    columns: 2;
    column-gap: .9rem;
  }
  .terapia-card__list li {
    break-inside: avoid;
    position: relative;
    padding-left: .95rem;
    margin-bottom: .45rem;
    /* sized for legibility over density — these are clinical terms an older
       patient has to actually read, not a decorative label */
    font-size: clamp(.94rem, 0.32vw + 0.7rem, 1.05rem);
    line-height: 1.45;
    color: var(--ink-soft);
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 260ms var(--easing), transform 260ms var(--easing);
  }
  .terapia-card__list li::before {
    content: '';
    position: absolute;
    left: 0; top: .48em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--turq);
  }
  .terapia-card--expandable:is(:hover, :focus-visible) .terapia-card__list li {
    opacity: 1; transform: none;
    /* ladder: each item lands a beat after the one before it */
    transition-delay: calc(var(--tg-delay) + 230ms + var(--i) * 38ms);
  }

  /* --- last column mirrors: unfurl to the LEFT -------------------------- */
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n) .terapia-card__sheet {
    left: auto; right: 0;
  }
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n) .terapia-card__sheet::after {
    background: radial-gradient(circle at 0% 0%, rgba(58, 182, 201, .13), transparent 46%);
  }
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n) .terapia-card__panel::before {
    background: radial-gradient(78% 60% at 100% 30%,
                var(--cream) 0%,
                rgba(253, 251, 246, .58) 44%,
                rgba(253, 251, 246, 0) 82%);
  }
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n) .terapia-card__panel {
    left: auto; right: 100%;
    clip-path: inset(0 0 0 100%);
    padding: 1.15rem .6rem 1.15rem 1.6rem;
  }
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n):is(:hover, :focus-visible) .terapia-card__panel {
    clip-path: inset(0 0 0 0);
  }
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n) .terapia-card__media::after {
    inset: 0 auto 0 0;
    background: linear-gradient(to left,
                rgba(253, 251, 246, 0) 0%,
                rgba(253, 251, 246, .55) 46%,
                var(--cream) 92%);
  }
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n):is(:hover, :focus-visible) .terapia-card__media {
    border-top-right-radius: calc(var(--r-lg) - 1px);
    border-top-left-radius: 0;
  }
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n) .terapia-card__panel-h,
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n) .terapia-card__list li {
    transform: translateX(12px);
  }
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n):is(:hover, :focus-visible) .terapia-card__panel-h,
  .terapie-grid--expand .terapia-card--expandable:nth-child(3n):is(:hover, :focus-visible) .terapia-card__list li {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terapia-card__sheet,
  .terapia-card__panel,
  .terapia-card__panel::before,
  .terapia-card__panel-h,
  .terapia-card__list li,
  .terapia-card__media::after,
  .terapia-card__media::before { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* ================= TERAPIE INDEX (home) =================
   The home's areas of care as an editorial index beside a stage, instead of the
   card grid (which /terapie still uses). Left: numbered serif rows under an ink
   rule — the ledger's grammar at display size. Right: a wave-cut frame holding the
   photo of the active row, with its tagline and "Cosa facciamo" list.
   site.js ([data-ix]) moves .is-active on hover/focus; the last row touched
   stays active, so the stage never goes empty. Rows recede by tone, never size.
   Below 1000px the stage is gone and each row carries its own thumb + tagline. */
.ix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  --ix-tone: cubic-bezier(.33, 0, .3, 1);
}
.ix__list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.ix__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding: .9rem .5rem .9rem .2rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: padding-left var(--dur) var(--easing), opacity 320ms var(--ix-tone), color var(--dur) var(--easing);
}
.ix__row::after {
  /* turquoise underline that draws itself on the active row */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: linear-gradient(90deg, var(--turq), var(--turq-light));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 520ms var(--easing);
}
.ix__n {
  font-family: var(--serif); font-size: 1rem; line-height: 1;
  color: var(--turq); font-variant-numeric: tabular-nums;
}
.ix__name {
  display: block;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 1.2vw + .95rem, 1.95rem);
  line-height: 1.15; letter-spacing: -.01em;
}
.ix__arrow { color: var(--turq); opacity: 0; transform: translateX(-8px); transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing); }
.ix__arrow .ico { width: 1.15rem; height: 1.15rem; }
.ix__thumb, .ix__tag { display: none; }   /* mobile only — on desktop the stage shows them */

.ix__row.is-active { padding-left: .9rem; color: var(--turq-ink); }
.ix__row.is-active::after { transform: none; }
.ix__row.is-active .ix__arrow { opacity: 1; transform: none; }
.ix__row:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) {
  .ix__list:hover .ix__row:not(.is-active) { opacity: .42; }
}

/* --- the stage: every pane sits in the same grid cell and cross-fades --- */
.ix__stage { display: grid; }
.ix__pane {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--ix-tone), visibility 0s linear 320ms;
}
.ix__pane.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 520ms var(--ix-tone) 60ms, visibility 0s;
}
/* The frame is a WAVE, not the arch — the arch belongs to the hero and to the
   treatment pages; repeating it here was one time too many. The photo's bottom
   edge is cut by a wave mask, and two turquoise layers with the same cut (one
   mirrored) slide out underneath it, so the edge reads as water, not a crop. */
.ix__plate {
  position: relative; isolation: isolate;
  aspect-ratio: 10 / 9;
  margin-bottom: 26px;                       /* room for the wave layers below */
  filter: drop-shadow(0 14px 22px rgba(30, 42, 45, .14));
  --ix-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V90C86 99 72 84 56 89S26 100 0 91Z'/%3E%3C/svg%3E");
}
.ix__plate img,
.ix__plate::before,
.ix__plate::after,
.ix__plate--empty {
  -webkit-mask: var(--ix-wave) center / 100% 100% no-repeat;
          mask: var(--ix-wave) center / 100% 100% no-repeat;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.ix__plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.ix__plate::before,
.ix__plate::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transition: transform 900ms var(--easing);
}
.ix__plate::before { background: linear-gradient(180deg, var(--turq-light), var(--turq)); opacity: .55; transform: scaleX(-1); }
.ix__plate::after  { background: var(--turq-deep); opacity: .22; }
.ix__pane.is-active .ix__plate::before { transform: translateY(12px) scaleX(-1); transition-delay: 120ms; }
.ix__pane.is-active .ix__plate::after  { transform: translateY(24px); transition-delay: 200ms; }
.ix__plate--empty {
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--turq-light) 0%, var(--turq) 55%, var(--turq-deep) 100%);
}
.ix__plate--empty .ico { width: 88px; height: 88px; opacity: .85; }

.ix__pane-tag {
  font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; line-height: 1.35; color: var(--turq-ink);
  margin: 1.3rem 0 1rem;
}
.ix__pane-h {
  display: flex; align-items: center; gap: .7rem;
  font: 500 .72rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--turq-deep);
  margin-bottom: .8rem;
}
.ix__pane-h::before { content: ''; width: 1.8rem; height: 1px; background: var(--sand); }
.ix__pane-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.2rem; }
.ix__pane-list li {
  break-inside: avoid;
  position: relative; padding-left: .9rem; margin-bottom: .4rem;
  font-size: .9rem; line-height: 1.4; color: var(--ink-soft);
  opacity: 0; transform: translateY(6px);
  transition: opacity 200ms var(--easing), transform 200ms var(--easing);
}
.ix__pane-list li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--turq);
}
.ix__pane.is-active .ix__pane-list li {
  opacity: 1; transform: none;
  transition: opacity 320ms var(--easing), transform 320ms var(--easing);
  transition-delay: calc(180ms + var(--i) * 32ms);   /* ladder, as on the hub cards */
}

@media (max-width: 999px) {
  .ix { grid-template-columns: 1fr; }
  .ix__stage { display: none; }
  .ix__row { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; padding: .8rem .2rem; }
  .ix__row.is-active { padding-left: .2rem; color: var(--ink); }
  .ix__row.is-active::after { transform: scaleX(0); }
  .ix__n { display: none; }
  .ix__thumb {
    display: grid; place-items: center;
    width: 64px; height: 64px; overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--turq-light), var(--turq-deep));
    color: #fff;
  }
  .ix__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .ix__name { font-size: 1.25rem; }
  .ix__tag { display: block; font-size: .88rem; line-height: 1.4; color: var(--ink-soft); margin-top: .15rem; }
  .ix__arrow, .ix__row.is-active .ix__arrow { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ix__row, .ix__row::after, .ix__pane, .ix__pane.is-active, .ix__plate::before, .ix__plate::after,
  .ix__pane-list li, .ix__pane.is-active .ix__pane-list li { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* ================= TEAM CARDS ================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.6rem;
}
.team-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.team-card__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(58, 182, 201, .1), rgba(90, 200, 220, .05));
  position: relative;
}
.team-card__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  transition: transform 600ms var(--easing);
}
.team-card__photo--empty {
  display: grid; place-items: center;
  color: var(--turq);
}
.team-card__photo--empty .ico { width: 64px; height: 64px; opacity: .35; }
.team-card:hover .team-card__photo img { transform: scale(1.06); }

.team-card__body { padding: 1.4rem 1.6rem 1.8rem; }
.team-card__name { font-size: 1.15rem; margin-bottom: .2rem; }
.team-card__role { font-size: .78rem; color: var(--turq-deep); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .8rem; }
.team-card__bio { font-size: .93rem; color: var(--ink-soft); line-height: 1.55; }

/* ================= MANIFESTO (home) =================
   A full-bleed ink band — the one dark pause on an ivory page. The quote
   reveals word by word as it scrolls in (site.js splits it into .w spans),
   and the key phrase gets a turquoise highlight sweep once the words land. */
.manifesto {
  /* flush against the hero — and rising into it as a wave: the band overlaps the
     hero by --wave-h and its top edge is cut by a wave mask, so the hero (not flat
     ivory) shows through, and the band's own glow + grain run right up the crest. */
  --wave-h: clamp(44px, 7vw, 104px);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C240 112 480 2 760 42S1240 102 1440 30V100H0Z'/%3E%3C/svg%3E");
  padding: 0;
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--wave-h));
}
.manifesto::before {
  /* a second, turquoise crest just behind the ink one (mirrored, a little higher) */
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: var(--wave-h);
  background: linear-gradient(180deg, var(--turq-light), var(--turq));
  opacity: .5;
  transform: scaleX(-1);
  -webkit-mask: var(--wave) center / 100% 100% no-repeat;
          mask: var(--wave) center / 100% 100% no-repeat;
  pointer-events: none;
}
.manifesto__band {
  -webkit-mask: var(--wave) top / 100% var(--wave-h) no-repeat,
                linear-gradient(#000, #000) bottom / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
          mask: var(--wave) top / 100% var(--wave-h) no-repeat,
                linear-gradient(#000, #000) bottom / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
}
.manifesto__inner { padding-top: var(--wave-h); }
.hero { padding-bottom: calc(5rem + clamp(44px, 7vw, 104px)); }   /* keep the stage clear of the wave */
.manifesto__band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink);
  color: #EDE7DA;
  padding: clamp(4rem, 7vw, 6.5rem) 0;
}
.manifesto__band::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse at 88% 0%,   rgba(58, 182, 201, .28), transparent 55%),
    radial-gradient(ellipse at 0% 100%,  rgba(201, 169, 106, .14), transparent 50%);
}
.manifesto__band::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .5;
}
.manifesto__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1.2rem, 4vw, 3.5rem);
  align-items: start;
}
.manifesto__inner::before {
  /* the big opening quote mark, in its own column */
  content: '“';
  grid-row: 1 / span 3;
  font-family: var(--serif);
  font-size: clamp(6rem, 14vw, 13rem);
  font-weight: 500;
  line-height: .72;
  color: var(--turq);
  margin-top: -.02em;
}
.manifesto__eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font: 500 .78rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--turq-light);
  margin-bottom: 1.4rem;
}
.manifesto__eyebrow::before { content: ''; width: 2.2rem; height: 1px; background: var(--sand); }

.manifesto__quote {
  margin: 0 0 2.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.65rem, 3.1vw, 3rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  max-width: 26ch;
  color: #F7F3EB;
}
.manifesto__quote .w {
  display: inline-block;
  opacity: .14;
  transform: translateY(.22em);
  transition: opacity .55s var(--easing), transform .55s var(--easing);
  transition-delay: calc(var(--i, 0) * 42ms);
}
.manifesto__quote.is-visible .w { opacity: 1; transform: none; }

.manifesto__quote mark {
  color: inherit;
  background: none;
  padding: 0 .12em; margin: 0 -.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(100deg, rgba(58, 182, 201, .62), rgba(90, 200, 220, .40));
  background-repeat: no-repeat;
  background-size: 100% 42%;
  background-position: 0 92%;
  border-radius: 3px;
}
/* With JS the sweep is animated: hidden until the words have landed */
.manifesto__quote.has-words mark { background-size: 0% 42%; transition: background-size 1.1s var(--easing) calc(var(--i, 0) * 42ms + .35s); }
.manifesto__quote.has-words.is-visible mark { background-size: 100% 42%; }

.manifesto__by { display: flex; align-items: center; gap: 1rem; }
.manifesto__avatar {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: center 20%;
  border: 2px solid var(--turq);
  outline: 4px solid rgba(58, 182, 201, .18);
}
.manifesto__by cite { display: block; font-style: normal; font-weight: 600; color: #fff; }
.manifesto__by span { font-size: .8rem; letter-spacing: .04em; color: rgba(237, 231, 218, .62); }

@media (max-width: 640px) {
  .manifesto__inner { grid-template-columns: 1fr; }
  .manifesto__inner::before { grid-row: auto; font-size: 5rem; line-height: .6; margin-bottom: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .manifesto__quote .w { opacity: 1; transform: none; transition: none; }
  .manifesto__quote.has-words mark { background-size: 100% 42%; transition: none; }
}

/* ================= PRIMA-VISITA CTA STRIP ================= */
.pv-strip {
  padding: 3.5rem 2.5rem;
  background: linear-gradient(135deg, var(--turq) 0%, var(--turq-deep) 100%);
  border-radius: var(--r-xl);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  box-shadow: var(--shadow-brand);
  position: relative; overflow: hidden;
}
.pv-strip::before {
  content: ''; position: absolute; top: -50%; right: -20%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);
  pointer-events: none;
}
.pv-strip h3 { color: #fff; margin-bottom: .4rem; font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
.pv-strip p { color: rgba(255,255,255,.9); margin: 0; max-width: 52ch; }
.pv-strip .btn--primary {
  background: #fff; color: var(--turq-deep);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.pv-strip .btn--primary:hover { background: var(--ivory); color: var(--turq-deep); }
@media (max-width: 720px) { .pv-strip { grid-template-columns: 1fr; text-align: center; } }

/* Wave lines: one tileable SVG (240px period, five strokes fading upward) repeated
   along the bottom and drifting slowly sideways; a mask fades it out toward the
   top-left so it never sits behind the text. */
.pv-strip { isolation: isolate; padding: clamp(2.4rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); }
.pv-strip::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 85%; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M0 30Q60 10 120 30T240 30' opacity='.12'/%3E%3Cpath d='M0 58Q60 34 120 58T240 58' opacity='.2'/%3E%3Cpath d='M0 86Q60 60 120 86T240 86' opacity='.3'/%3E%3Cpath d='M0 114Q60 88 120 114T240 114' opacity='.42'/%3E%3Cpath d='M0 140Q60 116 120 140T240 140' opacity='.55'/%3E%3C/svg%3E") repeat-x left bottom / 240px 150px;
  -webkit-mask: linear-gradient(to top left, #000 0%, rgba(0,0,0,.55) 35%, transparent 70%);
          mask: linear-gradient(to top left, #000 0%, rgba(0,0,0,.55) 35%, transparent 70%);
  animation: pv-drift 16s linear infinite;
  pointer-events: none;
}
@keyframes pv-drift { to { background-position-x: 240px; } }
.pv-strip::before { z-index: -1; }

.pv-strip__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 500 .74rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  margin-bottom: .9rem;
}
.pv-strip__eyebrow::before { content: ''; width: 2rem; height: 1px; background: rgba(255, 255, 255, .7); }
.pv-strip__points {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.pv-strip__points li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem .4rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .86rem; font-weight: 500; color: #fff;
}
.pv-strip .btn .ico { transition: transform var(--dur) var(--easing); }
.pv-strip .btn:hover .ico { transform: translateX(4px); }
@media (max-width: 720px) {
  .pv-strip__eyebrow, .pv-strip__points { justify-content: center; }
  .pv-strip .btn { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .pv-strip::after { animation: none; } }

/* ================= CONTACT FORM SECTION =================
   partials/contact-form.php — intro + quick channels on the left, the form on a cream
   panel on the right. Flat like the rest of the kit: the panel is the only box. */
.cf { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.cf__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cf__intro h2 { max-width: 16ch; text-wrap: balance; }
.cf__lede { color: var(--ink-soft); font-size: 1.08rem; max-width: 40ch; margin-bottom: 1.8rem; }
.cf__quick { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.cf__quick li { border-bottom: 1px solid var(--line); }
.cf__quick a, .cf__quick-row { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; color: var(--ink); }
.cf__quick a > span:last-child, .cf__quick-row > span:last-child { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; transition: color var(--dur) var(--easing); }
.cf__quick a:hover > span:last-child { color: var(--turq-ink); }
.cf__quick small { display: block; font: 600 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--turq-deep); margin-bottom: .3rem; }

.cf__panel {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.4rem, 3.2vw, 2.6rem);
  box-shadow: var(--shadow-md);
}
.cf__form { display: grid; gap: 1.1rem; }
.cf__row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; }
.cf__field { display: block; min-width: 0; }
.cf__field > span { display: block; font: 600 .8rem/1.2 var(--sans); letter-spacing: .02em; color: var(--ink); margin-bottom: .45rem; }
.cf__field i, .cf__check i { font-style: normal; color: var(--turq-deep); }
.cf__field input, .cf__field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding: .8rem .95rem;
  transition: border-color var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}
.cf__field textarea { resize: vertical; min-height: 8.5rem; line-height: 1.55; }
.cf__field input:focus, .cf__field textarea:focus { outline: none; border-color: var(--turq); box-shadow: 0 0 0 4px rgba(58, 182, 201, .18); }
.cf__hint { display: block; margin-top: .4rem; font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }
.cf__check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.cf__check input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--turq-deep); }
.cf__check a { color: var(--turq-ink); text-decoration: underline; text-underline-offset: 3px; }
/* the sum and its explanation share a row; the submit button gets the next one to itself */
.cf__captcha { display: flex; align-items: flex-end; gap: 1rem; }
.cf__field--captcha { flex: none; }
.cf__field--captcha input { width: 6.5rem; }
.cf__captcha .cf__hint { margin: 0 0 .55rem; max-width: 34ch; }
.cf__submit { justify-self: start; padding: 1em 1.5rem; }

.cf__err { margin-bottom: 1.2rem; padding: .9rem 1.1rem; border-left: 3px solid #B4442F; background: rgba(180, 68, 47, .08); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .92rem; color: #7A2A1B; }
.cf__err ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.cf__ok { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 1rem; }
.cf__ok-ico { width: 60px; height: 60px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--turq), var(--turq-deep)); color: #fff; box-shadow: var(--shadow-brand); }
.cf__ok-ico .ico { width: 28px; height: 28px; }
.cf__ok h3 { margin-bottom: .5rem; }
.cf__ok p { color: var(--ink-soft); margin: 0; }

/* honeypots: off-screen, NOT display:none (some form-fillers skip display:none) */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) { .cf__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cf__row { grid-template-columns: 1fr; } .cf__submit { justify-self: stretch; justify-content: center; } }

/* privacy policy dialog: bottom sheet on a phone, centred panel from 760px */
.pdialog {
  width: min(760px, 100%); max-width: 100%; max-height: min(86vh, 900px);
  margin: auto auto 0; padding: 0; border: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--cream); color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.pdialog[open] { display: flex; flex-direction: column; }
.pdialog::backdrop { background: rgba(30, 42, 45, .55); backdrop-filter: blur(3px); }
.pdialog__head, .pdialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; flex: none; }
.pdialog__head { border-bottom: 1px solid var(--line); }
.pdialog__head h2 { margin: 0; font-size: 1.3rem; }
.pdialog__foot { border-top: 1px solid var(--line); }
.pdialog__close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.pdialog__close:hover { background: var(--ivory-2); }
.pdialog__close .ico { width: 20px; height: 20px; }
.pdialog__body { overflow-y: auto; padding: 1.2rem 1.4rem; overscroll-behavior: contain; }
.pdialog__body h2 { font-size: 1.15rem; margin-top: 1.6rem; }
@media (min-width: 760px) { .pdialog { margin: auto; border-radius: var(--r-lg); } }
/* ================= COOKIE BANNER =================
   On every page until the visitor chooses. Two buttons of the same size and weight:
   the moment "Continua senza" looks smaller or paler than "Accetta", the consent is no
   longer freely given. Above the mobile booking dock (z 90). */
.consent {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 120;
  translate: -50% 0;
  width: min(760px, 100% - 1.6rem);
  display: flex; align-items: center; gap: 1rem 1.4rem;
  padding: 1rem 1.2rem;
  background: rgba(253, 251, 246, .92);
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: hero-up .5s var(--easing) both;
}
.consent[hidden] { display: none; }
.consent__txt { margin: 0; flex: 1; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.consent__txt a { color: var(--turq-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.consent__btns { display: flex; gap: .6rem; flex: none; }
.consent__btn {
  min-width: 9.5rem; padding: .8em 1.1em;
  border-radius: var(--r-pill); border: 1.5px solid var(--ink);
  font: 600 .92rem/1 var(--sans); cursor: pointer;
  transition: background var(--dur) var(--easing), color var(--dur) var(--easing), border-color var(--dur) var(--easing);
}
.consent__btn--no  { background: transparent; color: var(--ink); }
.consent__btn--no:hover  { background: var(--ink); color: #fff; }
.consent__btn--yes { background: var(--turq-ink); border-color: var(--turq-ink); color: #fff; }
.consent__btn--yes:hover { background: var(--ink); border-color: var(--ink); }
.consent__btn:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; }
@media (max-width: 640px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent__btns { display: grid; grid-template-columns: 1fr 1fr; }
  .consent__btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }

/* the remembered accept inside the map box, and the footer control */
.map-gate__always {
  background: transparent; border: 0; padding: .2rem .4rem; cursor: pointer;
  font: 600 .86rem/1.3 var(--sans); color: var(--turq-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.map-gate__always:hover { color: var(--ink); }
.foot__linkbtn {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: rgba(255, 255, 255, .85); text-align: left;
}
.foot__linkbtn:hover { color: var(--turq-light); }
.prose [data-consent-state] { font-weight: 600; color: var(--ink); }
/* ================= FOOTER ================= */
.foot {
  background: var(--ink);
  color: #DDD8CC;
  padding: 4rem 0 0;
  margin-top: 4rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
  gap: 3rem 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }

.foot__col--brand {
  max-width: 340px;
  text-align: center;
  justify-self: center;
}
.foot__brand { display: inline-block; margin-bottom: .8rem; }
.foot__logo {
  width: 180px; height: auto; max-width: 100%;
  display: block; margin: 0 auto;
  transition: transform var(--dur) var(--easing);
}
.foot__brand:hover .foot__logo { transform: scale(1.02); }
.foot__sub { font-size: .85rem; color: rgba(255,255,255,.6); margin: 0 0 1rem; }
.foot__manifesto { font-family: var(--serif); font-style: italic; color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.55; margin-top: 0; text-align: left; }

.foot__h { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: #fff; margin-bottom: 1.2rem; letter-spacing: .01em; }
.foot__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; font-size: .93rem; }
.foot__list li { display: flex; align-items: flex-start; gap: .6rem; color: rgba(255,255,255,.72); }
.foot__list .ico { color: var(--turq-light); margin-top: .25em; flex-shrink: 0; }
.foot__list a { color: rgba(255,255,255,.85); }
.foot__list a:hover { color: var(--turq-light); }
.foot__muted { color: rgba(255,255,255,.5); font-size: .85rem; }

.foot__social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.foot__social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  transition: background var(--dur) var(--easing), color var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.foot__social a:hover { background: var(--turq-deep); color: #fff; transform: translateY(-2px); }
.foot__social .ico { width: 20px; height: 20px; }

.foot__bar { padding: 1.6rem 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; font-size: .82rem; color: rgba(255,255,255,.45); }
.foot__legal em { font-style: normal; color: rgba(255,255,255,.35); }

/* ================= UTILITIES ================= */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }

.badge {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .35em .8em;
  background: rgba(58, 182, 201, .12);
  color: var(--turq-deep);
  border-radius: var(--r-pill);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.divider {
  height: 1px; background: var(--line); margin: 3rem 0; border: 0;
}

/* ================= PAGE HERO (chi-siamo, dove-siamo, etc.) ================= */
.page-hero { padding: 3rem 0 2rem; }
.page-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.page-hero__text h1 { margin-bottom: 1rem; }
.page-hero__lede {
  font-size: clamp(1.05rem, .3vw + 1rem, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
/* CTA under the lede -- currently only /chi-siamo uses it (entry point for the
   Team page now that Team is not in the nav). */
.page-hero__cta { margin-top: 1.6rem; }

.page-hero__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
  background: var(--cream);
}
.page-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 900px) {
  .page-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .page-hero__media { aspect-ratio: 16/10; }
}

/* Prose defaults for text-heavy pages */
.prose h2 { margin-top: 2.4rem; margin-bottom: .8rem; font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: 1.5rem; }
.prose h3 { margin-top: 1.8rem; margin-bottom: .5rem; font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: 1.2rem; }
.prose p  { color: var(--ink-soft); margin-bottom: 1.1rem; line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1.2rem; color: var(--ink-soft); }
.prose ul li { margin-bottom: .5rem; }
.prose blockquote {
  margin: 2rem 0; padding: 1.2rem 1.6rem;
  border-left: 3px solid var(--turq); background: var(--cream);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--serif); font-style: italic; color: var(--ink);
}
.prose a { color: var(--turq-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose .table-wrap { overflow-x: auto; margin-bottom: 1.4rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; border-top: 1.5px solid var(--ink); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.prose th { font-weight: 600; color: var(--ink); }
.prose .draft-note { padding: .9rem 1.1rem; border-left: 3px solid var(--sand); background: rgba(201, 169, 106, .12); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); }
.prose mark { background: rgba(201, 169, 106, .35); padding: 0 .2em; border-radius: 3px; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.prose .signoff {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
}
.prose .signoff strong { font-style: normal; display: block; margin-top: .3rem; color: var(--turq-deep); font-family: var(--sans); font-weight: 600; font-style: normal; }

/* Value cards used on chi-siamo — grid of 6 */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.value-card {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem 1.6rem;
  transition: transform var(--dur) var(--easing),
              box-shadow var(--dur) var(--easing),
              border-color var(--dur) var(--easing);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(58,182,201,.35); }

/* Big watermark number in bottom-right — sits behind the text.
   Positive inset from the rounded corner (28px border-radius) so the number
   never gets clipped by the curve. */
.value-card__num {
  position: absolute;
  right: 0.9rem;
  bottom: 0.4rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 6rem;
  line-height: 0.85;
  color: rgba(58, 182, 201, .13);
  letter-spacing: -0.04em;
  pointer-events: none;
  transition: color var(--dur) var(--easing), transform var(--dur) var(--easing);
  transform-origin: bottom right;
  z-index: 0;
}
.value-card:hover .value-card__num {
  color: rgba(58, 182, 201, .22);
  transform: scale(1.05);
}
.value-card h3,
.value-card p { position: relative; z-index: 1; }
.value-card h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.value-card p  { font-size: .93rem; color: var(--ink-soft); margin: 0; line-height: 1.55; max-width: 32ch; }

/* --- Home "Dove siamo" contact preview grid --- */
.home-dove__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.home-dove__map {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-md);
}
@media (max-width: 720px) {
  .home-dove__grid { grid-template-columns: 1fr; gap: 2rem; }
  .home-dove__map { aspect-ratio: 16/10; }
}

/* ================= WORDMARK (nav + footer) =================
   Text brand, replacing the temporary logo image: "EMOTIONAL DENTISTRY" set in
   spaced Fraunces capitals, "Ivano Conti" in italic underneath after a sand
   hairline. Sized in em, so each context only sets a font-size. */
.wordmark { display: inline-flex; flex-direction: column; gap: .28em; line-height: 1; white-space: nowrap; }
.wordmark__main {
  font-family: var(--serif); font-weight: 600;
  font-size: 1em; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
}
.wordmark__sub {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.12em; letter-spacing: .01em;
  color: var(--turq-ink);
}
.wordmark__sub::before { content: ''; width: 1.6em; height: 1px; background: var(--sand); }
/* Nav: on the same compression ramp as the links (was the logo's height ramp):
   13.5px at >=1240px down to 11px at 1024px, so the brand never out-grows the
   slot the logo image used to occupy. */
.nav .wordmark { font-size: clamp(11px, 1.157vw - .85px, 13.5px); transition: opacity var(--dur) var(--easing); }
.nav__brand:hover .wordmark { opacity: .8; }
@media (max-width: 960px) { .nav .wordmark { font-size: 13px; } }
.foot .wordmark { font-size: 1.05rem; align-items: center; gap: .45em; }
.foot .wordmark__main { color: #fff; }
.foot .wordmark__sub { color: var(--turq-light); }
.foot .wordmark__sub::after { content: ''; width: 1.6em; height: 1px; background: var(--sand); }

/* ================= HOME: DOVE SIAMO =================
   Cream panel: address + three "how to get here" rows + actions on the left,
   the map on the right with the opening hours pinned on it as a glass tag (the
   hero's fact-tag recipe). Turquoise wave lines drift along the bottom-left. */
.hd {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  padding: clamp(1.6rem, 4vw, 3.5rem);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.hd::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 60%; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150' fill='none' stroke='%233AB6C9' stroke-width='1.5'%3E%3Cpath d='M0 30Q60 10 120 30T240 30' opacity='.12'/%3E%3Cpath d='M0 58Q60 34 120 58T240 58' opacity='.2'/%3E%3Cpath d='M0 86Q60 60 120 86T240 86' opacity='.3'/%3E%3Cpath d='M0 114Q60 88 120 114T240 114' opacity='.42'/%3E%3Cpath d='M0 140Q60 116 120 140T240 140' opacity='.55'/%3E%3C/svg%3E") repeat-x left bottom / 240px 150px;
  -webkit-mask: linear-gradient(to top right, rgba(0,0,0,.7) 0%, transparent 55%);
          mask: linear-gradient(to top right, rgba(0,0,0,.7) 0%, transparent 55%);
  animation: pv-drift 22s linear infinite;
  pointer-events: none;
}
.hd__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 500 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--turq-deep); margin-bottom: 1rem;
}
.hd__eyebrow::before { content: ''; width: 2.2rem; height: 1px; background: var(--sand); }
.hd__h { max-width: 16ch; margin-bottom: .8rem; }
.hd__addr { display: flex; align-items: baseline; gap: .5rem; font-size: 1.05rem; margin: 0 0 1.6rem; }
.hd__addr .ico { color: var(--turq); flex: none; position: relative; top: .12em; }

.hd__ways { list-style: none; margin: 0 0 1.8rem; padding: 0; border-top: 1.5px solid var(--ink); }
.hd__way {
  display: grid; grid-template-columns: 40px 6.5rem minmax(0, 1fr); align-items: center; gap: .9rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.hd__way__ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(58, 182, 201, .12);
}
.hd__way__ico img { width: 24px; height: 24px; }
.hd__way__label { font-family: var(--serif); font-size: 1.1rem; }
.hd__way__detail { font-size: .92rem; color: var(--ink-soft); line-height: 1.35; }
.hd__ctas { display: flex; flex-wrap: wrap; gap: .6rem; }

.hd__mapwrap { position: relative; }
.hd__map {
  aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  background: var(--ivory-2);
}
.hd__map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* map gate: what sits in the frame until the visitor asks for the Google map */
.map-gate {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 1.5rem; text-align: center;
  background:
    repeating-radial-gradient(circle at 50% 42%, transparent 0 38px, rgba(58, 182, 201, .16) 38px 39.5px),
    linear-gradient(160deg, rgba(58, 182, 201, .10), rgba(201, 169, 106, .10));
}
.map-gate__ico {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cream); color: var(--turq-deep); box-shadow: var(--shadow-md);
}
.map-gate__ico .ico { width: 24px; height: 24px; }
.map-gate__txt { margin: 0; max-width: 34ch; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
.map-gate__txt a { color: var(--turq-ink); text-decoration: underline; text-underline-offset: 3px; }
.hd__hours {
  position: absolute; left: -1.2rem; bottom: 1.4rem;
  max-width: min(260px, 80%);
  padding: .8rem 1rem;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  pointer-events: none;                       /* never blocks the map underneath */
}
.hd__hours::before {
  content: ''; position: absolute; right: -5px; top: 1rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--turq);
  box-shadow: 0 0 0 4px rgba(58, 182, 201, .25);
  animation: hero-pulse 2.6s ease-in-out infinite;
}
.hd__hours__lbl { display: block; font: 600 .66rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--turq-ink); margin-bottom: .35rem; }
.hd__hours__val { display: block; font-size: .88rem; line-height: 1.35; color: var(--ink); }

@media (max-width: 860px) {
  .hd { grid-template-columns: 1fr; }
  .hd__map { aspect-ratio: 16 / 11; }
  .hd__hours { position: static; max-width: none; margin-top: .8rem; pointer-events: auto; }
  .hd__hours::before { display: none; }
  .hd__way { grid-template-columns: 40px minmax(0, 1fr); }
  .hd__way__detail { grid-column: 2; margin-top: -.6rem; }
}
@media (prefers-reduced-motion: reduce) { .hd::after, .hd__hours::before { animation: none; } }

/* ================= FLAT PAGE KIT (contatti, dove-siamo, home storia) =================
   A small shared vocabulary so inner pages stop being stacks of cards:
     .kicker   eyebrow with the sand hairline
     .ph       page hero: ivory wash + drifting wave lines, left-aligned text
     .band     full-bleed sand band with wave-cut top and bottom edges (the
               "contrast" section: home storia, dove-siamo quartiere)
     .split    sticky section head on the left, content on the right
     .rows     flat hairline rows under an ink rule (the ledger grammar)
   The pv-strip stays the one card on these pages. */
.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 500 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--turq-deep); margin-bottom: 1rem;
}
.kicker::before { content: ''; width: 2.2rem; height: 1px; background: var(--sand); }

/* --- page hero --- */
.ph {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
}
.ph::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(58, 182, 201, .24), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(201, 169, 106, .10), transparent 50%);
}
.ph::after {
  /* Ripples, not waves: thin concentric rings spreading from the top-right corner,
     breathing slowly. The page heroes' own signature — the wave lines stay with
     the prima-visita strip and the home. */
  content: ''; position: absolute; top: 0; right: 0; z-index: -1;
  width: min(900px, 90vw); aspect-ratio: 1;
  background: repeating-radial-gradient(circle at 100% 0%, transparent 0 62px, rgba(58, 182, 201, .30) 62px 63.5px);
  -webkit-mask: radial-gradient(circle at 100% 0%, #000 0%, rgba(0,0,0,.5) 35%, transparent 68%);
          mask: radial-gradient(circle at 100% 0%, #000 0%, rgba(0,0,0,.5) 35%, transparent 68%);
  transform-origin: 100% 0%;
  animation: ph-ripple 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ph-ripple { from { transform: scale(1); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }
.ph__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.ph__text > * { animation: hero-up .8s var(--easing) both; }
.ph__text > :nth-child(2) { animation-delay: .1s; }
.ph__text > :nth-child(3) { animation-delay: .2s; }
.ph__text > :nth-child(4) { animation-delay: .3s; }
.ph__text > :nth-child(5) { animation-delay: .4s; }
.ph h1 { font-size: clamp(2.2rem, 3.4vw + 1rem, 4rem); line-height: 1.06; max-width: 18ch; text-wrap: balance; margin-bottom: 1rem; }
.ph__lede { font-size: clamp(1.05rem, .3vw + 1rem, 1.2rem); color: var(--ink-soft); max-width: 52ch; margin: 0 0 1.8rem; }
.ph__addr { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--turq-ink); margin: 0 0 1rem; }
.ph__ctas { display: flex; flex-wrap: wrap; gap: .7rem; }
.ph--solo h1 { max-width: 22ch; }

/* --- contrast band --- */
.band {
  --band-w: clamp(28px, 4.5vw, 64px);
  position: relative; isolation: isolate;
  margin-top: clamp(2.5rem, 4vw, 4.5rem);
  padding: calc(var(--band-w) + clamp(2.5rem, 5vw, 4.5rem)) 0 !important;
  background: linear-gradient(180deg, #EEE4CF 0%, #E8DCC3 100%);   /* sand only: a turquoise glow over sand turns green */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C240 112 480 2 760 42S1240 102 1440 30V100H0Z'/%3E%3C/svg%3E") top / 100% var(--band-w) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V42C1240 102 960 2 680 52S200 108 0 46Z'/%3E%3C/svg%3E") bottom / 100% var(--band-w) no-repeat,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--band-w) + 2px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C240 112 480 2 760 42S1240 102 1440 30V100H0Z'/%3E%3C/svg%3E") top / 100% var(--band-w) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V42C1240 102 960 2 680 52S200 108 0 46Z'/%3E%3C/svg%3E") bottom / 100% var(--band-w) no-repeat,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--band-w) + 2px) no-repeat;
}
.band .kicker { color: var(--turq-ink); }
.band .kicker::before { background: var(--ink); opacity: .45; }
.band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.band__grid h2 { margin: 0; max-width: 18ch; text-wrap: balance; }
.band__body p { color: #4A4A45; font-size: 1.05rem; line-height: 1.7; }
.band__body p:last-of-type { margin-bottom: 0; }
.band__body .btn { margin-top: 1.6rem; }
.band .btn--ghost { border-color: rgba(30, 42, 45, .35); }
.band__ghost {
  /* outlined year behind the text — the hero's ghost numeral, in ink */
  position: absolute; right: 2%; bottom: calc(var(--band-w) - .12em); z-index: -1;
  font-family: var(--serif); font-weight: 500; line-height: .8; letter-spacing: -.05em;
  font-size: clamp(7rem, 20vw, 17rem);
  color: transparent; -webkit-text-stroke: 1px rgba(30, 42, 45, .13);
  user-select: none; pointer-events: none;
}

/* --- split + rows --- */
.split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split__head { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.split__head h2 { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.3rem); margin-bottom: .8rem; }
.split__head p { color: var(--ink-soft); margin: 0; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.rows__row {
  display: grid; grid-template-columns: 44px 9rem minmax(0, 1fr); gap: 1.2rem;
  align-items: start;
  padding: 1.4rem 0; border-bottom: 1px solid var(--line);
}
.rows__ico {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(58, 182, 201, .12); color: var(--turq-deep);
}
.rows__ico img { width: 26px; height: 26px; }
.rows__ico .ico { width: 20px; height: 20px; }
.rows__label { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; margin: .55rem 0 0; }
.rows__body { min-width: 0; padding-top: .5rem; }
.rows__body p { margin: 0 0 .6rem; color: var(--ink-soft); line-height: 1.65; }
.rows__body p:last-child { margin-bottom: 0; }
.rows__big { display: block; font-family: var(--serif); font-size: clamp(1.25rem, 1vw + 1rem, 1.7rem); line-height: 1.25; color: var(--ink); }
a.rows__big { transition: color var(--dur) var(--easing); }
a.rows__big:hover { color: var(--turq-ink); }
.rows__note { font-size: .92rem; color: var(--ink-soft); margin-top: .3rem; }
.rows--plain .rows__row { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
.rows--plain h3 { margin: 0 0 .4rem; font-size: 1.3rem; }
.tlink { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--turq-deep); transition: gap var(--dur) var(--easing); }
.tlink:hover { gap: .75em; color: var(--turq-ink); }

/* contatti: rows | sticky map */
.ct { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
/* the map scrolls with the page (was sticky) */
.ct__map .hd__map { aspect-ratio: 1 / 1; }

@media (max-width: 900px) {
  .ph__grid, .band__grid, .split, .ct { grid-template-columns: 1fr; }
  .split__head, .ct__map { position: static; }
  .ct__map .hd__map { aspect-ratio: 16 / 11; }
  .rows__row { grid-template-columns: 44px minmax(0, 1fr); }
  .rows__body { grid-column: 2; padding-top: 0; margin-top: -.6rem; }
  .rows--plain .rows__body { grid-column: 1; margin-top: 0; }
  .band__ghost { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) { .ph::after, .ph__text > * { animation: none; } }

/* ================= CHI SIAMO =================
   templates/chi-siamo.php re-arranges the admin HTML into split sections, a
   quote band and flat values. Everything here is scoped under .about / .about__*
   so .prose, .values-grid and .value-card keep their look on other pages. */
.about__media { position: relative; }
.about__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}
.about__fact {
  position: absolute; left: -1.2rem; bottom: 1.6rem;
  padding: .9rem 1.1rem;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.about__fact__num { display: block; font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--turq-deep); }
.about__fact__lbl { display: block; font-size: .8rem; line-height: 1.35; color: var(--ink-soft); margin-top: .3rem; }

.about .split__head h2 { margin: 0; text-wrap: balance; }
.about .split__head h2::before { content: ''; display: block; width: 2.2rem; height: 1px; background: var(--sand); margin-bottom: 1rem; }
.about__prose { max-width: 66ch; }
.about__prose > :first-child { margin-top: 0; }
.about__prose p { font-size: 1.05rem; }
.about__wide-h { max-width: 22ch; margin-bottom: 1.6rem; }
.about__wide-h::before { content: ''; display: block; width: 2.2rem; height: 1px; background: var(--sand); margin-bottom: 1rem; }
.about .about__prose:has(.values-grid) { max-width: none; }

/* values: flat numbered items on a hairline grid instead of cards */
.about .values-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.6rem;
  margin: 0; border-top: 1.5px solid var(--ink);
}
.about .value-card,
.about .value-card:hover {
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  box-shadow: none; transform: none; overflow: visible;
  padding: 1.5rem 0 1.6rem;
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .6rem; align-content: start;
}
.about .value-card__num,
.about .value-card:hover .value-card__num {
  position: static; grid-row: 1 / span 2;
  width: auto; height: auto; background: none; border: 0; transform: none; opacity: 1;
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; font-weight: 400;
  color: var(--turq); -webkit-text-stroke: 0;
}
.about .value-card__num::before { content: '0'; }
.about .value-card h3 { font-size: 1.2rem; margin: 0 0 .4rem; }
.about .value-card p { max-width: none; font-size: .95rem; }

/* the quote band */
.about__band { text-align: center; }
.about__quote {
  margin: 0 auto; max-width: 30ch;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.4rem); line-height: 1.3; color: var(--ink);
}
.about__quote::before { content: '“'; display: block; font-size: 4rem; line-height: .5; color: var(--turq-deep); margin-bottom: .6rem; font-style: normal; }
.about__cite { display: block; margin-top: 1.4rem; font: 600 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--turq-ink); }

.about__signoff { text-align: center; }
.about__signoff .signoff {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.4vw, 1.6rem); color: var(--ink);
}
.about__signoff .signoff::before { content: ''; display: block; width: 2.2rem; height: 1px; background: var(--sand); margin: 0 auto 1.4rem; }
.about__signoff .signoff strong { display: block; margin-top: .6rem; font: 600 .82rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--turq-deep); }

@media (max-width: 900px) {
  .about .values-grid { grid-template-columns: 1fr 1fr; }
  .about__fact { left: .8rem; bottom: .8rem; }
}
@media (max-width: 560px) { .about .values-grid { grid-template-columns: 1fr; } }

/* ================= TEAM PAGE =================
   Flat: a lead feature, then a card-less portrait grid. No boxes — the photo is
   the only shape; members without one get a monogram tile. The old .team-grid /
   .team-card rules above are untouched. */
.tm-lead {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.tm-lead__photo, .tm__photo {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(58, 182, 201, .18), rgba(201, 169, 106, .14));
}
.tm-lead__photo { box-shadow: var(--shadow-lg); }
.tm-lead__photo img, .tm__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block;
  transition: transform 700ms var(--easing);
}
.tm-lead__name { font-size: clamp(2rem, 2.4vw + 1rem, 3.2rem); margin: 0 0 .5rem; }
.tm-lead__bio { font-size: 1.1rem; color: var(--ink-soft); max-width: 58ch; margin: 1rem 0 0; }
.tm-lead__quote {
  margin: 1.8rem 0 0; padding-left: 1.2rem;
  border-left: 2px solid var(--turq);
  font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: var(--ink);
  max-width: 44ch;
}
.tm__role {
  font: 600 .74rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--turq-deep); margin: 0;
}

.tm__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .9rem; margin-bottom: 2.2rem;
  border-bottom: 1.5px solid var(--ink);
}
.tm__head h2 { margin: 0; font-size: clamp(1.6rem, 1.6vw + 1rem, 2.3rem); }
.tm__count { font: 600 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--turq-deep); white-space: nowrap; }

.tm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.6rem 1.8rem; }
.tm__photo { margin-bottom: 1rem; }
.tm__item:hover .tm__photo img { transform: scale(1.04); }
.tm__name { font-size: 1.2rem; margin: 0 0 .3rem; }
.tm__bio { font-size: .92rem; line-height: 1.55; color: var(--ink-soft); margin: .6rem 0 0; }
/* monogram for members without a photo: initials, not a placeholder icon */
.tm__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: .04em;
  color: var(--turq-ink); opacity: .55;
}
.tm__mono::after {
  content: ''; position: absolute; inset: 12px;
  border: 1px solid rgba(31, 126, 140, .22); border-radius: calc(var(--r-lg) - 8px);
}
@media (hover: hover) {
  /* siblings recede by tone, never by size */
  .tm__item { transition: opacity 320ms cubic-bezier(.33, 0, .3, 1); }
  .tm:hover .tm__item:not(:hover) { opacity: .55; }
}

@media (max-width: 1000px) { .tm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tm-lead { grid-template-columns: 1fr; }
  .tm-lead__photo { max-width: 320px; }
  .tm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
}
@media (max-width: 420px) { .tm__bio { display: none; } }

/* ================= TERAPIA HERO (single page mini-hero) ================= */
/* Treatment names run long -- "Prevenzione — Smile Collection�" is the worst
   case -- and the global h1 cap of 4.4rem breaks them onto a second line. Lower
   cap only; the 2.2rem floor and the 4.4vw slope are untouched, so nothing below
   ~1055px viewport changes. Scoped to this page: other h1s keep the full scale. */
.terapia-title { font-size: clamp(2.2rem, 4.4vw + .5rem, 3.4rem); }

/* --- Single terapia: article + aside ---------------------------------------
   These replaced an inline <style> block in terapia.php that reached for the
   grid via `div[style*="grid-template-columns"]`. Real classes so the mobile
   layout can be changed without matching on an inline style string. */
.terapia-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3rem;
  align-items: start;
}
.terapia-aside { position: sticky; top: calc(var(--nav-h) + 1rem); }

@media (max-width: 900px) {
  /* Sticky has nothing to stick to in a single column — the aside simply becomes
     the tail of the page, after the article and before the "Prima visita" strip. */
  .terapia-layout { grid-template-columns: 1fr; gap: 2.4rem; }
  .terapia-aside  { position: static; }
  /* The booking card is redundant on mobile -- the sticky dock is already making
     that offer, permanently and in a bigger tap target. What is worth keeping down
     here is the "Altre terapie" list. */
  .terapia-aside__cta { display: none; }
}

/* --- Mobile sticky booking dock --------------------------------------------
   Desktop keeps the sidebar CTA in view at all times; mobile loses it the moment
   the aside scrolls off, so the dock carries it instead. It collapses again once
   the aside arrives, because that card makes the same offer — two identical CTAs
   on screen at once reads as nagging. State is driven from site.js.
   `visibility` is transitioned with a delay so the bar animates out and only then
   leaves the tab order; without it the link stays focusable while invisible. */
.pv-dock { display: none; }

@media (max-width: 900px) {
  .pv-dock {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: .7rem 1.2rem;
    padding-bottom: max(.7rem, env(safe-area-inset-bottom));
    background: rgba(247, 243, 235, .88);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    box-shadow: 0 -1px 0 var(--line), 0 -8px 28px rgba(30, 42, 45, .10);
    transform: translateY(115%);
    opacity: 0;
    visibility: hidden;
    transition: transform 340ms var(--easing),
                opacity 240ms var(--easing),
                visibility 0s linear 340ms;
  }
  .pv-dock.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 340ms var(--easing),
                opacity 240ms var(--easing),
                visibility 0s;
  }
  .pv-dock__btn {
    width: 100%;
    justify-content: center;
    padding: .85em 1.4em;
  }
  /* the dock must never cover the burger overlay */
  body.nav-open .pv-dock { visibility: hidden; transform: translateY(115%); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-dock { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

.terapia-hero {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* Rounded on top only — the hero sits directly above the h1 and body copy, so
     squaring the bottom lets it read as the head of one column of content
     rather than a detached floating tile. */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, rgba(58,182,201,.14), rgba(90,200,220,.06));
  margin-bottom: 0;
}
.terapia-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--easing);
}
.terapia-hero:hover img { transform: scale(1.02); }

/* "Cosa facciamo" checklist — fixed icon size, resistant to flex-shrink squeeze */
.cf-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem 1.2rem;
}
/* Collapse to a single column only on genuinely narrow screens */
@media (max-width: 500px) {
  .cf-list { grid-template-columns: 1fr; }
}
.cf-list__item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .95rem;
  line-height: 1.4;
}
.cf-list__ico {
  flex: 0 0 18px;      /* never shrink — the previous span could get squeezed by long text */
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--turq-deep);
  margin-top: .15em;
}
/* Force check icon to exact size, overriding the base `.ico { width: 1em }` */
.cf-list__ico .ico { width: 18px !important; height: 18px !important; }
.cf-list__text { min-width: 0; }

/* ================= TERAPIA: TREATMENT LEDGER =================
   "Cosa facciamo" on the single terapia page. A rule, the count, numbered
   hairline rows in two columns — a treatment menu, not a checklist card.
   Additive: the old .cf-list card styles above are untouched, so reverting is
   restoring the template from _dev/backups/. */
.tx { margin-top: 2.8rem; }
.tx__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1.5px solid var(--ink);
}
.tx__h { margin: 0; font-size: clamp(1.4rem, 1.5vw + .8rem, 1.9rem); }
.tx__count {
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--turq-deep);
  white-space: nowrap;
}
.tx__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.4rem;
}
.tx__item {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur) var(--easing);
}
.tx__item:hover { padding-left: .4rem; }
.tx__n {
  font-family: var(--serif);
  font-size: 1.05rem; line-height: 1;
  color: var(--turq);
  min-width: 1.6em;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--easing);
}
.tx__item:hover .tx__n { color: var(--turq-ink); }
.tx__name { font-weight: 500; font-size: .98rem; line-height: 1.35; min-width: 0; }
@media (max-width: 560px) { .tx__list { grid-template-columns: 1fr; } }


/* ================= SIDEBAR LIST (used on terapia single) ================= */
.side-list { margin-top: 1.4rem; }
.side-list__h {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .8rem;
  padding-left: .8rem;
}
.side-list__ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .3rem;
}
.side-list__link {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .7rem .9rem;
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  font-size: .93rem;
  border: 1px solid transparent;
  transition: background var(--dur) var(--easing),
              border-color var(--dur) var(--easing),
              transform var(--dur) var(--easing);
}
.side-list__link:hover {
  background: var(--cream);
  border-color: rgba(58, 182, 201, .3);
  transform: translateX(3px);
  color: var(--turq-deep);
}
.side-list__ico {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 8px;
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--turq-deep);
  background: rgba(58, 182, 201, .10);
  transition: transform var(--dur) var(--easing),
              box-shadow var(--dur) var(--easing);
}
.side-list__ico .ico {
  position: relative; z-index: 1;
  width: 19px; height: 19px;
  transition: opacity var(--dur) var(--easing);
}
/* Custom illustrated icon (PNG/WebP) — base state alternative to the SVG glyph */
.side-list__custom-icon {
  position: relative; z-index: 1;
  width: 22px; height: 22px;
  object-fit: contain;
  transition: opacity var(--dur) var(--easing);
}
.side-list__link:hover .side-list__custom-icon { opacity: 0; }
/* Cross-fade image over the icon on hover — no layout shift */
.side-list__ico-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.side-list__link:hover .side-list__ico {
  transform: scale(1.25);   /* 1.35 on a 30px tile reached into the text */
  box-shadow: 0 4px 10px rgba(58, 182, 201, .28);
}
.side-list__link:hover .side-list__ico-img { opacity: 1; transform: scale(1); }
.side-list__link:hover .side-list__ico .ico { opacity: 0; }

.side-list__arrow { color: var(--muted); opacity: 0; transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing); }
.side-list__link:hover .side-list__arrow { opacity: 1; transform: translateX(3px); color: var(--turq); }

/* Variant with thumbnail — used in the blog-single sidebar */
.side-list--sticky { position: sticky; top: calc(var(--nav-h) + 1rem); }
.side-list__link--thumb {
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: .9rem;
  padding: .7rem .8rem;
}
.side-list__thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(58,182,201,.18), rgba(90,200,220,.08));
  display: grid; place-items: center;
  color: var(--turq-deep);
  flex-shrink: 0;
  transition: background var(--dur) var(--easing), color var(--dur) var(--easing);
}
.side-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.side-list__thumb .ico { width: 26px; height: 26px; }
.side-list__link--thumb:hover .side-list__thumb {
  background: linear-gradient(135deg, var(--turq), var(--turq-deep));
  color: #fff;
}
.side-list__meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.side-list__name { font-weight: 600; font-size: .93rem; line-height: 1.25; }
.side-list__tag { font-size: .8rem; color: var(--muted); line-height: 1.3; }

/* ================= TERAPIA LANDING (single page) =================
   /terapie/{slug} as a landing page rather than an article. The opener quotes
   the home hero (ivory wash, the arch, glass tag + seal, the hero-* keyframes —
   don't rename those without checking here); the body puts the ledger before
   the prose, beside a sticky rail (ink booking panel + flat "Esplora anche").
   Additive block: .terapia-hero / .terapia-title / .terapia-layout above are
   left as they were so restoring _dev/backups/terapia.php.*.bak just works. */

/* --- Opener --- */
.tp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(3rem, 5vw, 4.5rem);
}
.tp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 82% 30%, rgba(58, 182, 201, .26), transparent 55%),
    radial-gradient(ellipse at 0% 100%,  rgba(201, 169, 106, .10), transparent 50%);
}
.tp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.tp-hero__text { min-width: 0; }
.tp-hero__text > * { animation: hero-up .8s var(--easing) both; }
.tp-hero__text > :nth-child(1) { animation-delay: .05s; }
.tp-hero__text > :nth-child(2) { animation-delay: .15s; }
.tp-hero__text > :nth-child(3) { animation-delay: .25s; }
.tp-hero__text > :nth-child(4) { animation-delay: .35s; }
.tp-hero__text > :nth-child(5) { animation-delay: .45s; }

/* the back-link doubles as the eyebrow: sand hairline, uppercase, arrow turned back */
.tp-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 500 .78rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--turq-deep);
  margin-bottom: 1.4rem;
}
.tp-hero__eyebrow::before { content: ''; width: 2.2rem; height: 1px; background: var(--sand); transition: width var(--dur) var(--easing); }
.tp-hero__eyebrow:hover { color: var(--turq-ink); }
.tp-hero__eyebrow:hover::before { width: 3rem; }
.tp-hero__eyebrow .ico { transform: rotate(180deg); }

.tp-hero__h1 {
  font-size: clamp(2.3rem, 3.6vw + 1rem, 4.2rem);
  line-height: 1.05; letter-spacing: -.02em;
  max-width: 16ch; text-wrap: balance;
  margin-bottom: .8rem;
}
.tp-hero__tagline {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, .6vw + .9rem, 1.55rem);
  line-height: 1.3; color: var(--turq-ink);
  max-width: 36ch; margin: 0 0 1.2rem;
}
.tp-hero__lede { font-size: clamp(1.02rem, .3vw + .95rem, 1.15rem); color: var(--ink-soft); max-width: 52ch; margin: 0 0 2rem; }
.tp-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.tp-hero__tel { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-soft); font-size: .95rem; }
.tp-hero__tel .ico { color: var(--turq); }
.tp-hero__tel b { color: var(--ink); font-weight: 600; transition: color var(--dur) var(--easing); }
.tp-hero__tel:hover b { color: var(--turq-ink); }
.tp-hero__wa__arrow { display: none; }   /* mobile-only, see ≤900 */

/* the stage: arch plate + seal (top-right) + tag (bottom-left) — the home's diagonal */
.tp-hero__stage { position: relative; justify-self: end; width: 100%; max-width: 480px; }
.tp-hero__plate {
  position: relative; overflow: hidden;
  aspect-ratio: 10 / 9;
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  background: linear-gradient(180deg, var(--turq-light) 0%, var(--turq) 55%, var(--turq-deep) 100%);
  box-shadow: var(--shadow-lg);
  transform-origin: 50% 100%;
  animation: hero-arch 1s var(--easing) both .1s;
}
.tp-hero__plate img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.tp-hero__plate::after {
  /* inner doorway line, as on the home arch */
  content: ''; position: absolute; inset: 12px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: inherit; pointer-events: none;
}
.tp-hero__plate--empty { display: grid; place-items: center; color: #fff; }
.tp-hero__plate--empty .ico { width: 96px; height: 96px; opacity: .85; }

.tp-hero__seal {
  position: absolute; top: 5%; right: -3%;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  animation: hero-up .8s var(--easing) both .9s;
}
.tp-hero__seal img { width: 34px; height: 34px; object-fit: contain; }
.tp-hero__seal .ico { width: 26px; height: 26px; color: var(--turq-deep); }

.tp-hero__tag {
  position: absolute; left: -6%; bottom: 9%;
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1.05rem .8rem .95rem;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  color: var(--ink);
  animation: hero-up .8s var(--easing) both 1.1s;   /* a link: it enters, it never floats */
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing), border-color var(--dur) var(--easing);
}
.tp-hero__tag::before {
  content: ''; position: absolute; right: -5px; top: 1.1rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--turq);
  box-shadow: 0 0 0 4px rgba(58, 182, 201, .25);
  animation: hero-pulse 2.6s ease-in-out infinite;
}
.tp-hero__tag:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(58, 182, 201, .5); color: var(--ink); }
.tp-hero__tag__num { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--turq-deep); }
.tp-hero__tag__lbl { font-size: .78rem; line-height: 1.3; color: var(--ink-soft); }
.tp-hero__tag__lbl em { display: block; font-style: normal; font-weight: 600; color: var(--turq-ink); margin-top: .15rem; }
.tp-hero__tag__lbl .ico { transform: rotate(90deg); transition: transform var(--dur) var(--easing); }
.tp-hero__tag:hover .tp-hero__tag__lbl .ico { transform: rotate(90deg) translateX(2px); }

/* --- Body --- */
.tp-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; }
.tp-main { min-width: 0; }
.tp-main > .tx:first-child { margin-top: 0; }
.tx { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.tp-prose { margin-top: 3rem; max-width: 66ch; }
.tp-prose__h {
  font-size: clamp(1.4rem, 1.5vw + .8rem, 1.9rem);
  margin: 0; padding-bottom: .9rem;
  border-bottom: 1.5px solid var(--ink);       /* same rule as the ledger head */
}
.tp-prose .prose > :first-child { margin-top: 1.4rem; }

/* rail: ink booking panel — the manifesto in miniature — over the flat list */
.tp-book {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: #EDE7DA;
  border-radius: var(--r-lg);
  padding: 1.2rem 1.25rem 1.1rem;
}
.tp-book::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 90% 0%, rgba(58, 182, 201, .30), transparent 55%);
}
.tp-book__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 500 .7rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--turq-light);
}
.tp-book__eyebrow::before { content: ''; width: 1.6rem; height: 1px; background: var(--sand); }
.tp-book h4 { color: #fff; font-size: 1.12rem; margin: .6rem 0 .35rem; }
.tp-book p { font-size: .84rem; line-height: 1.5; color: rgba(237, 231, 218, .72); margin-bottom: .9rem; }
.tp-book .btn { width: 100%; justify-content: center; }
.tp-book__tel { display: block; margin-top: .65rem; text-align: center; font-size: .84rem; color: rgba(237, 231, 218, .68); }
.tp-book__tel b { color: #fff; font-weight: 600; transition: color var(--dur) var(--easing); }
.tp-book__tel:hover b { color: var(--turq-light); }

.tp-others { margin-top: 1.1rem; }
.tp-rail { top: calc(var(--nav-h) + .75rem); }   /* a hair tighter than .terapia-aside: the rail is budgeted for 768px-tall laptops */
.tp-others__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0 .9rem .6rem;
  margin-bottom: .4rem;
  border-bottom: 1.5px solid var(--ink);
}
.tp-others__head h4 { margin: 0; font-size: 1.1rem; }
.tp-others__count { font: 600 .66rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--turq-deep); white-space: nowrap; }
/* tight rows: the whole sticky rail has to fit a 768px-tall laptop under the nav offset */
.tp-others .side-list__ul { gap: .1rem; }
.tp-others .side-list__link {
  padding: .36rem .9rem;
  transition: background var(--dur) var(--easing), border-color var(--dur) var(--easing),
              transform var(--dur) var(--easing), opacity var(--dur) var(--easing);
}
@media (hover: hover) {
  /* siblings recede by tone, never by size */
  .tp-others .side-list__ul:hover .side-list__link:not(:hover) { opacity: .62; }
}

@media (max-width: 900px) {
  .tp-hero { padding-bottom: 2.5rem; }
  .tp-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .tp-hero__stage { justify-self: center; max-width: 420px; }
  .tp-hero__ctas .tp-hero__book { display: none; }   /* only the "Prenota" fallback hides: the fixed dock owns booking on mobile. WhatsApp stays. */
  /* On phones the WhatsApp pill becomes a text link, the same row grammar as the
     tel line underneath, with a small arrow — two quiet lines instead of a big button */
  .tp-hero__ctas { flex-direction: column; align-items: flex-start; gap: 0; }
  .tp-hero__wa {
    background: none; box-shadow: none; border-radius: 0;
    padding: 0; min-height: 44px;
    gap: .5rem;
    font-size: 1rem; font-weight: 600; color: var(--ink);
  }
  .tp-hero__wa:hover { background: none; box-shadow: none; transform: none; color: var(--turq-ink); }
  .tp-hero__wa .ico--whatsapp { color: var(--turq); }
  .tp-hero__wa__arrow { display: inline-grid; color: var(--turq); margin-left: -.1rem; }
  .tp-hero__tel { min-height: 44px; font-size: 1rem; }
  .tp-body { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 560px) {
  .tp-hero__stage { max-width: 320px; }
  .tp-hero__tag { position: static; margin-top: .9rem; justify-content: center; }
  .tp-hero__tag::before { display: none; }
  .tp-hero__seal { top: 4%; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-hero__text > *, .tp-hero__plate, .tp-hero__seal, .tp-hero__tag, .tp-hero__tag::before { animation: none; }
}

/* ================= BLOG LAYOUT (single) ================= */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  max-width: 1180px;
  align-items: start;
  padding-top: 2rem;
}
.blog-layout__main { min-width: 0; }
.blog-layout__side { min-width: 0; }
.blog-layout__side-cta {
  width: 100%; justify-content: center;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; gap: 2rem; }
  .side-list--sticky { position: static; }
}

/* Blog article excerpt (italic lede below meta) */
.blog-excerpt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 2rem;
}

/* Blog body prose */
.blog-body {
  font-size: 1.05rem; line-height: 1.75; color: var(--ink);
}
.blog-body h2, .blog-body h3 { margin-top: 2.4rem; font-family: var(--serif); font-weight: 500; }
.blog-body h2 { font-size: 1.8rem; }
.blog-body h3 { font-size: 1.4rem; }
.blog-body p { margin-bottom: 1.2rem; }
.blog-body img { border-radius: var(--r-md); margin: 1.6rem 0; }
.blog-body blockquote {
  margin: 2rem 0; padding: 1.2rem 1.6rem;
  border-left: 3px solid var(--turq); background: var(--cream);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--serif); font-style: italic;
}
.blog-body a { color: var(--turq-deep); text-decoration: underline; text-underline-offset: 3px; }
.blog-body ul, .blog-body ol { padding-left: 1.4rem; margin-bottom: 1.2rem; }

/* Terapie correlate chips row at the bottom of the article body */
.blog-chips { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.blog-chips__h {
  font-family: var(--sans);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .8rem;
}
.blog-chips__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em 1em;
  background: rgba(58, 182, 201, .10);
  color: var(--turq-deep);
  border: 1px solid rgba(58, 182, 201, .25);
  border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 600;
  text-decoration: none;
  transition: background var(--dur) var(--easing),
              border-color var(--dur) var(--easing),
              color var(--dur) var(--easing),
              transform var(--dur) var(--easing);
}
.chip:hover {
  background: var(--turq-deep);
  border-color: var(--turq-deep);
  color: #fff;
  transform: translateY(-2px);
}
.chip .ico { transition: transform var(--dur) var(--easing); }
.chip:hover .ico { transform: translateX(2px); }

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