/* =====================================================================
   Studio Dentistico Quagliero — site.css
   One stylesheet, tokens in :root. Sharp corners everywhere (brief: keep
   the square style), palette derived from the logo's three blues with the
   old saturated navy (#003B70) and flat teal (#21C2BA) retired: dark
   surfaces are an inky blue-black, colour comes from the logo blue, and
   warm stone neutrals keep the page from reading as a hospital.
   Font: Manrope (variable, self-hosted, 53 KB — the only webfont).
   ===================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:        #13233A;   /* body text, headings */
  --ink-2:      #44546A;   /* secondary text      7.6:1 on white */
  --ink-3:      #5B6A7D;   /* small muted text    5.4:1 on white */
  --deep:       #0E2238;   /* dark surfaces (replaces the old navy) */
  --deep-2:     #17324F;
  --blue:       #0B63AE;   /* logo mid-blue: links, buttons  6.2:1 white on it */
  --blue-dark:  #084C86;
  --sky:        #1BA3DC;   /* logo light blue: accents, never small text on white */
  --sky-soft:   #E7F3FA;
  --sand:       #F5F2ED;   /* warm neutral surface */
  --mist:       #EFF3F6;
  --line:       #DCE3E9;
  --line-dark:  rgba(255,255,255,.14);
  --wa:         #157A43;   /* WhatsApp, darkened for 5:1 with white */
  --ok:         #1C7C4A;
  --err:        #B42318;

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --container: 1220px;
  --gutter: clamp(16px, 4vw, 32px);
  --sticky-h: 140px;       /* overwritten by site.js with the real header height */
  --shadow: 0 1px 2px rgba(14,34,56,.06), 0 8px 24px rgba(14,34,56,.08);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65;
  color: var(--ink); background: #fff; font-weight: 450;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Scroll lock (site.js CU): right = the scrollbar width that disappeared, width auto — so the
   page keeps its width and nothing reflows. The sticky header becomes fixed while locked. */
body.scroll-locked { position: fixed; left: 0; right: var(--sbw, 0); width: auto; overflow: hidden; }
body.scroll-locked .site-header { position: fixed; top: 0; left: 0; right: var(--sbw, 0); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
[id] { scroll-margin-top: calc(var(--sticky-h) + 16px); }
h1, h2, h3, h4 { font-weight: 750; line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .6em; color: var(--ink); }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.3rem); }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--deep); color: #fff; padding: .7rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* eyebrow: a short sky bar + small caps label, the recurring "sharp" motif */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .9rem;
  font-size: .78rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--sky); flex: none; }
.eyebrow--light { color: #fff; }
.lead { font-size: 1.15rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.35rem; border: 2px solid transparent; border-radius: 0;
  font: 700 .98rem/1.2 var(--font); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  background: var(--blue); color: #fff; transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover { background: var(--blue-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn--primary { background: var(--blue); }
.btn--dark { background: var(--deep); }
.btn--dark:hover { background: var(--deep-2); }
.btn--light { background: #fff; color: var(--deep); }
.btn--light:hover { background: var(--sky-soft); color: var(--deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; padding: .85rem 1rem; }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Ghost buttons are links to other pages: a chevron says so, and nudges right on hover (PM). */
.btn--ghost::after {
  content: ""; flex: none; width: .42em; height: .42em; margin: 0 .15em 0 .05em;
  border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg);
  transition: transform .18s;
}
.btn--ghost:hover::after, .btn--ghost:focus-visible::after { transform: translateX(4px) rotate(45deg); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost-light:hover { background: #fff; color: var(--deep); border-color: #fff; }
.btn--wa { background: var(--wa); }
.btn--wa:hover { background: #10613A; }
.btn--lg { padding: 1rem 1.6rem; font-size: 1.04rem; }
.btn--block { width: 100%; }
.cta { margin: 1.6rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }   /* gap: buttons that wrap on a phone don't touch */

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(14,34,56,.07); }

.topbar { background: var(--deep); color: rgba(255,255,255,.86); font-size: .86rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar p { margin: 0; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--sky); }
.topbar__where { display: none; }
.topbar__links { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.topbar__links a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; }
.topbar__links svg { width: 15px; height: 15px; }
@media (min-width: 760px) { .topbar__where { display: block; } }

.site-header .container { max-width: 1340px; }
.site-header__inner { display: flex; align-items: center; gap: 1.2rem; min-height: 90px; }
.brand { display: block; flex: none; padding-block: 10px; }
.brand__img { width: 140px; height: auto; }
@media (min-width: 700px) { .brand__img { width: 148px; } }

.header-cta { display: none; margin-left: .6rem; flex: none; }
@media (min-width: 1200px) { .header-cta { display: inline-flex; } }
@media (min-width: 1200px) and (max-width: 1279.98px) { .header-cta { padding: .75rem 1rem; font-size: .9rem; margin-left: .2rem; } }

/* nav toggle (real <button>) */
.nav-toggle {
  margin-left: auto; width: 48px; height: 48px; display: inline-grid; place-items: center;
  background: var(--deep); border: 0; border-radius: 0; cursor: pointer; color: #fff;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform .2s, background .2s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.nav__list, .nav__sub { list-style: none; margin: 0; padding: 0; }
.nav__link { text-decoration: none; color: var(--ink); font-weight: 650; }
.btn, .nav__link, .topbar__links a { white-space: nowrap; }
.nav__sub a { text-decoration: none; }

/* --- mobile drawer (default) --- */
@media (max-width: 1099.98px) {
  .nav {
    position: fixed; inset: var(--sticky-h) 0 0 0; z-index: 49; display: none;
    background: var(--deep); overflow-y: auto; overscroll-behavior: contain; padding: .5rem 0 2rem;
  }
  .nav.is-open { display: block; }
  .nav__item { border-bottom: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; align-items: stretch; }
  .nav__link { flex: 1; display: flex; align-items: center; min-height: 56px; padding: .4rem var(--gutter); color: #fff; font-size: 1.08rem; }
  .nav__link svg { display: none; }
  .nav__item.is-active > .nav__link { box-shadow: inset 3px 0 0 var(--sky); }
  .nav__sub-toggle {
    width: 60px; flex: none; background: transparent; border: 0; border-left: 1px solid var(--line-dark);
    color: #fff; cursor: pointer; display: grid; place-items: center;
  }
  .nav__sub-toggle svg { width: 14px; transition: transform .2s; }
  .nav__sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav__sub { display: none; width: 100%; background: rgba(0,0,0,.18); padding: .3rem 0 .6rem; }
  .nav__item.is-expanded > .nav__sub { display: block; }
  .nav__sub a { display: block; padding: .7rem calc(var(--gutter) + 1rem); color: rgba(255,255,255,.88); }
  .nav__sub a[aria-current="page"] { color: var(--sky); font-weight: 700; }
  .nav__cta { display: grid; gap: .7rem; padding: 1.4rem var(--gutter) 0; }
}

/* --- desktop: inline list + hover dropdowns from the same markup --- */
@media (min-width: 1100px) {
  .nav-toggle, .nav__sub-toggle, .nav__cta { display: none; }
  .nav { margin-left: auto; }
  .nav__list { display: flex; align-items: stretch; gap: .2rem; }
  .nav__item { position: relative; display: flex; }
  .nav__link { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .7rem; min-height: 90px; font-size: .95rem; position: relative; }
  .nav__link::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 22px; height: 2px; background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
  .nav__item:hover > .nav__link::after, .nav__item.is-active > .nav__link::after, .nav__link:focus-visible::after { transform: scaleX(1); }
  .nav__link svg { width: 10px; transition: transform .2s; }
  .nav__sub {
    position: absolute; top: 100%; left: 0; min-width: 270px; background: #fff; padding: .5rem 0;
    border-top: 3px solid var(--blue); box-shadow: var(--shadow); display: none;
  }
  .nav__sub a { display: block; padding: .55rem 1.2rem; color: var(--ink); font-size: .94rem; font-weight: 550; }
  .nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--mist); color: var(--blue); }
  .nav__item--has-sub:focus-within > .nav__sub { display: block; }
  @media (hover: hover) {
    .nav__item--has-sub:hover > .nav__sub { display: block; }
    .nav__item--has-sub:hover > .nav__link svg { transform: rotate(180deg); }
  }
  .nav__item--wide > .nav__sub { columns: 2; column-gap: 0; min-width: 520px; }
  .nav__item--wide > .nav__sub li { break-inside: avoid; }
}
@media (min-width: 1100px) and (max-width: 1279.98px) { .nav__link { padding: 0 .45rem; font-size: .88rem; } .brand__img { width: 132px; } }
@media (min-width: 1280px) and (max-width: 1379.98px) { .nav__link { padding: 0 .6rem; } }

/* ---------------------------------------------------------------- hero (home) */
.hero { position: relative; color: #fff; background: var(--deep); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; pointer-events: none; user-select: none; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,34,56,.94) 0%, rgba(14,34,56,.82) 38%, rgba(14,34,56,.35) 70%, rgba(14,34,56,.15) 100%);
}
@media (max-width: 760px) { .hero__media::after { background: linear-gradient(180deg, rgba(14,34,56,.55) 0%, rgba(14,34,56,.92) 70%); } }
.hero__inner { position: relative; padding-block: clamp(4.5rem, 10vw, 8.5rem) clamp(3.5rem, 7vw, 6rem); max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero__sub { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: rgba(255,255,255,.9); margin-bottom: 2rem; max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.facts { background: #fff; border-bottom: 1px solid var(--line); }
.facts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 600px) and (max-width: 899.98px) { .facts__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .facts__list li { padding: .85rem 0; border-bottom: 1px solid var(--line); } .facts__list li:last-child { border-bottom: 0; } }
.facts__list li { padding: 1.3rem 1rem 1.3rem 0; display: flex; gap: .8rem; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.facts__list strong { display: block; color: var(--ink); font-size: 1.02rem; font-weight: 750; }
.facts__list svg { width: 28px; height: 28px; flex: none; color: var(--blue); margin-top: .1rem; }
@media (min-width: 900px) {
  .facts__list { grid-template-columns: repeat(4, 1fr); }
  .facts__list li { padding: 1.6rem 1.4rem; border-left: 1px solid var(--line); }
  .facts__list li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------- sections */
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--sand { background: var(--sand); }
.section--mist { background: var(--mist); }
.section--deep { background: var(--deep); color: rgba(255,255,255,.88); }
.section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }
.section--deep a:not(.btn) { color: #fff; }
.section__head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.section__head--row > div { max-width: 700px; }
.section__head p:last-child { margin-bottom: 0; }

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 1.15fr .85fr; }
  .split--reverse > :first-child { order: 2; }
}
.frame { position: relative; }
.frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.frame--land img { aspect-ratio: 4 / 3; }
/* offset outline behind the photo: a sharp-cornered echo of the card borders */
.frame::before { content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; border: 2px solid var(--sky); z-index: -1; }
.frame-wrap { position: relative; z-index: 0; padding: 0 1.1rem 1.1rem 0; }

/* rich text inside home/section blocks */
.rich h2 { margin-top: 0; }
.rich :is(h3, .hx-3):first-child { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 750; }
.rich ul, .rich ol { padding-left: 1.2rem; }
.rich li { margin-bottom: .45rem; }
.section--deep .rich :is(h3, .hx-3):first-child { color: var(--sky); }

/* check list (home "5 motivi", reasons) */
.checks { counter-reset: c; }
.checks ol, .checks ul { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.checks ul + ul, .checks ol + ol { margin-top: 0; }
.checks ul + ul li:first-child { border-top: 0; }
.checks li { position: relative; padding: 1rem 0 1rem 3.2rem; border-top: 1px solid var(--line); counter-increment: c; margin: 0; }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks li::before {
  content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: 1rem;
  font-weight: 800; color: var(--blue); font-size: .95rem; letter-spacing: .02em;
}
.section--deep .checks li { border-color: var(--line-dark); }
.section--deep .checks li::before { color: var(--sky); }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.card {
  position: relative; background: #fff; padding: 1.7rem 1.6rem 1.6rem; display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink); transition: background .2s;
}
.card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
a.card:hover { background: var(--mist); color: var(--ink); }
a.card:hover::before, a.card:focus-visible::before { transform: scaleX(1); }
.card__num { font-size: .8rem; font-weight: 800; color: var(--blue); letter-spacing: .08em; margin-bottom: 1.2rem; }
.card__img { margin: -1.7rem -1.6rem 1.3rem; overflow: hidden; }
.card__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s; }
a.card:hover .card__img img { transform: scale(1.04); }
.card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.card p { color: var(--ink-2); font-size: .96rem; margin-bottom: 1.1rem; }
.card__more { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .92rem; color: var(--blue); }
.card__more svg { width: 16px; transition: transform .2s; }
a.card:hover .card__more svg { transform: translateX(4px); }

/* steps: the three "how to book" tiles that used to be images */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-dark); counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { background: var(--deep-2); padding: 1.8rem 1.6rem; counter-increment: s; color: #fff; font-weight: 700; font-size: 1.12rem; line-height: 1.35; }
.steps li::before { content: "0" counter(s); display: block; font-size: 2.4rem; font-weight: 800; color: var(--sky); line-height: 1; margin-bottom: 1rem; letter-spacing: -.03em; }

/* testimonials */
.quotes { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--sky); padding: 1.6rem 1.6rem 1.3rem; margin: 0; display: flex; flex-direction: column; }
.quote__text { font-size: 1rem; color: var(--ink); }
.quote__text p:last-child { margin-bottom: 0; }
.quote__who { margin-top: auto; padding-top: 1rem; font-size: .9rem; color: var(--ink-3); font-weight: 650; }
.quote svg { width: 26px; color: var(--sky); margin-bottom: .6rem; }


/* gallery */
.gallery { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); margin: 1.8rem 0; }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; }
.gallery img, .gallery__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery__item { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }

.logos { background: #fff; border: 1px solid var(--line); padding: 1rem; margin-top: 1.5rem; }

/* ---------------------------------------------------------------- page hero */
.page-hero { position: relative; background: var(--deep); color: #fff; overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Lighter than the home hero (PM, 24/09): the cover photo should read. Behind the text the
   veil is still .62; on phones, where the text spans the whole photo, it is uniform. */
.page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,34,56,.62) 0%, rgba(14,34,56,.5) 55%, rgba(14,34,56,0) 100%); }
@media (max-width: 760px) { .page-hero__media::after { background: rgba(14,34,56,.6); } }
.page-hero h1, .page-hero__sub, .page-hero__tag { text-shadow: 0 1px 14px rgba(9,24,41,.35); }
.page-hero__inner { position: relative; padding-block: clamp(3rem, 7vw, 5.5rem); max-width: 860px; }
.page-hero h1 { color: #fff; margin-bottom: .3em; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
.page-hero__sub { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: rgba(255,255,255,.9); margin: 0; font-weight: 550; }
.page-hero__tag { margin: .8rem 0 0; color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------- page body */
.page-body { padding-block: clamp(2.8rem, 6vw, 5rem); }
.page-grid { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .page-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 4.5rem; } }
.page-grid.page-grid--narrow { max-width: 860px; margin-inline: 0; grid-template-columns: minmax(0, 1fr); }  /* left, aligned with the page intro */

.prose { font-size: 1.06rem; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.prose h3 { margin-top: 1.8em; }
.prose h4 { margin-top: 1.5em; }
/* A heading raised by normalize_headings() (valid outline) keeps the look of the level it was written at. */
:is(h2, h3, h4).hx-3 { font-size: 1.28rem; margin-top: 1.8em; }
:is(h2, h3, h4).hx-4 { font-size: 1.08rem; margin-top: 1.5em; }
:is(h2, h3, h4, h5).hx-5, :is(h2, h3, h4, h5).hx-6 { font-size: .83em; font-weight: 700; letter-spacing: 0; line-height: inherit; margin: 1.67em 0; }
.rich > .hx-3:first-child, .prose > [class^="hx-"]:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose li::marker { color: var(--blue); }
.prose strong { font-weight: 750; }
.prose blockquote { margin: 1.8rem 0; padding: 1.2rem 1.4rem; border-left: 4px solid var(--sky); background: var(--mist); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite { display: block; margin-top: .6rem; font-style: normal; font-weight: 700; font-size: .9rem; color: var(--ink-3); }
.prose .figure { margin: 2rem 0; }
.prose .figure img { width: auto; max-width: 100%; max-height: 620px; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; vertical-align: top; }
.prose th { background: var(--mist); }
.prose a { word-break: break-word; }
.prose--legal { font-size: 1rem; }
.prose--legal h2 { font-size: 1.3rem; }
.prose--legal h3 { font-size: 1.1rem; }

/* FAQ accordions (WP accordion → <details>) */
.prose details { border: 1px solid var(--line); border-top-width: 3px; border-top-color: var(--blue); margin: 0 0 1rem; background: #fff; }
.prose details > summary {
  list-style: none; cursor: pointer; padding: 1.05rem 3.2rem 1.05rem 1.2rem; font-weight: 750; font-size: 1.1rem; position: relative;
}
.prose details > summary::-webkit-details-marker { display: none; }
.prose details > summary::after {
  content: ""; position: absolute; right: 1.2rem; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); transition: transform .2s;
}
.prose details[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.prose details > :not(summary) { padding-inline: 1.2rem; }
.prose details > :last-child { padding-bottom: 1rem; }

/* numbered steps from the landing page ("1" modules) */
.step { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.step__n { font-size: 1.9rem; font-weight: 800; color: var(--blue);   /* --sky on white is 2.86:1, under 3:1 even for large text */ line-height: 1; }
.step__body > :last-child { margin-bottom: 0; }
.step__body h2, .step__body h3, .step__body h4 { margin-top: 0; font-size: 1.15rem; }

/* sidebar */
.aside { display: grid; gap: 1.5rem; align-content: start; }
.aside__box { border: 1px solid var(--line); padding: 1.4rem; background: #fff; }
.aside__box--deep { background: var(--deep); color: rgba(255,255,255,.88); border: 0; }
.aside__box--deep h2 { color: #fff; }
.aside__title { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0 0 1rem; font-weight: 800; }
.aside__box--deep .aside__title { color: var(--sky); }
.aside__list { list-style: none; margin: 0; padding: 0; }
.aside__list li + li { border-top: 1px solid var(--line); }
.aside__list a { display: block; padding: .6rem 0; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .96rem; }
.aside__list a:hover { color: var(--blue); }
.aside__list a[aria-current="page"] { color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); padding-left: .8rem; }
.aside__cta { display: grid; gap: .6rem; }
.aside__cta p { font-size: .95rem; margin-bottom: .6rem; }
@media (min-width: 1000px) { .aside--sticky { position: sticky; top: calc(var(--sticky-h) + 1.5rem); } }

/* contact card (settings-driven) */
.contact-card { display: grid; gap: 1.1rem; }
.contact-card__row { display: grid; grid-template-columns: 28px 1fr; gap: .8rem; align-items: start; }
.contact-card__row svg { width: 22px; height: 22px; color: var(--blue); margin-top: .15rem; }
.section--deep .contact-card__row svg, .aside__box--deep .contact-card__row svg { color: var(--sky); }
.contact-card__label { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 750; }
.section--deep .contact-card__label, .aside__box--deep .contact-card__label { color: rgba(255,255,255,.65); }
.contact-card__row a { font-weight: 700; text-decoration: none; }
.hours { font-size: .95rem; }
.hours p { margin: 0 0 .35rem; }


/* blog */
.posts { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 640px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 1.3rem; }
.post-card__img { overflow: hidden; margin-bottom: 1rem; background: var(--mist); aspect-ratio: 16 / 10; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post-card__img--empty { display: grid; place-items: center; background: linear-gradient(135deg, var(--deep), var(--deep-2)); }
.post-card__img--empty img { width: 64px; height: auto; opacity: .9; object-fit: contain; }
.post-card:hover .post-card__img img { transform: scale(1.04); }
.post-card:hover h3 { color: var(--blue); }
.post-card__meta { font-size: .82rem; color: var(--ink-3); font-weight: 650; margin-bottom: .4rem; letter-spacing: .02em; }
.post-card h3 { font-size: 1.15rem; margin-bottom: .5rem; transition: color .2s; }
.post-card p { font-size: .95rem; color: var(--ink-2); margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.tabs a { padding: .55rem 1rem; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 650; font-size: .92rem; }
.tabs a[aria-current="page"] { background: var(--deep); border-color: var(--deep); color: #fff; }
.tabs a:hover { border-color: var(--blue); color: var(--blue); }
.tabs a[aria-current="page"]:hover { color: #fff; }
.pager { display: flex; justify-content: center; gap: .4rem; margin-top: 3rem; flex-wrap: wrap; }
.pager a, .pager span { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 .6rem; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; }
.pager span[aria-current] { background: var(--deep); color: #fff; border-color: var(--deep); }
.pager a:hover { border-color: var(--blue); color: var(--blue); }

.post-head__meta { color: rgba(255,255,255,.8); font-size: .92rem; margin: .6rem 0 0; }
.post-cover { margin: 0 0 2.2rem; }
.post-cover img { width: 100%; }
.post-nav { display: grid; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a { display: block; padding: 1rem 1.2rem; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; }
.post-nav a:hover { border-color: var(--blue); }
.post-nav small { display: block; color: var(--ink-3); font-weight: 650; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; }
.post-nav__next { text-align: right; }
.health-note { font-size: .85rem; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2.5rem; }

/* ---------------------------------------------------------------- CTA band */
.cta-band { background: var(--blue); color: #fff; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding-block: 2.2rem; }
.cta-band h2 { color: #fff; margin: 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); }
.cta-band p { margin: .3rem 0 0; color: rgba(255,255,255,.9); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------------------------------------------------------------- contact form section */
.contact-cta { background: var(--deep); color: rgba(255,255,255,.88); padding-block: clamp(3.5rem, 7vw, 6rem); }
.contact-cta h2 { color: #fff; }
.contact-cta__grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .contact-cta__grid { grid-template-columns: .85fr 1.15fr; gap: 4.5rem; } }
.contact-cta__intro a:not(.btn) { color: #fff; font-weight: 700; }
.contact-cta__quick { display: grid; gap: .7rem; margin: 1.8rem 0; max-width: 360px; }
.contact-cta__form { background: #fff; color: var(--ink); padding: clamp(1.4rem, 3vw, 2.4rem); }
.contact-cta--light { background: var(--sand); color: var(--ink); }
.contact-cta--light h2 { color: var(--ink); }
.contact-cta--light .contact-cta__intro a:not(.btn) { color: var(--blue); }
.contact-cta--light .eyebrow--light { color: var(--blue); }
.contact-cta--light .contact-cta__form { border: 1px solid var(--line); }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .35rem; }
.field__label { font-weight: 700; font-size: .92rem; }
.req { color: var(--err); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; font: 500 1rem/1.4 var(--font); color: var(--ink); background: #fff;
  border: 1px solid #B7C3CF; border-radius: 0; padding: .8rem .9rem; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,99,174,.18); }
.field textarea { resize: vertical; min-height: 130px; }
.field--check { grid-template-columns: 22px 1fr; align-items: start; gap: .7rem; font-size: .9rem; color: var(--ink-2); }
.field--check input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--blue); }
.field--captcha__row { display: flex; gap: .8rem; align-items: center; }
.field--captcha__row input { max-width: 90px; }
.field--captcha__row small { color: var(--ink-3); font-size: .85rem; line-height: 1.4; }
.alert { padding: 1rem 1.2rem; margin-bottom: 1.2rem; border-left: 4px solid; font-size: .95rem; }
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.alert--ok { background: #E9F6EF; border-color: var(--ok); color: #124D2F; }
.alert--err { background: #FDECEA; border-color: var(--err); color: #7A1A12; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: #091829; color: rgba(255,255,255,.75); font-size: .93rem; }
.site-footer a { color: rgba(255,255,255,.9); text-decoration: none; }
.site-footer a:hover { color: var(--sky); text-decoration: underline; }
.footer__grid { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; } }
.footer__logo { width: 190px; margin-bottom: 1.2rem; }
.footer__title { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; font-weight: 800; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer__social { display: flex; gap: .5rem; margin-top: 1.2rem; }
.footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); }
.footer__social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.footer__social svg { width: 18px; height: 18px; }
.site-footer .contact-card__row svg { color: var(--sky); }
.site-footer .contact-card { font-size: .92rem; }
.footer__legal { border-top: 1px solid var(--line-dark); padding-block: 1.6rem; font-size: .82rem; color: rgba(255,255,255,.62); display: grid; gap: .5rem; }
.footer__legal p { margin: 0; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; }

/* floating WhatsApp (replaces the Click-to-Chat plugin) */
.wa-float {
  position: fixed; right: 16px; bottom: calc(16px + var(--consent-h, 0px)); z-index: 40; width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--wa); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.2); border-radius: 0;
}
.wa-float:hover { background: #10613A; color: #fff; }
.wa-float svg { width: 28px; height: 28px; }
body.scroll-locked .wa-float { display: none; }

/* ---------------------------------------------------------------- dialogs (privacy sheet, lightbox) */
.sheet { border: 0; padding: 0; width: min(760px, 100vw - 24px); max-height: 88svh; background: #fff; color: var(--ink); animation: sheet-in .2s ease-out backwards; }
.sheet::backdrop { background: rgba(9,24,41,.6); }
.sheet__box { display: flex; flex-direction: column; max-height: 88svh; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); }
.sheet__title { margin: 0; font-size: 1.2rem; }
.sheet__close { width: 40px; height: 40px; border: 0; background: var(--mist); cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.sheet__close svg { width: 16px; }
.sheet__body { overflow-y: auto; padding: 1.2rem 1.3rem; }
.sheet__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.3rem; border-top: 1px solid var(--line); font-size: .9rem; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 699.98px) { .sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; } }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(9,24,41,.92); }
.lightbox__stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.lightbox__img { max-width: min(92vw, 1100px); max-height: 82vh; width: auto; transition: opacity .2s; }
.lightbox__img.is-loading { opacity: 0; }
.lightbox__btn { position: absolute; width: 48px; height: 48px; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lightbox__btn:hover { background: var(--blue); }
.lightbox__btn svg { width: 20px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; margin-top: -24px; }
.lightbox__next { right: 16px; top: 50%; margin-top: -24px; }
.lightbox__count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.8); font-size: .9rem; }

/* 404 */
.error-page { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.error-page__code { font-size: clamp(4rem, 12vw, 8rem); font-weight: 800; color: var(--blue); line-height: 1; margin-bottom: .5rem; letter-spacing: -.04em; }

/* ---------------------------------------------------------------- 24/09 revision */
@media (max-width: 699.98px) { .site-header__inner { min-height: 84px; } }
.btn[hidden] { display: none; }

/* Dropdown overview item («Tutte le terapie», «Tutti gli articoli», «Contatti e orari»):
   the section's own page, first in its list, set apart by a rule. Desktop only —
   in the drawer the section label is already a full-width link. */
@media (min-width: 1100px) {
  .nav__sub-overview { border-bottom: 1px solid var(--line); margin-bottom: .35rem; padding-bottom: .35rem; column-span: all; }
  .nav__sub-overview a { font-weight: 750; color: var(--blue); }
}
@media (max-width: 1099.98px) { .nav__sub-overview { display: none; } }

/* Simple intro for pages without a cover photo (replaces the sand band). */
.page-intro { padding-top: clamp(2.4rem, 5vw, 4rem); }
.page-intro__inner { max-width: 860px; padding-bottom: clamp(1.6rem, 3vw, 2.2rem); border-bottom: 1px solid var(--line); }
.page-intro h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); margin-bottom: .3em; }
.page-intro__sub { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--ink-2); font-weight: 550; margin: 0; }
.page-intro__tag { color: var(--ink-3); margin: .6rem 0 0; }
.page-intro .eyebrow a { color: inherit; text-decoration: none; }
.page-intro + .page-body, .page-intro + .section { padding-top: clamp(2rem, 4vw, 3rem); }
.page-intro .page-intro__inner { margin-inline: 0; }

/* Consent-gated embeds (videos and map share one placeholder). */
.embed { position: relative; margin: 1.8rem 0; background: var(--deep); color: rgba(255,255,255,.9); aspect-ratio: 16 / 9; overflow: hidden; }
.embed--short { aspect-ratio: 9 / 16; }
.embed--map { aspect-ratio: 16 / 10; margin: 0; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__consent {
  position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .35rem; padding: 1.2rem; background: linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 100%);
}
.embed__icon { width: 52px; height: 52px; color: #fff; border: 2px solid rgba(255,255,255,.7); padding: 8px; flex: none; margin-bottom: .3rem; }
.embed__title { font-weight: 800; color: #fff; font-size: 1.05rem; margin: 0; }
.embed__lead { font-size: .9rem; max-width: 44ch; margin: 0; }
.embed__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .5rem 0 .2rem; }
.embed__actions .btn { padding: .65rem 1rem; font-size: .88rem; }
.embed__small { font-size: .76rem; line-height: 1.45; color: rgba(255,255,255,.72); max-width: 52ch; margin: 0; }
.embed__small a { color: #fff; }
.embed--short .embed__lead { font-size: .84rem; }
.embed--short .embed__actions { flex-direction: column; width: 100%; }
.map-links { margin: .8rem 0 0; font-size: .95rem; }
/* Flex, not grid auto-fill: auto-fill keeps empty tracks where another video would fit, and
   centring then centres those too — above ~1150px the three videos sat left of centre. */
.videos { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.videos .embed { flex: 0 1 260px; min-width: 220px; }
.videos .embed { margin: 0; }

/* Consent bar: bottom of the viewport, two buttons of equal weight. */
.consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 3px solid var(--blue); box-shadow: 0 -8px 30px rgba(14,34,56,.15); }
.consent-bar[hidden] { display: none; }
.consent-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 2rem; padding-block: 1rem; }
.consent-bar__text { margin: 0; font-size: .92rem; color: var(--ink-2); max-width: 70ch; }
.consent-bar__text strong { color: var(--ink); }
.consent-bar__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.consent-bar__actions .btn { min-width: 150px; }
@media (max-width: 599.98px) { .consent-bar__actions { width: 100%; } .consent-bar__actions .btn { flex: 1; min-width: 0; } }
body { padding-bottom: var(--consent-h, 0px); }

/* Cookie policy: the preference control. */
.consent-control { border: 1px solid var(--line); border-left: 4px solid var(--blue); padding: 1.2rem 1.4rem; margin: 1.5rem 0; background: var(--mist); }
.consent-control p { margin: 0 0 .8rem; }
.consent-control__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Review page */
.review-box { border: 1px solid var(--line); border-top: 4px solid var(--sky); padding: clamp(1.4rem, 4vw, 2.6rem); }
.review-box__action { margin: 1.6rem 0 .6rem; }
.review-box__note { font-size: .88rem; color: var(--ink-3); margin: 0; }
.btn--google { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(14,34,56,.08); }
.btn--google:hover { background: var(--mist); color: var(--ink); border-color: #B7C3CF; }
.btn--google img { width: 22px; height: 22px; }

/* Chi siamo: the doctor's section (portrait beside the text, below the page grid). */
@media (min-width: 900px) { .doctor__split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.doctor__photo { max-width: 460px; }
.doctor__text h2 { margin-top: 0; }
.doctor__text .embed { margin-bottom: 0; }
.page-hero__sub + .page-hero__tag { margin-top: .6rem; }
.page-body + .doctor { padding-top: clamp(1rem, 2.5vw, 2rem); }

/* Tall hero (Chi siamo, PM 24/09/2026): a group photo. The band is taller so the
   photo shows more of itself, and the text sits at the BOTTOM, over clothes rather
   than faces. The veil is the PM's light horizontal one plus a fade rising from the
   bottom edge: it darkens only where the text is and leaves the faces untouched —
   with a veil this light, white text needs something behind it. */
.page-hero--tall { min-height: clamp(420px, 40vw, 720px); display: flex; align-items: flex-end; }
.page-hero--tall > .container { width: 100%; }
.page-hero--tall .page-hero__inner { padding-block: 3rem clamp(1.8rem, 3.5vw, 3rem); }
.page-hero--tall .page-hero__media::after {
  background:
    linear-gradient(0deg, rgba(14,34,56,.62) 0%, rgba(14,34,56,.25) 28%, rgba(14,34,56,0) 50%),
    linear-gradient(90deg, rgba(14,34,56,.35) 0%, rgba(14,34,56,.02) 55%, rgba(14,34,56,0) 100%);
}
@media (max-width: 760px) {
  .page-hero--tall { min-height: 460px; }
  .page-hero--tall .page-hero__media::after {
    background: linear-gradient(0deg, rgba(14,34,56,.85) 0%, rgba(14,34,56,.45) 50%, rgba(14,34,56,.1) 100%);
  }
}

/* Anchors to full-bleed bands (the form, the home's #terapie / #recensioni) stop AT the
   header, not 16px below it: the 16px of breathing room suits a heading, but above a
   coloured band it shows as a thin strip of the previous section. 1px tucked under the
   header so a subpixel section position can never leave a hairline either. */
.contact-cta[id], .section[id] { scroll-margin-top: calc(var(--sticky-h) - 1px); }