/* =====================================================================
   Dott.ssa Elisa Pichler — design system
   Palette, type scale and shapes ported from the reference design.
   Hand-written CSS: no framework, no build step, ~10 KB.
   ===================================================================== */

:root {
  /* colour ------------------------------------------------------------ */
  --cream:        oklch(0.985 0.012 90);
  --card:         oklch(1 0 0);
  --ink:          oklch(0.22 0.03 240);
  --muted:        oklch(0.48 0.03 240);
  --border:       oklch(0.90 0.02 220);

  --brand:        oklch(0.72 0.12 220);
  --brand-soft:   oklch(0.92 0.05 215);
  --brand-deep:   oklch(0.32 0.08 225);
  --leaf:         oklch(0.74 0.17 135);
  --leaf-soft:    oklch(0.94 0.06 135);

  --on-brand:     oklch(0.99 0.005 95);
  --danger:       oklch(0.55 0.20 27);

  /* shape & type ------------------------------------------------------ */
  --radius:       1rem;
  --radius-lg:    1.5rem;
  --radius-xl:    2rem;
  --wrap:         1280px;
  --wrap-narrow:  760px;
  /* the page's side gutter. Named so a full-bleed swipe rail can cancel it
     with a negative margin and stay in step with .wrap */
  --gutter:       24px;
  --header-h:     65px;

  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;

  --shadow-sm:    0 1px 2px oklch(0.22 0.03 240 / .06);
  --shadow-md:    0 8px 24px oklch(0.22 0.03 240 / .08);
  --shadow-lg:    0 20px 50px oklch(0.22 0.03 240 / .12);
}

/* Page theme: the Amati page uses the lilac from her DCA posts. Swapping
   the accent variable carries it through every small accent on the page --
   eyebrows, rules, icons, the pull quote -- without a second set of rules. */
.theme-plum {
  --leaf:      oklch(0.66 0.17 322);
  --leaf-soft: oklch(0.94 0.06 322);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 800px) { body { font-size: 17px; line-height: 1.7; } }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--brand-deep);
  margin: 0;
}
h1 { font-size: clamp(1.95rem, 1.2rem + 3.6vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 2.4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }

p { margin: 0 0 1em; }
@media (min-width: 800px) { p { margin-bottom: 1.1em; } }
/* keep running text to a comfortable measure instead of the full column */
.split-copy p, .prose p, .spec-body p { max-width: 38rem; }
strong { font-weight: 600; color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }

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

/* for text that only a screen reader needs, e.g. the brand's "torna alla home" */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-deep); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.ico { width: 1.25rem; height: 1.25rem; flex: none; }

/* eyebrow ------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: var(--leaf); margin: 0 0 .9rem;
}
.eyebrow-pill {
  background: var(--leaf-soft); border-radius: 999px;
  padding: .45rem .9rem; letter-spacing: .12em;
}
.eyebrow-pill .dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--leaf); }

/* buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  border-radius: 999px; padding: .9rem 1.75rem;
  font-size: .92rem; font-weight: 600; font-family: var(--font-sans);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease,
              color .18s ease, box-shadow .18s ease;
}
.btn .ico { width: 1rem; height: 1rem; transition: transform .18s ease; }
.btn:hover .ico { transform: translateX(3px); }

.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--brand-deep); color: var(--on-brand); transform: translateY(-2px); }

.btn-outline { border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: var(--on-brand); }

.btn-ghost { color: var(--ink); padding-left: .5rem; padding-right: .5rem; }
.btn-ghost:hover { color: var(--brand); }

.btn-cream { background: var(--cream); color: var(--brand-deep); box-shadow: var(--shadow-lg); }
.btn-cream:hover { color: var(--brand-deep); transform: translateY(-2px); }

/* ===================== header ========================================
   Two controls only: the brand, which is the way back to the home page from
   anywhere, and Prenota, which is the one thing a visitor is here to do.
   No nav and no hamburger -- the footer carries the full set of links.
   ==================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: oklch(0.985 0.012 90 / .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(0.90 0.02 220 / .6);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px;
}
@media (min-width: 800px) {
  :root { --header-h: 79px; }
  .header-inner { min-height: 78px; }
}

.brand { display: inline-flex; align-items: center; gap: .65rem; flex: none; min-width: 0; }
/* The way back sits under the header, at the top of the page itself, rather
   than competing with the brand and the Prenota button inside the bar. Every
   page but the home page carries it. */
/* the way back opens the page hero, left-aligned against the centred title */
.back-home {
  display: inline-flex; align-items: center; gap: .25rem;
  margin: 0 auto .75rem -.45rem;
  padding: .3rem .6rem .3rem .35rem; border-radius: 999px;
  font-size: .85rem; font-weight: 500; color: var(--muted);
  transition: color .15s ease, background .15s ease;
}
.back-home .ico { width: 1rem; height: 1rem; }
.back-home:hover { color: var(--brand-deep); background: oklch(0.92 0.05 215 / .5); }
/* the hero is centre-aligned; this one item is not */
.page-hero .wrap { display: flex; flex-direction: column; align-items: center; }
.page-hero .back-home { align-self: flex-start; }
.brand-mark { display: block; flex: none; }
.brand img { height: 34px; width: auto; display: block; }
@media (min-width: 800px) { .brand img { height: 44px; } }

.brand-text { line-height: 1.15; min-width: 0; }
.brand-name {
  display: block; font-family: var(--font-display); font-size: .98rem;
  color: var(--brand-deep); letter-spacing: -0.01em; line-height: 1.15;
}
@media (min-width: 800px) { .brand-name { font-size: 1.05rem; } }
.brand-role {
  display: block; font-size: .58rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--leaf); margin-top: .1rem;
}
/* the role line is the first thing to go when the bar gets tight */
@media (max-width: 380px) { .brand-role { display: none; } }

/* the header CTA is never hidden: it is the point of the bar */
.header-cta { flex: none; padding: .6rem 1.1rem; font-size: .92rem; }
@media (min-width: 800px) { .header-cta { padding: .75rem 1.5rem; font-size: 1rem; } }

/* ---- desktop navigation --------------------------------------------
   Desktop has room for the full set of links. On a phone it is hidden
   outright -- no hamburger: the brand goes home, Prenota is the one action,
   and the footer carries every link.
   -------------------------------------------------------------------- */
.primary-nav { display: none; }
@media (min-width: 1100px) {
  .primary-nav { flex: 1; display: flex; justify-content: center; }
}
.primary-nav > ul { display: flex; align-items: center; gap: 2.25rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a, .nav-trigger {
  font-size: .92rem; font-weight: 500; color: oklch(0.22 0.03 240 / .88);
  background: none; border: 0; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem 0;
}
.primary-nav a:hover, .nav-trigger:hover,
.primary-nav a[aria-current="page"],
.has-sub.is-current > .nav-trigger { color: var(--brand); }
.nav-trigger .chev { width: .85rem; height: .85rem; transition: transform .2s ease; }

.has-sub { position: relative; }
.sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: .75rem; opacity: 0; visibility: hidden; transition: opacity .18s ease;
}
.sub-inner {
  min-width: 19rem; padding: .6rem; border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
/* .force-open is set by main.js when the trigger is clicked, for anyone
   driving the menu by keyboard or a device without hover */
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.force-open .sub { opacity: 1; visibility: visible; }
.has-sub:hover .chev, .has-sub:focus-within .chev, .has-sub.force-open .chev { transform: rotate(180deg); }
.sub a { display: block; border-radius: var(--radius); padding: .7rem 1rem; }
.sub a:hover, .sub a[aria-current="page"] { background: oklch(0.92 0.05 215 / .45); }
.sub-label { display: block; font-size: .88rem; font-weight: 600; color: var(--brand-deep); }
.sub-desc  { display: block; font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.sub-rule { display: block; height: 1px; background: var(--border); margin: .4rem 1rem; }

/* ===================== sections ====================================== */
.section { padding: 3.25rem 0; position: relative; }
@media (min-width: 800px) { .section { padding: 5rem 0; } }
@media (min-width: 1100px) { .section { padding: 7rem 0; } }
.section-tint { background: oklch(1 0 0 / .4); }
.section-head { max-width: 40rem; margin-bottom: 2rem; }
@media (min-width: 800px) { .section-head { margin-bottom: 3rem; } }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-lead { font-size: 1.02rem; color: var(--muted); margin: .9rem 0 0; }
@media (min-width: 800px) { .section-lead { font-size: 1.1rem; margin-top: 1.1rem; } }

/* decorative blurred blobs */
.blob-bg { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; }
.blob-a { width: 34rem; height: 34rem; background: var(--leaf-soft); opacity: .6; top: -10rem; right: -8rem; }
.blob-b { width: 30rem; height: 30rem; background: var(--brand-soft); opacity: .7; bottom: -10rem; left: -6rem; }
.section > .wrap { position: relative; z-index: 1; }
@media (max-width: 799px) {
  .blob-a { width: 20rem; height: 20rem; opacity: .38; top: -7rem; right: -7rem; }
  .blob-b { width: 17rem; height: 17rem; opacity: .4; bottom: -7rem; left: -6rem; }
  .hero-glow { inset: 2.5rem; filter: blur(46px); opacity: .55; }
}

/* ---- hero ----------------------------------------------------------- */
.hero { overflow: hidden; padding: 1.25rem 0 2.25rem; }
@media (max-width: 799px) {
  .hero {
    min-height: calc(100dvh - var(--header-h));
    display: grid; align-content: center;
    padding-block: 1rem 1.5rem;
  }
}
@media (min-width: 800px) { .hero { padding: 4rem 0 6rem; } }
@media (min-width: 1100px) { .hero { padding: 6rem 0 8rem; } }
.hero-grid { display: grid; gap: 1.1rem; align-items: center; }
@media (min-width: 800px) { .hero-grid { gap: 3rem; } }
@media (min-width: 1100px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
/* the photo leads at every width: the page opens on her face, copy follows */
.hero-media { order: 1; }
.hero-copy  { order: 2; }

.hero-copy h1 { margin-top: .9rem; }
@media (min-width: 800px) { .hero-copy h1 { margin-top: 1.4rem; } }
.hero-copy h1 em { font-style: normal; color: var(--brand); }
.hero-lead { font-size: 1rem; color: var(--muted); max-width: 32rem; margin: .85rem 0 0; }
@media (min-width: 800px) { .hero-lead { font-size: 1.15rem; margin-top: 1.5rem; } }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.15rem; }
@media (min-width: 800px) { .hero-actions { margin-top: 2.25rem; } }
/* Tablets stack the hero with the photo centred above; copy flush left
   under it reads lopsided, so it follows the photo onto the axis. Phones
   keep the left edge -- there the column is the full screen anyway. */
@media (min-width: 600px) and (max-width: 1099px) {
  .hero-copy { text-align: center; max-width: 40rem; margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
}

.hero-figure {
  position: relative; width: 100%; margin: 0 auto; aspect-ratio: 1;
  /* whichever is smaller: a third of the screen's height, or the column */
  max-width: min(19rem, 31dvh);
}
@media (min-width: 800px) { .hero-figure { max-width: 28rem; } }
@media (max-width: 799px) and (max-height: 740px) {
  .hero-figure { max-width: min(14rem, 25dvh); }
  .hero-grid { gap: .7rem; }
  .hero-copy h1 { font-size: 1.7rem; margin-top: .65rem; }
  .hero-lead { font-size: .94rem; margin-top: .6rem; }
  .hero-actions { margin-top: .85rem; }
  .hero-glow { opacity: .4; }
}
@media (min-width: 1100px) { .hero-figure { max-width: none; } }
/* soft leaf-tinted glow behind the photo */
.hero-glow {
  position: absolute; inset: 1rem; border-radius: 50%;
  background: var(--leaf-soft); filter: blur(34px); opacity: .85;
}
.hero-figure picture, .hero-figure img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-figure img {
  object-fit: contain;
  filter: drop-shadow(0 22px 40px oklch(0.22 0.03 240 / .18));
}
.brand picture, .footer-brand picture { display: block; }
.float-card {
  position: absolute; display: flex; align-items: center; gap: .65rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: .7rem .9rem; font-size: .78rem; z-index: 2;
}
.float-card .badge-ico {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: .75rem; flex: none;
}
.float-card.float-tr { top: 1.5rem; right: -.5rem; }
.float-card.float-tr .badge-ico { background: var(--leaf-soft); color: var(--leaf); }
.float-card.float-bl { bottom: 2.5rem; left: -.5rem; }
.float-card.float-bl .badge-ico { background: var(--brand-soft); color: var(--brand-deep); }
@media (min-width: 1100px) {
  .float-card.float-tr { right: 1.5rem; }
  .float-card.float-bl { left: 1rem; }
}
.float-card b { display: block; font-weight: 600; color: var(--ink); }
.float-card span { color: var(--muted); }
@media (max-width: 799px) {
  .float-card { padding: .35rem .55rem; font-size: .58rem; border-radius: .7rem; gap: .35rem; }
  .float-card .badge-ico { width: 1.25rem; height: 1.25rem; border-radius: .4rem; }
  .float-card .badge-ico .ico { width: .8rem; height: .8rem; }
  .float-card b { line-height: 1.2; }
  .float-card.float-tr { top: .25rem; right: -2.25rem; }
  .float-card.float-bl { bottom: .75rem; left: -2.25rem; }
}

/* ---- page hero ------------------------------------------------------ */
.page-hero { overflow: hidden; padding: clamp(1.5rem, 1rem + 4vw, 5.5rem) 0 clamp(2rem, 1rem + 3vw, 3.5rem); text-align: center; }
.page-hero .wrap { max-width: 56rem; }
.page-hero h1 { margin-top: .5rem; }
.page-hero h1 em { font-style: normal; color: var(--brand); }
.page-hero .intro {
  font-size: 1rem; color: var(--muted); max-width: 30rem; margin: 1.1rem auto 0;
}
@media (min-width: 800px) {
  .page-hero .intro { font-size: 1.12rem; max-width: 38rem; margin-top: 1.5rem; }
}
.page-hero .intro-tagline {
  font-size: 1rem; color: var(--muted); max-width: 30rem; margin: .8rem auto 0;
}
@media (min-width: 800px) {
  .page-hero .intro-tagline { font-size: 1.12rem; max-width: 38rem; margin-top: 1.15rem; }
}
.page-hero .hero-actions { justify-content: center; }

/* the facts a visitor checks before reading anything: how long, where, what
   they get. One quiet line of middot-separated items -- no pills, no cards,
   at every width, so it reads as a caption under the lead rather than as UI. */
.hero-facts {
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
  gap: 0; list-style: none; margin: 1.45rem 0 .55rem; padding: 0;
}
.hero-facts li {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 500; color: var(--muted); white-space: nowrap;
}
.hero-facts li + li::before {
  content: "\00b7"; margin: 0 .45rem; color: var(--border); font-weight: 700;
}
.hero-facts .ico { width: .85rem; height: .85rem; flex: none; color: var(--brand); }
@media (min-width: 800px) {
  .hero-facts { margin: 1.8rem 0 .7rem; }
  .hero-facts li { font-size: .84rem; gap: .35rem; }
  .hero-facts li + li::before { margin: 0 .75rem; }
  .hero-facts .ico { width: .95rem; height: .95rem; }
}

blockquote.pull {
  margin: 2.5rem auto 0; max-width: 40rem; padding: 1.5rem 1.75rem;
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--leaf); border-radius: var(--radius);
  text-align: left; box-shadow: var(--shadow-sm);
}
blockquote.pull p { font-family: var(--font-display); font-size: 1.15rem; color: var(--brand-deep); margin: 0; }
blockquote.pull cite { display: block; margin-top: .6rem; font-size: .85rem; font-style: normal; color: var(--muted); }

/* ---- split (photo + copy) ------------------------------------------- */
.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1100px) {
  .split { grid-template-columns: 2fr 3fr; gap: 4rem; }
}
.split-photo { position: relative; width: min(15rem, 70%); aspect-ratio: 1; margin: 0 auto; }
@media (min-width: 800px) { .split-photo { width: min(24rem, 100%); } }
/* the blue disc is drawn here, so the portrait can bleed past its edge */
.split-photo::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--brand);
}
/* dashed leaf ring, sitting just outside the circle */
.split-photo::after {
  content: ""; position: absolute; inset: -1rem; border-radius: 50%;
  border: 2px dashed oklch(0.74 0.17 135 / .4); pointer-events: none;
}
.split-photo picture, .split-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.split-photo img {
  object-fit: contain; object-position: bottom center; scale: .98;
  transform-origin: bottom center;
  filter: drop-shadow(0 14px 26px oklch(0.22 0.03 240 / .18));
}
/* Square cutout inside a circular frame: scale down slightly and nudge
   downward so there is a little headroom above her head. */
.split-copy p:not(.eyebrow) { color: oklch(0.22 0.03 240 / .82); }

/* Rounded blue panel holding the portrait. The panel is a pseudo-element so
   it can sit slightly off-axis while the photo stays perfectly upright, and
   it stops short of the bottom so her shoulders bleed past the edge. */
.split-panel {
  position: relative; width: min(17rem, 76%); margin: 0 auto;
  aspect-ratio: 1 / 1.06;
}
@media (min-width: 800px) { .split-panel { width: min(26rem, 100%); } }
.split-panel::before {
  content: ""; position: absolute; inset: 0 0 7% 0;
  background: var(--brand-soft); border-radius: 2.25rem;
  rotate: -1.4deg;
}
.split-panel picture, .split-panel img { position: absolute; inset: 0; width: 100%; height: 100%; }
.split-panel img {
  object-fit: contain; object-position: bottom center; scale: 1.1;
  transform-origin: bottom center;
  filter: drop-shadow(0 16px 30px oklch(0.22 0.03 240 / .16));
}
.split-panelled { align-items: center; }
@media (min-width: 1100px) {
  .split-panelled { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.split-copy .btn { margin-top: 1rem; }
/* same as the specialties: stacked under the photo, the copy column sits
   on the photo's axis instead of hugging the left gutter */
@media (max-width: 1099px) {
  .split-copy { width: 100%; max-width: 38rem; margin-inline: auto; }
}

/* ---- cards (percorsi) ----------------------------------------------- */
.card-grid { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.percorso {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.percorso:hover {
  transform: translateY(-4px); border-color: oklch(0.72 0.12 220 / .45);
  box-shadow: var(--shadow-lg);
}
.percorso .badge-ico {
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem;
  border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-deep);
  transition: background-color .25s ease, color .25s ease;
}
.percorso .badge-ico .ico { width: 1.5rem; height: 1.5rem; }
.percorso:hover .badge-ico { background: var(--brand); color: var(--on-brand); }
.percorso h3 { margin-top: 1.5rem; }

/* The bioimpedenziometria is not a fourth percorso, so it does not get a
   fourth card: a rule sets it apart and it reads as one quiet row. */
.card-extra { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.percorso-extra {
  flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem 1.15rem;
  background: none; border: 0; box-shadow: none; padding: .75rem 3rem;
}
.percorso-extra:hover { transform: none; box-shadow: none; border: 0; }
.percorso-extra > div { flex: 1 1 16rem; }
.percorso-extra .badge-ico { width: 2.6rem; height: 2.6rem; flex: none; }
.percorso-extra .badge-ico .ico { width: 1.2rem; height: 1.2rem; }
.percorso-extra h3 { margin: 0; font-size: 1.05rem; }
.percorso-extra p { margin: .25rem 0 0; font-size: .9rem; flex: none; }
.percorso-extra .more { margin-top: 0; flex: none; }
.percorso p { margin: .75rem 0 0; font-size: .95rem; color: var(--muted); flex: 1; }
.percorso .more {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.75rem; font-size: .9rem; font-weight: 600; color: var(--brand);
}
.percorso .more .ico { width: 1rem; height: 1rem; transition: transform .2s ease; }
.percorso:hover .more .ico { transform: translateX(4px); }

/* ---- ideal-for / pillars -------------------------------------------- */
.ideal-grid { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .ideal-grid { grid-template-columns: 1fr 1fr; } }
.ideal-item {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.4rem;
  transition: border-color .2s ease;
}
.ideal-item:hover { border-color: oklch(0.72 0.12 220 / .45); }
.ideal-item .badge-ico {
  display: grid; place-items: center; width: 3rem; height: 3rem; flex: none;
  border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-deep);
}
.ideal-item p { margin: 0; color: oklch(0.22 0.03 240 / .85); }

/* On a phone eight stacked cards was most of a screen each. Two rows that
   scroll sideways together put four in view instead of one. Declared after
   the base card rules so the compact sizing wins. */
@media (max-width: 799px) {
  .ideal-grid {
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: min(72vw, 20rem);
    gap: .7rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-bottom: .25rem;
  }
  .ideal-grid::-webkit-scrollbar { display: none; }
  .ideal-grid > * { scroll-snap-align: start; }
  .ideal-item { padding: .85rem .95rem; gap: .7rem; border-radius: var(--radius); }
  .ideal-item .badge-ico { width: 2.1rem; height: 2.1rem; border-radius: .6rem; }
  .ideal-item .badge-ico .ico { width: 1.1rem; height: 1.1rem; }
  .ideal-item p { font-size: .88rem; line-height: 1.45; }
}

.pillars { display: grid; gap: 1.25rem; }
@media (max-width: 799px) { .pillars { --rail-card: min(66vw, 18.5rem); } }
@media (min-width: 800px) {
  .pillars.is-rail {
    display: grid; grid-template-columns: repeat(4, 1fr); overflow-x: visible;
    scroll-snap-type: none; margin-inline: 0; padding-inline: 0;
    padding-bottom: 0; gap: 1.25rem;
  }
  .pillars.is-rail > * { flex: initial; scroll-snap-align: none; }
}
.pillar {
  text-align: center; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.25rem 1.5rem;
  transition: border-color .2s ease, transform .2s ease;
}
.pillar:hover { border-color: oklch(0.74 0.17 135 / .45); transform: translateY(-2px); }
.pillar p { margin: .6rem 0 0; font-size: .86rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 719px) {
  .pillar { padding: 1.35rem 1.1rem; border-radius: var(--radius); }
  .pillar p { font-size: .84rem; margin-top: .45rem; }
}
.pillar .badge-ico {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
  border-radius: var(--radius); background: var(--leaf-soft); color: var(--leaf);
}
.pillar .badge-ico .ico { width: 1.6rem; height: 1.6rem; }
.pillar h3 { font-size: 1.15rem; }

/* ---- review quotes under the pillars -------------------------------- */
.pillar-quotes { margin-top: 3.5rem; }
.pq-intro {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin: 0 0 1.4rem; font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.pq-num {
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  letter-spacing: 0; line-height: 1.2; color: var(--brand-deep);
}
.pq-intro:hover { color: var(--brand); }
.pq-intro .stars { color: #f5a623; }
.pq-intro .g-logo { vertical-align: -0.18em; }
.pq-intro .stars .star { width: .72rem; height: .72rem; }
.pq-intro .stars { gap: .05rem; }
.pq-grid { display: grid; gap: 1.1rem; }
@media (max-width: 799px) { .pq-grid { --rail-card: min(76vw, 21rem); } }
@media (min-width: 800px) {
  .pq-grid.is-rail {
    display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible;
    scroll-snap-type: none; margin-inline: 0; padding-inline: 0;
    padding-bottom: 0; gap: 1.1rem;
  }
  .pq-grid.is-rail > * { flex: initial; scroll-snap-align: none; }
}
@media (min-width: 1100px) { .pq-grid.is-rail { grid-template-columns: repeat(4, 1fr); } }
.pillar-quote {
  margin: 0; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.35rem 1.5rem;
  display: flex; flex-direction: column;
}
.pq-pillar {
  font-size: .64rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--leaf); margin-bottom: .6rem;
}
.pillar-quote p {
  margin: 0 0 .9rem; flex: 1;
  font-size: .9rem; line-height: 1.55; color: oklch(0.22 0.03 240 / .82);
}
.pillar-quote cite {
  font-style: normal; font-size: .82rem; font-weight: 600; color: var(--brand-deep);
}

/* ---- prose ---------------------------------------------------------- */
.prose { max-width: 46rem; }
.prose h3 { margin: 2rem 0 .75rem; }
.prose ul { list-style: none; margin: 0 0 1.4em; padding: 0; }
.prose ul li { position: relative; padding-left: 1.75rem; margin-bottom: .6em; }
.prose ul li::before {
  content: ""; position: absolute; left: .35rem; top: .72em;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--leaf);
}
/* The numbered steps are disclosures: the title is always visible, the detail
   opens on demand. `name` on <details> makes the browser close the others, so
   only one step is open at a time; the JS below covers browsers without it. */
.steps { list-style: none; counter-reset: s; margin: 1.4em 0 2em; padding: 0; }
.steps > li {
  counter-increment: s; position: relative; padding-left: 3rem;
  color: oklch(0.22 0.03 240 / .85);
  border-bottom: 1px solid var(--border);
}
.steps > li:last-child { border-bottom: 0; }
.steps > li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: .85rem;
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  color: var(--brand); background: var(--brand-soft);
  width: 2.1rem; height: 2.1rem; border-radius: .65rem;
  display: grid; place-items: center;
}
.step-title { font-weight: 600; color: var(--ink); }

/* a step with nothing more to say: no chevron, no interaction */
.step-plain { padding-block: 1.05rem; }

.step > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.05rem; cursor: pointer; list-style: none;
}
.step > summary::-webkit-details-marker { display: none; }
.step > summary:hover .step-title { color: var(--brand-deep); }
.step > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: .4rem; }
.step-chev {
  flex: none; width: 1.05rem; height: 1.05rem; color: var(--muted);
  transition: transform .2s ease;
}
.step[open] > summary .step-chev { transform: rotate(180deg); color: var(--brand); }
.step-body { padding-bottom: 1.1rem; font-size: .95rem; }
.step-body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .step[open] > .step-body { animation: step-open .22s ease both; }
  @keyframes step-open { from { opacity: 0; transform: translateY(-.25rem); } to { opacity: 1; transform: none; } }
}

@media (max-width: 799px) {
  .steps > li { padding-left: 2.3rem; }
  .steps > li::before { width: 1.65rem; height: 1.65rem; border-radius: .5rem; font-size: .72rem; top: .8rem; }
  .step > summary, .step-plain { padding-block: .85rem; }
  .step-title { font-size: .93rem; }
  .step-body { font-size: .9rem; padding-bottom: .9rem; }
}

.highlight {
  background: var(--leaf-soft); border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem; margin: 2rem 0 0;
}
.highlight p { margin: 0; color: var(--brand-deep); font-size: 1.05rem; }
/* when the highlight carries an action the button gets its own row under the
   text -- the sentence stays a full-width paragraph rather than a squeezed
   column next to a pill -- and sits flush with the right edge of the block */
.highlight .btn { margin-top: 1.25rem; }
.highlight.has-action { display: flex; flex-direction: column; align-items: flex-start; }
.highlight.has-action .btn { align-self: flex-end; }

/* ---- two-lists ------------------------------------------------------ */
.two-lists { display: grid; gap: 1.5rem; }
@media (max-width: 879px) { .two-lists { --rail-card: min(84vw, 23.5rem); } }
@media (min-width: 880px) {
  .two-lists.is-rail {
    display: grid; grid-template-columns: 1fr 1fr; overflow-x: visible;
    scroll-snap-type: none; margin-inline: 0; padding-inline: 0;
    padding-bottom: 0; gap: 1.5rem;
  }
  .two-lists.is-rail > * { flex: initial; scroll-snap-align: none; }
}
@media (max-width: 879px) {
  .list-card { padding: 1.35rem 1.4rem; }
  .list-card .badge-ico { width: 2.4rem; height: 2.4rem; margin-bottom: .85rem; }
  .list-card li { font-size: .89rem; margin-bottom: .7rem; }
}
.list-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 2rem;
}
.list-card .badge-ico {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: var(--radius); background: var(--leaf-soft); color: var(--leaf);
  margin-bottom: 1.1rem;
}
.list-card h3 { margin-bottom: 1rem; }
.list-card ul { list-style: none; margin: 0; padding: 0; }
.list-card li {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-bottom: .85rem; font-size: .95rem; color: var(--muted);
}
.list-card li .ico {
  width: 1.05rem; height: 1.05rem; flex: none; margin-top: .22em;
  color: var(--leaf);
}
.list-card li:last-child { margin-bottom: 0; }

/* ---- specialties (di che cosa mi occupo) -------------------------- */
/* Heading left, prose right -- one reading order, comfortable measure. */
.spec-split { display: grid; gap: 2rem; margin-bottom: 3.5rem; }
@media (min-width: 900px) {
  .spec-split { grid-template-columns: 1fr 1.55fr; gap: 4rem; align-items: start; }
  .spec-split.is-vcentred { align-items: center; }
}
.spec-aside h2 { margin-top: .25rem; }
.spec-body { max-width: 38rem; }
/* Stacked on a tablet the column is narrower than the wrap, so it sits
   centred rather than leaving a wide empty strip on the right. Text stays
   left-aligned inside it -- the steps and lists need a straight edge. The
   phone swipe body below overrides this to keep its full bleed. On a phone
   the column is wider than the screen, so otherwise nothing changes. */
@media (max-width: 899px) {
  .spec-aside, .spec-body { width: 100%; max-width: 38rem; margin-inline: auto; }
}
/* Three long paragraphs is most of a screen each on a phone. They slide
   sideways instead -- bare text, no card around them, one at a time.
   Opt-in, and only ever for a block of bare paragraphs: every direct child
   becomes a flex item, so a .spec-body that also holds an <ol class="steps">
   or a .highlight CTA -- the "come funziona" on the percorsi pages -- would
   have those laid out sideways too. Those keep .prose and stack normally.
   Not the global .is-rail, which is unscoped and would rail this on desktop
   as well; this treatment is for narrow screens only. */
@media (max-width: 799px) {
  .spec-body.is-swipe {
    display: flex; gap: 1.5rem; width: auto; max-width: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .spec-body.is-swipe::-webkit-scrollbar { display: none; }
  .spec-body.is-swipe > p { flex: 0 0 min(82vw, 23rem); scroll-snap-align: start; margin: 0; }
  .spec-body.is-swipe p:first-child { font-size: 1rem; }
}
.spec-body p { color: oklch(0.22 0.03 240 / .82); }
.spec-body p:first-child {
  font-size: 1.1rem; line-height: 1.65; color: oklch(0.22 0.03 240 / .9);
}
.spec-body p:last-child { margin-bottom: 0; }

.spec-sub {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--leaf);
  margin: 0 0 1.5rem;
}
/* the five areas of practice drift past rather than sitting in a grid */
.spec-card {
  height: 100%;
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 1.6rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.spec-card:hover {
  border-color: oklch(0.72 0.12 220 / .45); transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.spec-card .badge-ico {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: .8rem; background: var(--leaf-soft); color: var(--leaf);
}
.spec-card h3 { font-size: 1.05rem; }
@media (max-width: 799px) {
  .spec-card { padding: 1.1rem 1.2rem; gap: .8rem; border-radius: var(--radius-lg); }
  .spec-card .badge-ico { width: 2.1rem; height: 2.1rem; border-radius: .6rem; }
  .spec-card .badge-ico .ico { width: 1.1rem; height: 1.1rem; }
  .spec-card h3 { font-size: .95rem; }
  .spec-card p { font-size: .85rem; margin-top: .3rem; }
}
.spec-card p { margin: .45rem 0 0; font-size: .88rem; color: var(--muted); }
.spec-highlight { margin-top: 2.5rem; max-width: 52rem; }
.highlight.is-centred { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- timeline (il mio percorso) ---------------------------------- */
.tl-grid { display: grid; gap: 1.25rem; }
@media (max-width: 799px) { .tl-grid { --rail-card: min(74vw, 20.5rem); } }
@media (min-width: 800px) {
  .tl-grid.is-rail {
    display: grid; grid-template-columns: 1fr 1fr; overflow-x: visible;
    scroll-snap-type: none; margin-inline: 0; padding-inline: 0;
    padding-bottom: 0; gap: 1.25rem;
  }
  .tl-grid.is-rail > * { flex: initial; scroll-snap-align: none; }
}
.tl-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 1.75rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tl-card:hover {
  border-color: oklch(0.72 0.12 220 / .45); transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.tl-card .badge-ico {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: .8rem; background: var(--brand-soft); color: var(--brand-deep);
  margin-bottom: 1.1rem;
}
.tl-card h3 { font-size: 1.12rem; }
.tl-card p { margin: .6rem 0 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 799px) {
  .tl-card { padding: 1.15rem 1.2rem; border-radius: var(--radius-lg); }
  .tl-card .badge-ico { width: 2.2rem; height: 2.2rem; border-radius: .6rem; margin-bottom: .75rem; }
  .tl-card .badge-ico .ico { width: 1.15rem; height: 1.15rem; }
  .tl-card h3 { font-size: 1rem; }
  .tl-card p { font-size: .86rem; margin-top: .45rem; }
}

/* ---- CTA band ------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--brand); color: var(--on-brand);
  border-radius: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  display: grid; gap: 2rem; align-items: center;
}
@media (min-width: 1100px) { .cta-band { grid-template-columns: 3fr 2fr; } }
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(50px);
}
.cta-band::before { width: 18rem; height: 18rem; background: oklch(1 0 0 / .18); top: -6rem; right: -4rem; }
.cta-band::after  { width: 20rem; height: 20rem; background: var(--leaf); opacity: .3; bottom: -8rem; left: -4rem; }
/* the closing band keeps the site's own palette whatever the page theme is:
   a lilac glow over the brand blue just turned it muddy */
.theme-plum .cta-band { --leaf: oklch(0.74 0.17 135); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--on-brand); }
.cta-band .eyebrow {
  color: oklch(1 0 0 / .72);
  font-size: .6rem; letter-spacing: .2em; margin-bottom: .7rem;
}
.cta-band p { color: oklch(1 0 0 / .88); margin: 1.1rem 0 0; max-width: 34rem; }
.cta-band strong { color: var(--on-brand); }
/* compact variant: a short, quieter invitation rather than a full band */
.cta-band.cta-compact {
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem) clamp(1.9rem, 1.4rem + 2.5vw, 3.5rem);
  border-radius: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  gap: 1.5rem;
}
@media (min-width: 1100px) { .cta-band.cta-compact { grid-template-columns: 1fr auto; } }
.cta-band.cta-compact h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); }
.cta-band.cta-compact p { margin-top: .7rem; font-size: .98rem; max-width: 40rem; }
.cta-band.cta-compact .eyebrow { font-size: .58rem; margin-bottom: .5rem; }
.cta-band.cta-compact::before { width: 12rem; height: 12rem; top: -4rem; right: -3rem; }
.cta-band.cta-compact::after  { width: 13rem; height: 13rem; bottom: -5rem; left: -3rem; }

.cta-band.cta-inline { margin-top: 2.5rem; }
@media (min-width: 800px) { .cta-band.cta-inline { margin-top: 4.5rem; } }
.cta-band.cta-inline h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); color: var(--on-brand);
  letter-spacing: -0.02em; line-height: 1.15;
}

/* the reassurance sits under the band, in ordinary text */
.cta-note {
  margin: 1.5rem auto 0; max-width: 40rem; text-align: center;
  font-size: .85rem; line-height: 1.5; color: oklch(0.48 0.03 240 / .8);
}
@media (min-width: 800px) { .cta-note { margin-top: 2rem; font-size: .9rem; } }
.cta-note a {
  font-weight: 500; color: inherit;
  text-decoration: underline; text-decoration-color: oklch(0.72 0.12 220 / .5);
  text-underline-offset: .2em;
}
.cta-note a:hover { color: var(--brand-deep); text-decoration-color: currentColor; }

/* her photograph beside the invitation, framed as a disc with a thin light
   ring so it sits cleanly on the brand blue; the file is already cropped to
   a square around the face, so the image just fills it */
.cta-face {
  align-self: center; justify-self: start;
  width: clamp(5.5rem, 4rem + 4.5vw, 7.5rem); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: oklch(1 0 0 / .2); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .25);
}
.cta-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1100px) {
  .cta-band.has-face { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.cta-band .cta-action { justify-self: stretch; }
@media (min-width: 560px)  { .cta-band .cta-action { justify-self: center; } }
@media (min-width: 1100px) { .cta-band .cta-action { justify-self: end; } }
.cta-band .cta-action .btn { width: 100%; justify-content: center; }
@media (min-width: 560px) { .cta-band .cta-action .btn { width: auto; } }

/* Until the band goes side by side it is one stacked column -- photo,
   words, button -- and it reads as one only on a shared centre line. */
@media (max-width: 1099px) {
  .cta-band { text-align: center; justify-items: center; }
  .cta-band p { margin-inline: auto; }
  .cta-band .eyebrow { justify-content: center; }
  .cta-face { justify-self: center; }
}
@media (max-width: 559px) {
  .cta-band { gap: 1.25rem; }
  .cta-note { margin-top: 1.75rem; }
}

/* ---- contact ladder (/prenota) -------------------------------------- */
/* One obvious way to get in touch, one fallback under it, then the quiet
   ones as small chips. Size and colour carry the ranking, so nobody has to
   read the page to know which one to press. */
/* the /prenota sections sit close together: the page is a short list of
   choices, and full section padding pushed the form a screen away */
.section-tight { padding: clamp(2rem, 1rem + 2vw, 3rem) 0; }
.ladder { max-width: 33rem; margin-inline: auto; }
.ladder-actions { display: grid; gap: .75rem; grid-auto-rows: 1fr; }

.wa-cta, .call-cta {
  display: flex; align-items: center; gap: 1rem;
  border-radius: var(--radius-xl); padding: 1.15rem 1.35rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.act-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.act-text strong { font-weight: 600; font-size: 1.08rem; line-height: 1.25; color: inherit; }
.act-text > span { font-size: .87rem; line-height: 1.35; }
.act-go { flex: none; display: grid; place-items: center; opacity: .85; }
.act-go .ico { width: 1.15rem; height: 1.15rem; }

/* WhatsApp green, with the official mark: the one button nobody has to
   think about */
.wa-cta {
  background: oklch(0.63 0.15 151); color: #fff;
  box-shadow: 0 10px 24px oklch(0.63 0.15 151 / .28);
}
.wa-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px oklch(0.63 0.15 151 / .34); }
.wa-cta .act-text > span { color: oklch(1 0 0 / .85); }
/* The mark is a small stack: the channel's icon in front, Elisa's face
   tucked in behind it. It says who is on the other end of the button. */
/* the face overhangs the icon to the right, so the flex gap alone would be
   measured from the icon and the text would sit almost against her photo.
   This margin pushes the gap out to start past the overhang. */
.act-mark { position: relative; flex: none; width: 2.9rem; height: 2.9rem; margin-right: .9rem; }
.act-mark > .wa-mark, .act-mark > .badge-ico { position: relative; z-index: 1; }
.act-face {
  position: absolute; right: -.8rem; top: -.55rem; z-index: 0;
  width: 2.05rem; height: 2.05rem; border-radius: 50%; overflow: hidden;
  background: var(--card);
}
.act-face picture, .act-face img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* a ring in the button's own colour, so the two circles read as separate */
.wa-cta .act-face { box-shadow: 0 0 0 2px oklch(0.63 0.15 151); }
/* on the white card a white ring alone would disappear, so a hairline
   follows it and keeps the disc readable */
.call-cta .act-face { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--border); }

.wa-mark {
  flex: none; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: #fff; color: oklch(0.63 0.15 151);
}
.wa-mark .ico { width: 1.6rem; height: 1.6rem; }

.call-cta {
  color: var(--ink);
  background: var(--card); border: 1px solid var(--border);
}
.call-cta:hover { border-color: oklch(0.72 0.12 220 / .5); transform: translateY(-2px); }
.call-cta .act-text > span { color: var(--muted); }
.call-cta .badge-ico {
  flex: none; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-deep);
}
.call-cta .badge-ico .ico { width: 1.3rem; height: 1.3rem; }
.call-cta .act-go { color: var(--muted); }

/* a rule with the label sitting in it */
.ladder-or {
  display: flex; align-items: center; gap: 1rem;
  margin: 2rem 0 1rem; color: var(--muted);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.ladder-or::before, .ladder-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

.copy-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.copy-chips li { flex: 1 1 14rem; }
.chip {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .7rem .9rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--ink);
  font-size: .96rem; transition: border-color .2s ease, background-color .2s ease;
}
.chip .ico { flex: none; width: 1.1rem; height: 1.1rem; color: var(--muted); }
.chip-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-hint {
  flex: none; font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.chip:hover { border-color: oklch(0.72 0.12 220 / .5); background: var(--brand-soft); }
.chip.is-copied { border-color: var(--leaf); background: var(--leaf-soft); }
.chip.is-copied .copy-hint { color: var(--leaf); }

/* ---- the form, folded away ------------------------------------------ */
.form-fold {
  /* wider than the ladder above it: the paired fields need the room, and the
     fold reads as a different kind of thing rather than a fourth choice */
  max-width: 44rem; margin-inline: auto;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card); overflow: hidden;
}
.form-fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem clamp(1.35rem, .9rem + 1.6vw, 2.25rem); cursor: pointer; list-style: none;
  font-weight: 600; font-size: .98rem; color: var(--brand-deep);
}
.form-fold > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .form-fold > summary:hover { background: var(--brand-soft); }
}
.form-fold > summary:focus { outline: none; }
.form-fold > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.form-fold > summary .chev {
  flex: none; width: 1.1rem; height: 1.1rem; color: var(--muted);
  transition: transform .2s ease;
}
.form-fold[open] > summary .chev { transform: rotate(180deg); }
.form-fold[open] > summary { border-bottom: 1px solid var(--border); }
.form-fold-body { padding: 1.75rem clamp(1.35rem, .9rem + 1.6vw, 2.25rem) 2rem; }
.fold-intro { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.4rem; }
.fold-face {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  overflow: hidden; background: var(--brand-soft);
  box-shadow: 0 0 0 1px var(--border);
}
.fold-face picture, .fold-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.form-fold-body .fold-intro .section-lead { margin: 0; }
.form-fold-body .section-lead {
  margin: 0 0 1.4rem; font-size: .92rem; color: var(--muted); text-align: left;
}
.form-fold-body .form-card { background: none; border: 0; padding: 0; box-shadow: none; }

/* ---- studios: locations left, photo stack right ---------------------- */
.studios-split { display: grid; gap: 1.5rem; align-items: center; }
/* photo first, the three addresses under it -- you recognise the room before
   you read the street */
.studios-split .carousel.shots { order: 1; }
.studios-split .studio-list { order: 2; }
@media (min-width: 900px) {
  .studios-split { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .studios-split .carousel.shots { order: 2; }
  .studios-split .studio-list { order: 1; }
}

/* left: the three locations as white cards, one under the other */
.studio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.studio-row {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.4rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.studio-row:hover {
  border-color: oklch(0.72 0.12 220 / .45); transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.studio-row .badge-ico {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: .75rem; background: var(--brand-soft); color: var(--brand-deep);
}
.studio-row .badge-ico .ico { width: 1.1rem; height: 1.1rem; }
.studio-row h3 { font-size: 1.12rem; }
/* the practice she works out of, under the town and above the street */
.studio-name { margin: .15rem 0 0; font-size: .95rem; font-weight: 600; color: var(--brand); }
.studio-addr { margin: .2rem 0 0; font-size: .92rem; color: var(--muted); }
.studio-days { margin: .15rem 0 0; font-size: .82rem; font-weight: 500; color: var(--leaf); }
.studio-row .maps {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .5rem; font-size: .84rem; font-weight: 600;
}
.studio-row .maps .ico { width: 1rem; height: 1rem; transition: transform .2s ease; }
.studio-row .maps:hover .ico { transform: translateX(3px); }

/* ---- shared carousel (studio photos + reviews) ----------------------- */
.carousel { position: relative; }
.car-track {
  display: flex; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-item { scroll-snap-align: center; flex: 0 0 100%; }

.car-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1rem; }
.car-dot {
  width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 50%;
  background: oklch(0.32 0.08 225 / .25); cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.car-dot:hover { background: oklch(0.32 0.08 225 / .45); }
.car-dot[aria-current="true"] { width: 1.4rem; border-radius: 999px; background: var(--brand); }

/* dots for a plain rail: only meaningful while the rail actually scrolls */
.rail-dots { margin-top: 1.1rem; }
@media (min-width: 800px) { .rail-dots { display: none; } }

@media (prefers-reduced-motion: reduce) { .car-track { scroll-behavior: auto; } }

/* --- variant: studio photos, one at a time --- */
.carousel.shots { width: 100%; max-width: 34rem; justify-self: center; }
.shots .car-track { border-radius: var(--radius-lg); background: var(--brand-soft); }
.shots .car-item { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.shots picture, .shots .car-item img { display: block; width: 100%; height: 100%; }
.shots .car-item img { object-fit: cover; }
.shot-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem .95rem .85rem; font-size: .82rem; font-weight: 500; color: #fff;
  background: linear-gradient(to top, oklch(0.22 0.03 240 / .72), transparent);
}

/* --- reviews: a slow, continuous marquee that pauses on hover --- */
.marquee {
  overflow: hidden; padding: .35rem 0;
  /* fade the quotes out at both edges instead of cutting them */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5rem,
                       #000 calc(100% - 5rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 5rem,
                       #000 calc(100% - 5rem), transparent);
}
/* 190s over a ~5400px half-track is roughly 29px/s -- a slow drift you can
   read alongside rather than a ticker. */
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-dur, 190s) linear infinite; }
.marquee-row {
  display: flex; align-items: stretch; gap: 1.25rem;
  list-style: none; margin: 0; padding: 0 .625rem;
}
.marquee-item { display: flex; }
/* each variant sets its own card width and a duration matched to how much
   track it has, so both drift at roughly the same speed */
.marquee.reviews { --marquee-dur: 190s; }
.marquee.reviews .marquee-item { flex: 0 0 min(20rem, 78vw); }
.marquee.specs { --marquee-dur: 70s; }
.marquee.specs .marquee-item { flex: 0 0 min(23rem, 82vw); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* pause when a visitor wants to read one */
/* Hover pause is for pointers only. A touch browser can leave :hover stuck on
   whatever was last tapped, which would freeze the strip with no way back --
   on touch the tap handler (.is-paused) is the only thing that stops it. */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
/* :focus-visible, not :focus-within. main.js gives the strip tabindex="0" so
   it can be tapped, and :focus-within would latch on that tap: the second tap
   clears .is-paused but the focus stays, so it could never be restarted.
   Keyboard focus still pauses it; a tap is handled by the toggle alone. */
.marquee:focus-visible .marquee-track { animation-play-state: paused; }

/* The reviews keep drifting on a phone -- this is the one thing on the page
   that moves by itself. Touch has no hover, so main.js makes a tap stop it;
   .is-paused is what that sets. */
.marquee.is-paused .marquee-track { animation-play-state: paused; }
@media (max-width: 799px) {
  .marquee {
    /* 5rem of mask on a 390px screen ate most of the card */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1rem,
                         #000 calc(100% - 1rem), transparent);
            mask-image: linear-gradient(to right, transparent, #000 1rem,
                         #000 calc(100% - 1rem), transparent);
  }
  .marquee-row { gap: .9rem; padding-inline: .45rem; }
  .marquee.reviews .marquee-item,
  .marquee.specs .marquee-item { flex: 0 0 min(17rem, 76vw); }
  /* On a phone the strips drift at half the desktop speed and cannot be
     stopped: a tap did nothing useful on a small screen but freeze it.
     main.js ignores the tap here too; this covers a pause set on a wider
     screen before a resize. */
  .marquee.reviews { --marquee-dur: 380s; }
  .marquee.specs { --marquee-dur: 140s; }
  .marquee.is-paused .marquee-track,
  .marquee:focus-visible .marquee-track { animation-play-state: running; }
}
/* a quiet hint that the drift can be stopped (not on a phone, where it can't) */
@media (min-width: 800px) { .marquee[data-marquee] { cursor: pointer; } }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
}

.review {
  height: 100%; margin: 0; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.35rem;
}
.review p { margin: .7rem 0 1rem; font-size: .89rem; color: oklch(0.22 0.03 240 / .85); flex: 1; }
.review footer { display: flex; align-items: baseline; gap: .6rem; }
.review cite { font-style: normal; font-weight: 600; color: var(--brand-deep); font-size: .88rem; }
.review footer span { font-size: .8rem; color: var(--muted); }

/* ---- instagram strip: faux post cards -------------------------------- */
.ig-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; margin-bottom: 2.25rem;
}
.ig-head .btn .ico { width: 1.05rem; height: 1.05rem; }
.ig-head .btn:hover .ico { transform: none; }

.ig-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ig-grid { grid-template-columns: repeat(4, 1fr); } }

/* Stacking these full-width costs several screens of scrolling for what is a
   browsable set, so on a phone they become swipe rails that bleed to both
   gutters -- the next card peeking is the affordance. Plain manual scrolling:
   nothing in a rail moves on its own. The shared shape lives in the .rail
   rules near the top of the file; this just switches the strip on. */
@media (max-width: 799px) { .ig-grid { --rail-card: min(78vw, 21.5rem); } }
@media (max-width: 799px) { .card-grid { --rail-card: min(76vw, 21rem); } }
@media (max-width: 899px) { .studio-list { --rail-card: min(20rem, 80vw); } }

.ig-post {
  /* a preview, not a link -- the hover lift stays, the pointer does not */
  display: flex; flex-direction: column; margin: 0; color: inherit;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ig-post:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: oklch(0.72 0.12 220 / .35);
}

/* header: avatar + handle */
.ig-bar { display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; }
.ig-avatar {
  width: 1.85rem; height: 1.85rem; border-radius: 50%; flex: none;
  object-fit: cover; object-position: center;
  border: 1px solid oklch(0.22 0.03 240 / .12);
}
.ig-handle { font-size: .82rem; font-weight: 600; color: var(--ink); }

/* media */
.ig-media { display: block; position: relative; background: var(--brand-soft); }
.ig-media picture { display: block; }
.ig-media img { display: block; width: 100%; height: auto; }

/* action row */
.ig-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem .8rem .35rem; color: var(--ink);
}
.ig-acts { display: inline-flex; gap: .7rem; }
.ig-actions .ico { width: 1.15rem; height: 1.15rem; }
.ig-post:hover .ig-acts .ico:first-child { color: #ed4956; }

/* caption, clamped like Instagram truncates it */
.ig-caption {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* the space below is a margin, not padding: this is a clamped -webkit-box,
     and clipped lines bleed into its padding instead of being cut above it */
  padding-inline: .8rem; margin-bottom: .95rem;
  font-size: .82rem; line-height: 1.45; color: oklch(0.22 0.03 240 / .82);
}
.ig-caption b { font-weight: 600; color: var(--ink); }
.ig-more { color: var(--muted); }

/* stars + rating badge */
.stars { display: inline-flex; gap: .1rem; color: #f5a623; }
/* Google mark sitting with the word, never recoloured.
   An inline-flex box baseline-aligns on its bottom edge, which drops the
   logo below the text. Keep it inline and offset it so its centre lands on
   the text's optical middle (~0.25em above the baseline). */
.g-mark { white-space: nowrap; }
.g-logo {
  display: inline-block; width: .95em; height: .95em;
  vertical-align: -0.22em; margin-right: .3em;
}
.star { width: .95rem; height: .95rem; flex: none; }
.reviews-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 2.5rem;
}
/* once the badge wraps onto its own line it is the only item on that line, so
   space-between leaves it at the left edge. An auto inline margin eats the
   free space on both sides and centres it. */
@media (max-width: 799px) {
  .reviews-head .rating-badge { margin-inline: auto; }
}
.rating-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: .6rem 1.1rem; color: inherit;
  white-space: nowrap;
  transition: border-color .2s ease, transform .2s ease;
}
.rating-badge:hover { border-color: oklch(0.72 0.12 220 / .45); transform: translateY(-1px); color: inherit; }
.rating-num { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; color: var(--brand-deep); }
.rating-meta { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; color: var(--muted); }
.rating-meta .ico { width: .9rem; height: .9rem; color: var(--brand); }
@media (max-width: 799px) {
  .rating-badge { gap: .4rem; padding: .5rem .75rem; }
  .rating-badge .stars { gap: .05rem; }
  .rating-badge .star { width: .78rem; height: .78rem; }
  .rating-num { font-size: 1rem; }
  .rating-meta { gap: .25rem; font-size: .7rem; }
  .rating-meta .ico { width: .78rem; height: .78rem; }
  .rating-meta .g-logo { width: .8rem; height: .8rem; }
}
/* narrowest phones: the pill is wider than the column, so there is nothing to
   centre until it fits */
@media (max-width: 359px) {
  .rating-badge { gap: .25rem; padding: .4rem .5rem; }
  .rating-badge .stars { gap: 0; }
  .rating-badge .star { width: .6rem; height: .6rem; }
  .rating-num { font-size: .8rem; }
  .rating-meta { gap: .15rem; font-size: .56rem; }
  .rating-meta .ico { width: .62rem; height: .62rem; }
  .rating-meta .g-logo { width: .62rem; height: .62rem; }
}

/* the same inline trust line, sitting just above a percorso's closing CTA:
   one row, no pill, no card -- it reassures without competing with the band */
.trust-line {
  display: flex; align-items: center; justify-content: center;
  gap: .45rem; flex-wrap: wrap; line-height: 1;
  margin: .75rem auto 1.75rem; color: inherit;
}
.trust-line .stars { color: #f5a623; }
.trust-line .star { width: .82rem; height: .82rem; }
.trust-line strong { font-family: var(--font-display); font-size: 1rem; color: var(--brand-deep); }
.trust-line .trust-meta { font-size: .8rem; color: var(--muted); line-height: 1; }
.trust-line .g-logo { width: .85rem; height: .85rem; }
.trust-line:hover .trust-meta { color: var(--brand); }
@media (min-width: 800px) { .trust-line { margin: 1rem auto 2.25rem; } }
/* it has to stay one row even on the narrowest phones */
.trust-line { white-space: nowrap; }
@media (max-width: 359px) {
  .trust-line { gap: .3rem; }
  .trust-line .stars { gap: 0; }
  .trust-line .star { width: .7rem; height: .7rem; }
  .trust-line strong { font-size: .9rem; }
  .trust-line .trust-meta { font-size: .68rem; }
  .trust-line .g-logo { width: .72rem; height: .72rem; }
}

/* hero trust line.
   .stars is itself a <span>, so `.hero-trust span` used to out-specify
   `.stars` and paint the stars grey -- scope the muted colour to the
   caption instead, and match line boxes so the row sits on one line. */
.hero-trust {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap;
  margin-top: 1.6rem; color: inherit; line-height: 1;
}
/* grey in the hero -- the gold is kept for the reviews section */
.hero-trust .stars { color: var(--muted); }
.hero-trust strong {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 500;
  color: var(--brand-deep); line-height: 1;
}
.hero-trust .trust-meta { font-size: .86rem; color: var(--muted); line-height: 1; }
.hero-trust:hover .trust-meta { color: var(--brand); }

/* Four ways to reach her, nothing else. The row is the link; the copy button
   beside it is a second, separate target for the two values worth copying. */
.method-grid { display: grid; gap: .9rem; list-style: none; margin: 0; padding: 0; max-width: 34rem; }
@media (min-width: 720px) { .method-grid { grid-template-columns: repeat(2, 1fr); max-width: none; } }
.method {
  display: flex; align-items: stretch;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.method:hover { border-color: oklch(0.72 0.12 220 / .45); transform: translateY(-2px); }
.method-main {
  min-width: 0; display: flex; align-items: center; gap: .9rem;
  padding: 1rem .5rem 1rem 1.1rem; color: inherit;
}
.method-main:hover { color: inherit; }
.method .badge-ico {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none;
  border-radius: .75rem; background: var(--brand-soft); color: var(--brand-deep);
}
.method .badge-ico .ico { width: 1.25rem; height: 1.25rem; }
.m-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.m-label { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.m-value { font-size: 1rem; font-weight: 600; color: var(--brand-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the email is the longest value: on the narrowest phones it needs the room
   back, or it ends in an ellipsis and stops being readable */
@media (max-width: 359px) {
  .method-main { gap: .7rem; padding-left: .85rem; }
  .method .badge-ico { width: 2.2rem; height: 2.2rem; }
  .method .badge-ico .ico { width: 1.1rem; height: 1.1rem; }
  .m-value { font-size: .88rem; }
  .m-label { font-size: .68rem; }
  .method-copy { width: 1.8rem; height: 1.8rem; margin-right: .4rem; }
}

/* a quiet square beside the value: its own target, no divider, no label */
.method-copy {
  /* lines up with the value, not with the middle of the row: the label above
     it would otherwise pull the icon into the gap between the two lines */
  flex: none; align-self: flex-end; display: grid; place-items: center;
  width: 2rem; height: 2rem; margin: 0 .6rem .75rem 0; padding: 0;
  cursor: pointer; border: 0; border-radius: .6rem;
  background: none; color: var(--muted); font: inherit;
  transition: background-color .15s ease, color .15s ease;
}
.method-copy .ico { width: 1rem; height: 1rem; }
.method-copy .ico-done { display: none; }
.method-copy:hover { background: var(--brand-soft); color: var(--brand-deep); }
.method-copy:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* copied: the icon becomes a tick, which is the whole confirmation */
.method-copy.is-copied { color: var(--leaf); background: var(--leaf-soft); }
.method-copy.is-copied .ico-copy { display: none; }
.method-copy.is-copied .ico-done { display: block; }

a.method { display: flex; align-items: center; gap: 1.25rem; color: inherit; }
.method .m-label { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--leaf); }
.method .m-value { display: block; font-size: 1.05rem; font-weight: 600; color: var(--brand-deep); margin-top: .15rem; }

/* ---- forms ---------------------------------------------------------- */
.form-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  max-width: 46rem; box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.15rem; }
.field-row { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.ep-form label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.ep-form input, .ep-form select, .ep-form textarea {
  width: 100%; padding: .8rem .95rem; font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--cream);
  border: 1px solid var(--border); border-radius: .8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ep-form input:focus, .ep-form select:focus, .ep-form textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px oklch(0.72 0.12 220 / .18);
}
/* The native arrow sits hard against the edge and differs per browser; ours
   is the same chevron as the steps, inset like the text on the other side. */
.ep-form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.75rem; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356636e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: 1.1rem;
}
.ep-form textarea { resize: vertical; min-height: 7rem; }
.ep-form { display: flex; flex-direction: column; }
.ep-form .btn-submit { align-self: stretch; justify-content: center; }
@media (min-width: 560px) {
  .ep-form .btn-submit { align-self: flex-end; justify-content: flex-start; }
}
.ep-form [aria-invalid="true"] { border-color: var(--danger); }
/* a native checkbox has no border to colour, so the consent box -- the field
   people most often miss -- would have shown no error at all */
.ep-form input[type="checkbox"][aria-invalid="true"] {
  outline: 2px solid var(--danger); outline-offset: 2px; border-radius: .2rem;
}
.field-consent:has(input[aria-invalid="true"]) > .consent > span { color: var(--danger); }
.req { color: var(--danger); }
.hint { font-size: .8rem; color: var(--muted); margin: .4rem 0 0; }

.field-consent label.consent {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .88rem; font-weight: 400; line-height: 1.55; color: var(--muted);
}
.field-consent input { width: auto; margin-top: .22rem; flex: none; accent-color: var(--brand); }

/* honeypot: off-screen for people, still reachable by bots */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Only the error path renders inline text now: success replaces the whole
   form with .form-done below. */
.form-status { margin: 1rem 0 0; font-weight: 600; font-size: .95rem; min-height: 1.4em; }
.form-status.err { color: var(--danger); }

/* shown only when a send fails: the two direct channels, so nobody is left
   with an error and no way through */
.form-fallback {
  margin-top: .85rem; padding: .95rem 1.1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--cream);
}
.form-fallback p { margin: 0 0 .7rem; font-size: .88rem; color: var(--muted); }
.form-fallback-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.form-fallback-actions .btn { padding: .5rem 1rem; font-size: .9rem; }

/* ---- form success --------------------------------------------------- */
/* Swapped in for the form once the submission is through, so the page can
   never be submitted twice and the outcome is impossible to miss. */
.form-done { text-align: center; padding: 1rem 0 .5rem; scroll-margin: calc(var(--header-h) + 1rem) 0 1rem; }
.form-done:focus { outline: none; }
.form-done .done-mark {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem;
  margin: 0 auto 1.5rem; border-radius: 50%;
  color: var(--leaf); background: var(--leaf-soft);
}
.form-done .done-mark .ico { width: 2.1rem; height: 2.1rem; stroke-width: 2.25; }
.form-done h3 {
  font-family: var(--font-display); font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem);
  font-weight: 600; margin: 0 0 .75rem;
}
.form-done p { color: var(--muted); margin: 0 auto .6rem; max-width: 34rem; line-height: 1.65; }
.form-done p strong { color: var(--ink); font-weight: 600; }
.form-done .done-actions { margin-top: 1.75rem; }

@media (prefers-reduced-motion: no-preference) {
  .form-done { animation: done-in .45s ease both; }
  @keyframes done-in {
    from { opacity: 0; transform: translateY(.6rem); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- legal pages ---------------------------------------------------- */
/* The legal pages are one long column of text, so they are set like a
   document: centred in the wrap, measured for reading, with the heading
   levels doing the navigating. */
.legal { max-width: var(--wrap-narrow); margin-inline: auto; }
.legal > :first-child { margin-top: 0; }

/* the two shouted dividers the generator emits (RIASSUNTO / POLICY COMPLETA):
   a rule above turns them into the section breaks they are meant to be */
.legal .legal-divider {
  font-size: .72rem; font-family: var(--font-sans); font-weight: 600;
  letter-spacing: .18em; color: var(--leaf); text-transform: uppercase;
  margin: 4rem 0 2rem; padding-top: 1.75rem; border-top: 1px solid var(--border);
}
.legal h2 { font-size: 1.45rem; margin: 2.75rem 0 .6rem; letter-spacing: -0.01em; }
.legal h3 { font-size: 1.12rem; margin: 2.25rem 0 .5rem; }
.legal h4 {
  font-family: var(--font-sans); font-size: .95rem; font-weight: 600;
  color: var(--brand-deep); margin: 1.75rem 0 .4rem;
}
.legal p, .legal li {
  font-size: .95rem; line-height: 1.75; color: oklch(0.22 0.03 240 / .82);
}
.legal p { margin: 0 0 1rem; }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.legal ul, .legal ol { margin: 0 0 1rem; padding-left: 1.1rem; }
.legal li { margin-bottom: .5rem; }
.legal li::marker { color: var(--leaf); }
/* the lead paragraph, before the first heading */
.legal > p:first-child { font-size: 1.05rem; color: var(--ink); }

/* ===================== footer ======================================== */
.site-footer { background: var(--brand-deep); color: oklch(1 0 0 / .85); margin-top: 2.5rem; }
@media (min-width: 800px) { .site-footer { margin-top: 4rem; } }
.footer-grid {
  display: grid; gap: 2.25rem;
  /* padding-block, not the shorthand: this element is also .wrap, whose
     24px side padding the shorthand would reset to zero */
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem);
}
@media (min-width: 720px) { .footer-grid { gap: 3rem; } }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* the studi column carries the longest line ("Ovunque tu sia, in
   videochiamata"), so it gets the widest share -- and a tighter column gap
   between 1024 and 1280, where there is least room to give */
@media (min-width: 1100px) {
  .footer-grid { grid-template-columns: 1.2fr .85fr .85fr 1.4fr; column-gap: 2.25rem; }
}
@media (min-width: 1280px) {
  .footer-grid { grid-template-columns: 1.35fr .9fr .9fr 1.25fr; column-gap: 3rem; }
}

.footer-brand { display: flex; align-items: center; gap: .8rem; }
.footer-brand img { height: 56px; width: auto; background: var(--cream); border-radius: .8rem; padding: .5rem .6rem; }
.footer-brand span { font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.footer-about { margin: 1.25rem 0 0; font-size: .9rem; color: oklch(1 0 0 / .7); }

.footer-h {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: oklch(1 0 0 / .6); margin: 0 0 1.1rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .7rem; font-size: .92rem; }
.site-footer a { color: oklch(1 0 0 / .85); display: inline-flex; align-items: center; gap: .55rem; }
.site-footer a:hover { color: oklch(0.74 0.17 135); }
.footer-list .ico { width: 1rem; height: 1rem; color: oklch(0.74 0.17 135); }
.footer-studio strong { display: block; color: #fff; font-weight: 600; }
.footer-studio { display: flex; gap: .6rem; align-items: flex-start; }
.footer-studio .ico { margin-top: .22rem; color: oklch(0.74 0.17 135); }

.footer-bottom {
  border-top: 1px solid oklch(1 0 0 / .12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  padding-block: 1.5rem; font-size: .8rem; color: oklch(1 0 0 / .6);
}
.footer-bottom p { margin: 0; }
.nowrap { white-space: nowrap; }
.footer-bottom nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
/* "Preferenze cookie" reopens the consent banner; a button, dressed as the
   links beside it */
.footer-bottom .link-btn {
  border: 0; padding: 0; background: none; font: inherit; cursor: pointer;
  color: oklch(1 0 0 / .85);
}
.footer-bottom .link-btn:hover { color: oklch(0.74 0.17 135); }

/* ---- consent banner ------------------------------------------------- */
/* One small floating strip at the bottom: a line of text with the Privacy
   link, then a plain × (a refusal) and Accetta. Built by analytics.js, only
   until a choice is made. */
.cookie-bar {
  position: fixed; z-index: 70; left: 50%; bottom: max(.9rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(34rem, calc(100% - 1.5rem));
  display: flex; align-items: center; gap: .35rem;
  padding: .6rem .6rem .6rem 1.1rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--border); border-radius: 1.25rem;
  font-size: .8rem; line-height: 1.4;
}
/* the text block is as wide as its text, so the small line centres under
   the main line; the buttons sit on the block's vertical centre */
.cookie-bar-text { flex: 0 1 auto; min-width: 0; margin-right: auto; padding-right: .4rem; }
.cookie-bar p { margin: 0; color: var(--muted); }
.cookie-bar a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: .15em; }
.cookie-bar small {
  display: block; text-align: center;
  margin-top: .15rem; font-size: .68rem; color: var(--muted); opacity: .85;
}
.cookie-bar-ok {
  flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  padding: .45rem .95rem; border-radius: 999px;
  background: var(--brand); color: var(--on-brand);
}
.cookie-bar-ok:hover { background: var(--brand-deep); }
.cookie-bar-x {
  flex: none; display: grid; place-items: center; cursor: pointer;
  width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: none; color: var(--ink);
}
.cookie-bar-x:hover { background: var(--cream); }
@media (max-width: 559px) {
  /* two lines of text do not sit well inside a pill */
  .cookie-bar { border-radius: 1rem; padding: .5rem .45rem .5rem .9rem; font-size: .76rem; }
}
@media (max-width: 389px) {
  /* iPhone SE / mini: beside the buttons the text squeezed into ~200px and
     four lines, so it takes its own row and the buttons sit centred below */
  .cookie-bar { flex-wrap: wrap; justify-content: center; row-gap: .45rem; padding: .7rem .75rem .55rem; }
  .cookie-bar-text { flex-basis: 100%; margin-right: 0; padding-right: 0; text-align: center; }
}

/* ===================== swipe rails ===================================
   Declared last on purpose: .is-rail and .card-grid carry the same
   specificity, so the rail only wins if it comes after them.
   ==================================================================== */
/* A horizontal swipe rail. Any grid can become one inside a media query by
   setting --rail-card and adding `display: flex` via the .is-rail class.
   It bleeds past the page gutter so a card can sit flush with the screen
   edge while still lining up with the text above it. */
.is-rail {
  display: flex; gap: .9rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  padding-bottom: .25rem;
}
.is-rail::-webkit-scrollbar { display: none; }
.is-rail > * { flex: 0 0 var(--rail-card, min(78vw, 21.5rem)); scroll-snap-align: center; }

/* Linked rails do not snap: each would snap to its own grid and immediately
   pull the pair out of step. They glide freely instead. */
[data-sync-rail] { scroll-snap-type: none; }
[data-sync-rail] > * { scroll-snap-align: none; }
/* each component leaves the rail at its own breakpoint, below */
@media (min-width: 800px) {
  .ig-grid.is-rail {
    display: grid; overflow-x: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0; padding-bottom: 0; gap: 1.25rem;
  }
  .ig-grid.is-rail > * { flex: initial; scroll-snap-align: none; }
}
@media (min-width: 800px) {
  .card-grid.is-rail {
    display: grid; overflow-x: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0; padding-bottom: 0; gap: 1.5rem;
  }
  .card-grid.is-rail > * { flex: initial; scroll-snap-align: none; }
}
@media (min-width: 900px) {
  .studio-list.is-rail {
    display: grid; overflow-x: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0; padding-bottom: 0; gap: 1rem;
  }
  .studio-list.is-rail > * { flex: initial; scroll-snap-align: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}