/* Sant'Antonio - main.css (v9 - the owner's A/D selection, theme 2.0.0)
   Two layers, top to bottom:
   1. Base + chrome (v6): tokens, self-hosted fonts, answering-bar,
      header/nav/hamburger, buttons, forms, necrologi, footer,
      breadcrumbs, focus, reduced-motion. Kept in full; only the
      component rules no template emitted any more were removed.
   2. v9 - selezione A/D (Lorenzo): the components the nine chosen
      design-lab mockups need, unified under the same tokens. Every
      template on the site now speaks this language, including the
      three legal pages (page.php), 404.php and the two necrologi
      templates, so the v8 component rules those four used to emit
      were removed with them. Class names and markup shapes are
      documented in CONTRACT.md (single source of truth).
   The v8 cinematic layer (.page-hero, .process-flow, .duo-cards,
   .faq-cards, .info-panel, .tile-row, .people-cards and friends) is
   gone: the nine v9 templates replaced every page that emitted those
   classes, and the four templates left on the earlier markup never
   used them. Their rules were verified against every class emitted by
   the theme's PHP before deletion.
   ONE type system, five steps (+ the v9 label/tel display steps):
   display / h2 / h3 22px / body 18-19 / small 16.
   Weights: Newsreader 400 for all headings, Instrument 400 for text,
   Instrument 500 only for buttons, labels and nav.
   Fully fluid: clamp() everywhere, grids collapse predictably. */

:root {
  --ground: #FAF8F3;
  --surface: #EDE7DC;
  --ink: #2A322C;
  --ink-muted: #4A5148;
  --green: #45604E;
  --green-dark: #3A5041;
  --sage: #8AA08D;
  --action: #A0492F;
  --action-hover: #8C3A28;

  --font-heading: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', 'Instrument Fallback', system-ui, 'Segoe UI', sans-serif;

  /* The five text sizes. Nothing outside this list. */
  --text-display: clamp(2.75rem, 1.9rem + 4vw, 4.5rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-h3: 1.375rem;
  --text-body: clamp(1.125rem, 1.06rem + 0.3vw, 1.1875rem);
  --text-small: 1rem;

  --space-section: clamp(3.5rem, 2.4rem + 4.5vw, 7rem);
  --radius-hero: 20px;
  --radius-card: 16px;
  --radius-control: 10px;

  --tap-min: 48px;
  --hairline: rgba(138, 160, 141, 0.45);
  --wrap: 1180px;
}

/* Self-hosted fonts: the theme never loads Google Fonts. */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}
/* Instrument Sans ships as ONE variable file (wght 400-700). The bundled
   instrument-sans-400.woff2 and instrument-sans-500.woff2 are byte-identical
   (same sha256), so declaring both fetched the same 30 KB twice on every first
   visit. Both weights now name the single 400 file and the weight descriptor
   selects the instance, so 500 still renders as a true wght 500 - which is
   exactly what the -500 declaration was already doing, with the same bytes.
   The -500 file stays in the folder unreferenced and is never requested. */
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-400.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

/* Metric-matched fallbacks. Measured in-browser against the real faces so a
   fallback render occupies the same space: no reflow if a web font is late,
   and none at all with font-display: optional. Values are the advance-width
   ratio (size-adjust) and the web font's own ascent/descent re-expressed
   against that adjusted em. */
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Liberation Serif'), local('Nimbus Roman');
  size-adjust: 95.5%;
  ascent-override: 77.5%;
  descent-override: 28.3%;
  line-gap-override: 0%;
}
/* Italic serif is above the fold on most templates (the <em> inside the h1) and
   the family had no italic fallback face, so an italic run fell back to the
   upright face above and was synthetically slanted: Georgia roman advances at
   95.5%, about 6% wider than real Newsreader italic. Same derivation as the
   upright pair, re-measured for this style pair: advance widths of Newsreader
   Italic over Georgia Italic across the site's own italic copy give
   size-adjust 88.2%; the ascent/descent overrides are the upright numbers
   divided by 88.2/95.5, because both Newsreader cuts share identical vertical
   metrics (upem 2000, ascender 1470, descender -530), so the same physical
   line box has to come out of the smaller adjusted em. 83.9 x 88.2 = 74.0 and
   30.6 x 88.2 = 27.0, matching the upright pair to within 0.2%: the fallback
   line box is unchanged, only the advance widths are corrected. */
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Georgia Italic'), local('Georgia-Italic'), local('Times New Roman Italic'),
       local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'), local('Nimbus Roman Italic');
  font-style: italic;
  size-adjust: 88.2%;
  ascent-override: 83.9%;
  descent-override: 30.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'), local('Roboto');
  size-adjust: 101.25%;
  ascent-override: 95.8%;
  descent-override: 24.7%;
  line-gap-override: 0%;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  text-wrap: pretty;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; margin: 0 0 0.5em; color: var(--ink); }
h1 { font-size: var(--text-display); line-height: 1.06; letter-spacing: -0.012em; }
h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.006em; }
h3 { font-size: var(--text-h3); line-height: 1.3; }
p, ul, ol, dl { margin: 0 0 1em; }
a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 2px; }
/* Surface-aware focus: the green outline is invisible on green, ink or
   terracotta grounds, so those surfaces use the ivory outline instead.
   .btn-phone is deliberately NOT in this list. It is the one control that
   appears on both the light bands and the dark photographic ones, so no
   single surface-tuned colour can serve it: an ivory outline vanished on
   --ground (1.00:1), --surface (1.16:1) and --ivory (1.10:1). It gets a
   two-tone ring of its own in the buttons section below. */
.answering-bar :focus-visible,
.site-footer :focus-visible,
.sa-floating-toggle:focus-visible { outline-color: var(--ground); }
::selection { background: var(--surface); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 44px); }
.prose { max-width: 34em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.muted { color: var(--ink-muted); }
.cta-note, .eyebrow { font-size: var(--text-small); }
.eyebrow { font-weight: 500; color: var(--green-dark); margin: 0 0 0.9rem; }

section.sa-section { padding-block: var(--space-section); }

/* Visually hidden labels (search form etc.), shown only to screen readers. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--ground);
  padding: 14px 20px; border-radius: 0 0 var(--radius-control) 0;
}
.skip-link:focus { left: 0; color: var(--ground); }

/* Pre-header: on mobile the sentence steps aside and the number stays
   centered and tappable. */
.answering-bar { background: var(--green); color: var(--ground); }
.answering-bar .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--tap-min);
  font-weight: 500; font-size: var(--text-small);
}
.answering-bar .bar-note { display: inline-flex; align-items: center; gap: 10px; }
.answering-bar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex: none; }
.answering-bar a.sa-phone {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ground); font-weight: 500; padding: 13px 0; min-height: var(--tap-min); text-decoration: none;
}
.answering-bar a.sa-phone:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sage); }
.answering-bar a.sa-phone svg { flex: none; }

/* Header + dropdowns */
.site-header { background: var(--ground); border-bottom: 1px solid rgba(42, 50, 44, 0.1); position: relative; z-index: 45; }
.site-header .wrap { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: 88px; }
.site-logo { display: inline-flex; align-items: center; flex: none; padding-block: 9px; }
/* The SVG viewBox was trimmed to the artwork (it used to carry 43.8% ink and
   56.2% empty margin), so these numbers are now the visible size of the mark,
   not the size of a mostly-empty box. */
.site-logo img { width: 140px; height: 69px; }
.primary-nav { margin-left: auto; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(10px, 1.6vw, 26px); }
.primary-nav li { position: relative; }
.primary-nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 14px 6px;
  font-weight: 500; font-size: var(--text-small);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.primary-nav a:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--sage); }
/* Current page / current section. The sage underline this rule used to draw
   measured 2.64:1 against --ground (below the 3:1 of 1.4.11) and was the very
   same treatment as :hover, so the state read as a pointer artefact rather
   than as "you are here". Now a 2px rule in --green-dark: 8.23:1 on --ground,
   and visibly distinct from the 1px sage hover underline. Text decorations do
   not participate in layout and both offset and thickness stay inside the
   link's 14px bottom padding, so nothing moves: CLS unchanged.
   The ancestor and aria-current selectors cover a real wp_nav_menu, whose
   walker marks section parents with -ancestor and adds aria-current itself;
   the fallback renderer in inc/setup.php marks only current-menu-item. */
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav .current_page_ancestor > a,
.primary-nav a[aria-current="page"],
.primary-nav a[aria-current="true"] {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-color: var(--green-dark);
  text-decoration-thickness: 2px;
}
.primary-nav .menu-item-has-children > a::after,
.primary-nav .has-sub > a::after {
  content: ''; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.5px solid var(--sage); border-bottom: 1.5px solid var(--sage);
  transform: rotate(45deg); flex: none;
}
.primary-nav li ul {
  display: none;
  position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%);
  min-width: 270px; padding: 10px;
  background: var(--ground);
  border: 1px solid rgba(42, 50, 44, 0.1);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 44px rgba(42, 50, 44, 0.16);
  z-index: 50;
}
.primary-nav li:hover > ul,
.primary-nav li:focus-within > ul { display: block; }
.primary-nav li ul li { position: static; }
.primary-nav li ul a {
  display: block; width: 100%;
  padding: 11px 14px; border-radius: var(--radius-control);
  font-weight: 400; white-space: normal;
}
.primary-nav li ul a:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
/* .sub-head (a dropdown sub-heading, --sage on --ground at 14px) was removed:
   2.64:1 where 4.5:1 is required, and no template emits the class. */
.nav-toggle {
  display: none;
  width: var(--tap-min); height: var(--tap-min);
  padding: 0;
  border: 1px solid var(--green); border-radius: 999px;
  background: transparent; color: var(--green);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle:hover { background: rgba(69, 96, 78, 0.08); }
/* Hamburger icon: three lines that fold into a cross when open. */
.nav-toggle-box { position: relative; display: block; width: 18px; height: 14px; }
.nav-toggle-box span {
  position: absolute; left: 0; width: 18px; height: 2px;
  background: currentColor; border-radius: 1px;
  transition: transform 0.28s ease, opacity 0.2s ease, top 0.28s ease;
}
.nav-toggle-box span:nth-child(1) { top: 0; }
.nav-toggle-box span:nth-child(2) { top: 6px; }
.nav-toggle-box span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Buttons: compact pills, one size. The number never sits inside a button. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--tap-min);
  padding: 12px 26px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-small);
  line-height: 1.3; text-decoration: none; text-align: center;
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn svg { flex: none; }
.btn-phone { background: var(--action); color: var(--ground); }
.btn-phone:hover, .btn-phone:focus-visible { background: var(--action-hover); color: var(--ground); }
/* The phone button is the only control that lands on every surface the site
   has: --ground, --surface and --ivory bands, the ink and green-dark bands,
   and four different photographs under their veils. A one-colour ring cannot
   be visible on all of them, so this is a two-tone ring - an ivory outline
   with an ink ring immediately outside it.
   Ivory against ink is 12.44:1, so whatever colour sits behind the button,
   the better of the two tones is at least sqrt(12.44) = 3.53:1 against it.
   That is a floor, not a measurement: contrast depends only on relative
   luminance, so no photograph, veil or future band colour can go under it.
   Inward the ivory ring reads against the ink ring filling the 2px gap
   (12.44:1) and against the focused fill --action-hover (7.19:1).
   Geometry: outline 2-5px, ink ring 0-8px from the border box, so 3px of
   each tone is visible. Both outline and box-shadow are outside the box
   model and neither is transitioned, so focus costs no layout and no motion.
   The 8px reach stays inside the tightest gutter it meets (the 14px padding
   of .sa-floating-panel, the 20px minimum .wrap gutter, the 12px .cta-row
   gap), so no overflow: hidden ancestor clips it. */
.btn-phone:focus-visible {
  outline: 3px solid var(--ground);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--ink);
}
.btn-lg { min-height: 56px; padding: 14px 30px; }
.btn-whatsapp, .btn-outline { background: transparent; border-color: var(--green); color: var(--green); }
.btn-whatsapp:hover, .btn-whatsapp:focus-visible,
.btn-outline:hover, .btn-outline:focus-visible { background: rgba(69, 96, 78, 0.09); color: var(--green-dark); }

.cta-number { margin: 0 0 0.9rem; font-size: var(--text-body); font-weight: 500; }
.cta-number a { color: inherit; text-decoration: none; }
.cta-number a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sage); }
.link-next { display: inline-block; padding: 12px 2px; font-weight: 500; font-size: var(--text-small); color: var(--green); }
.cta-block { margin-block: 1.75rem 0.5rem; }
.cta-block .cta-note { margin: 0.8rem 0 0; color: var(--ink-muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Full-bleed hero */
.hero-full {
  position: relative; display: grid; place-items: center;
  min-height: clamp(520px, 82vh, 840px);
  padding: clamp(4rem, 8vw, 7rem) 0;
  text-align: center; color: #FAF8F3; overflow: hidden;
}
.hero-full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-full::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31, 38, 33, 0.42) 0%, rgba(31, 38, 33, 0.34) 45%, rgba(31, 38, 33, 0.58) 100%);
}
.hero-full .hero-inner { position: relative; z-index: 1; max-width: 880px; padding-inline: clamp(20px, 4vw, 44px); }
.hero-full .eyebrow { color: rgba(250, 248, 243, 0.92); margin-bottom: 1.1rem; }
.hero-full h1 { color: #FFFFFF; margin-bottom: 1.3rem; text-shadow: 0 1px 24px rgba(31, 38, 33, 0.35); }
.hero-full .cta-number { color: #FFFFFF; margin-bottom: 1rem; }
.hero-full .cta-note { color: rgba(250, 248, 243, 0.85); margin: 0.9rem 0 0; }
/* The hero is a dark photographic band like .cta-dark, .hero-sede and
   .phone-band, and it was the only one without their focus override, so the
   hero phone-number link kept the global green ring. Sampling the actual
   hero photograph under its own veil, across the region the two focusable
   CTAs occupy: the green ring cleared 3:1 on 0% of it (worst 1.00:1) and the
   ivory ring the other dark bands use clears it on 92% (worst 2.02:1) - the
   veil is not opaque enough to darken the bright patches of this particular
   image. So the ivory outline is paired with the same ink companion ring the
   phone button carries, which clears 3:1 on 100% of it. That also covers the
   inline .cta-number link, which is not a .btn and would otherwise keep a
   single-tone ring. Outline and box-shadow only: no layout, no motion. */
.hero-full :focus-visible { outline-color: var(--ground); box-shadow: 0 0 0 8px var(--ink); }

/* Typographic page head (guida). The bare .hero surface band stays because
   main.js uses it as one of the scroll anchors for the floating control. */
.hero { background: var(--surface); padding-block: clamp(2.25rem, 4vw, 4.5rem) clamp(2.75rem, 5vw, 5.25rem); }
.hero h1 { font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); margin-bottom: 0.45em; }
.hero .lead, .hero-typo .lead { max-width: 32em; }
.hero-typo { background: var(--surface); padding-block: clamp(2.25rem, 4vw, 4.5rem) clamp(2.75rem, 5vw, 5.25rem); }
.hero-typo h1 { font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); }

/* Sede card */
.card-sede { border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.card-sede img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-sede-body { padding: clamp(24px, 3vw, 32px); }
.card-sede-body h2, .card-sede-body h3 { font-size: var(--text-h3); margin-bottom: 0.15em; }
.card-sede-body address { font-style: normal; margin-bottom: 0.35rem; color: var(--ink-muted); }
.card-sede-body .sede-note { margin-bottom: 0; }
.card-sede-body .title-link { text-decoration: none; color: inherit; }
.hours { margin: 1.1rem 0; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; border-top: 1px solid var(--hairline); font-size: var(--text-small); }
.hours dt { color: var(--ink-muted); font-weight: 400; }
.hours dd { margin: 0; text-align: right; }
.hours-h24 { font-weight: 500; color: var(--green-dark); font-size: var(--text-small); }
.card-sede .cta-row { margin-top: 1.4rem; }
.more-row { margin: 1rem 0 0; }
.phone-inherit { color: inherit; }

/* Inner-page head: breadcrumbs and hero share one warm surface band, so every
   page opens designed instead of floating text on white. */
.breadcrumbs { background: var(--surface); padding-top: 1.1rem; font-size: var(--text-small); color: var(--ink-muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before { content: ''; width: 5px; height: 5px; border-right: 1.5px solid var(--sage); border-top: 1.5px solid var(--sage); transform: rotate(45deg); flex: none; }
.breadcrumbs a { color: var(--ink-muted); display: inline-block; padding-block: 6px; text-decoration: none; }
.breadcrumbs a:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs li[aria-current] { color: var(--green-dark); font-weight: 500; }

/* Forms */
.sa-form { max-width: 34em; }
.sa-form label { display: block; font-weight: 500; font-size: var(--text-small); margin-bottom: 0.35rem; }
.sa-form .field { margin-bottom: 1.25rem; }
.sa-form input[type='text'],
.sa-form input[type='email'],
.sa-form input[type='search'],
.sa-form textarea {
  width: 100%; min-height: var(--tap-min);
  padding: 12px 14px;
  border: 1px solid #C7BFAE; border-radius: var(--radius-control);
  background: #FFFEFA; color: var(--ink);
  font: 400 var(--text-body) var(--font-body);
}
.sa-form textarea { min-height: 150px; resize: vertical; }
.sa-form .consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-small); }
.sa-form .consent input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--green); flex: none; }
.sa-form .hp-field { position: absolute; left: -9999px; }
.form-notice { border-radius: var(--radius-control); padding: 16px 18px; margin-bottom: 1.5rem; max-width: 34em; }
.form-notice.ok { background: rgba(69, 96, 78, 0.12); }
.form-notice.err { background: rgba(160, 73, 47, 0.1); }

/* Obituary search */
.search-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 34em; }
.search-form input[type='search'] {
  flex: 1 1 240px; min-height: var(--tap-min);
  padding: 12px 18px;
  border: 1px solid #C7BFAE; border-radius: 999px;
  background: #FFFEFA; color: var(--ink);
  font: 400 var(--text-body) var(--font-body);
}
.search-form button { flex: none; }

/* Necrologi */
.necrologi-list { list-style: none; margin: 0; padding: 0; max-width: 44em; }
.necrologi-list li { border-top: 1px solid var(--hairline); padding-block: clamp(1.25rem, 2vw, 1.6rem); }
.necrologi-list li:last-child { border-bottom: 1px solid var(--hairline); }
.necrologi-list h2 { font-size: var(--text-h3); margin-bottom: 0.15em; }
.necrologi-list h2 a { color: var(--ink); text-decoration: none; }
.necrologi-list h2 a:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; }
.necrologi-list .nec-dates { color: var(--ink-muted); font-size: var(--text-small); margin: 0; }
.pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2rem; }
.pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: var(--tap-min); min-height: var(--tap-min);
  padding: 8px 14px;
  border: 1px solid var(--hairline); border-radius: 999px;
  text-decoration: none; color: var(--ink); font-size: var(--text-small);
}
.pagination .page-numbers.current { background: var(--surface); }
.pagination a.page-numbers:hover { border-color: var(--green); color: var(--green-dark); }
.necrologio-single { max-width: 720px; margin-inline: auto; }
.necrologio-photo img { width: min(280px, 60vw); border-radius: var(--radius-card); margin-bottom: 1.5rem; }
.necrologio-text { font-family: var(--font-heading); font-size: var(--text-h3); line-height: 1.55; }
.condoglianze-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.condoglianze-list li { border-top: 1px solid var(--hairline); padding-block: 1.1rem; }
.condoglianze-list .c-author { font-weight: 500; margin: 0 0 0.2rem; }
.condoglianze-list p { margin: 0; color: var(--ink-muted); }

/* Footer: closing, one brand+links row, one legal line. No repeats. */
.site-footer { background: var(--ink); color: rgba(237, 231, 220, 0.85); font-size: var(--text-small); }
.site-footer a { color: rgba(237, 231, 220, 0.85); text-decoration-color: rgba(237, 231, 220, 0.35); }
.site-footer a:hover { color: #FFFFFF; }
.footer-closing { padding-block: var(--space-section); border-bottom: 1px solid rgba(237, 231, 220, 0.14); }
.footer-closing .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.footer-closing h2 { color: #FAF8F3; margin-bottom: 0.45em; }
.footer-closing p { max-width: 28em; margin: 0; color: rgba(237, 231, 220, 0.72); font-size: var(--text-body); }
.footer-closing .cta-number { color: #FFFFFF; }
.footer-closing .cta-side { display: flex; flex-direction: column; align-items: flex-start; }
/* Legal documents and the necrologi archive keep the number but drop the sales
   heading: 03 section 6 sets their primary CTA to None and section 19 forbids an
   aggressive CTA around notices. Same band, same spacing, one less demand. */
.duo-split .col-note {
  margin: 0 0 0.9rem; max-width: 34em;
  font-size: var(--text-small); color: var(--ink-muted);
}
.footer-closing .closing-lead { max-width: 28em; margin: 0; color: rgba(237, 231, 220, 0.85); font-size: var(--text-body); }
.footer-main {
  display: grid;
  grid-template-columns: minmax(250px, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(2.75rem, 4vw, 4.5rem);
}
.footer-brand .footer-logo { width: 160px; height: 79px; margin-bottom: 1.4rem; }
.footer-brand .hours-h24 { color: var(--sage); margin: 0 0 0.3rem; }
.footer-brand address { font-style: normal; margin: 0 0 0.9rem; line-height: 1.6; color: rgba(237, 231, 220, 0.72); }
.footer-brand address strong { color: rgba(237, 231, 220, 0.95); font-weight: 500; }
.footer-brand a.sa-phone { display: inline-block; padding-block: 8px; font-weight: 500; color: #FAF8F3; text-decoration: none; }
.footer-brand a.sa-phone:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sage); }
/* Social links live under the addresses and phone, not in the legal line, so
   the brand column reads as one block: who we are, where we are, how to reach
   us. Sized for a comfortable target rather than a footnote. */
.footer-social { display: flex; align-items: center; gap: 14px; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.footer-social a {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--ivory);
  border: 1px solid rgba(237, 231, 220, 0.28);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover { border-color: var(--ivory); background: rgba(237, 231, 220, 0.1); color: #FFFFFF; }
.footer-social svg { display: block; }
.footer-main nav h2 { font: 500 0.875rem var(--font-body); color: var(--sage); margin-bottom: 0.6rem; }
.footer-main nav ul { list-style: none; margin: 0; padding: 0; }
.footer-main nav a { display: inline-block; padding-block: 8px; text-decoration: none; }
.footer-main nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 4px 24px;
  align-items: center; justify-content: space-between;
  padding-block: 1.1rem 1.6rem;
  border-top: 1px solid rgba(237, 231, 220, 0.14);
  font-size: 0.875rem; color: rgba(237, 231, 220, 0.62); /* 0.55 measured 4.40:1 on --ink; 0.62 gives 5.15:1 (AA needs 4.5) */
}
.footer-legal a { color: rgba(237, 231, 220, 0.66); display: inline-block; padding-block: 10px; }
/* The standalone legal links keep the 48px floor the footer row already has.
   The email link inside the <p> is a link inside a sentence and keeps the
   inline-block treatment above: making it a 48px inline-flex box would shift
   its baseline out of the surrounding line.
   (The Facebook icon used to sit in this row - it now lives in .footer-social,
   with the addresses and the phone number. The cookie-preferences link used to
   sit here too and is now on the cookie policy page, where a visitor looking
   for it actually goes; see .cookie-prefs.) */
.footer-legal ul a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding-block: 0; }
.footer-legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding: 0; }
.footer-legal p { margin: 0; }

/* ---- Cookie preferences control (cookie policy page) ------------------- */
/* Served with the `hidden` attribute; assets/js/main.js removes it only when a
   consent manager is actually on the page, so we never show a button that does
   nothing. The [hidden] rule below is not optional: an author-origin `display`
   overrides the UA stylesheet's display:none for [hidden], which is exactly how
   this control ended up visible-but-dead in the footer before. Hiding it with
   `display` is safe here (unlike in the footer row) because it sits in its own
   block at the end of the document, so revealing it shifts nothing above it. */
.cookie-prefs { margin: 2.2rem 0 0; }
.cookie-prefs[hidden] { display: none; }
.cookie-prefs a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: 12px 26px;
  font-family: var(--font-ui); font-size: 1rem; line-height: 1;
  color: var(--ivory); background: var(--green);
  border-radius: var(--radius-control); text-decoration: none;
  transition: background-color 0.2s ease;
}
.cookie-prefs a:hover { background: var(--green-dark); }

/* Floating contact control */
.sa-floating {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.sa-floating.visible { opacity: 1; visibility: visible; }
.sa-floating-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 68px; padding: 14px 26px;
  border: none; border-radius: 999px;
  background: var(--action); color: var(--ground);
  font: 500 var(--text-small) var(--font-body);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(42, 50, 44, 0.25);
  transition: background-color 0.15s ease;
}
.sa-floating-toggle:hover { background: var(--action-hover); }
.sa-floating-panel {
  display: none; flex-direction: column; gap: 10px;
  background: var(--ground);
  border: 1px solid rgba(42, 50, 44, 0.12);
  border-radius: var(--radius-card);
  padding: 14px;
  box-shadow: 0 6px 24px rgba(42, 50, 44, 0.2);
  min-width: 290px;
}
.sa-floating.open .sa-floating-panel { display: flex; }

/* Hub link lists (guida) */

/* Editorial page sections: heading column left, content right, one hairline
   rhythm on the legal documents. */
.psec {
  display: grid;
  grid-template-columns: minmax(170px, 0.55fr) minmax(0, 1.45fr);
  gap: 1rem clamp(2rem, 6vw, 6rem);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2rem, 3.5vw, 3.25rem);
}
.psecs .psec:first-child { border-top: none; padding-top: 0; }
.psecs .psec:last-child { padding-bottom: 0; }
.psec > h2 { font-size: var(--text-h3); margin: 0; max-width: 11em; }
.psec > div > :last-child { margin-bottom: 0; }

/* Obituary search: one designed control. Its heading and its support line
   are optional - on the 404 the surrounding .band-head-center carries them. */
.nec-search { max-width: 620px; }
.nec-search h2 { font-size: var(--text-h3); margin-bottom: 0.2em; }
.nec-search > p { color: var(--ink-muted); font-size: var(--text-small); margin-bottom: 1.1rem; }
.nec-search .search-form { max-width: none; }

/* Quiet Google rating: the score links to Google; review text stays on Google. */
.grating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: var(--text-small); color: var(--ink-muted); }
.grating .stars { display: inline-flex; gap: 2px; color: var(--green); }
.grating .stars svg { display: block; }
.grating strong { color: var(--ink); font-weight: 500; }
.grating a { display: inline-block; padding-block: 10px; }

.center { text-align: center; }

/* Utilities replacing former inline styles: tokens stay the single styling
   source. Referenced by the page templates. */
.cta-row.center-row { justify-content: center; }
.reply-title { font-size: 1.25rem; }

/* Responsive: three predictable stages, everything fluid in between. */
@media (max-width: 1020px) {
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* Mobile bar: the sentence steps aside; the number stays centered and
     tappable. */
  .answering-bar .bar-note { display: none; }
  .answering-bar .wrap { justify-content: center; }

  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    margin: 0; padding: 6px clamp(20px, 4vw, 40px) 18px;
    background: var(--ground);
    border-bottom: 1px solid rgba(42, 50, 44, 0.12);
    max-height: calc(100vh - 140px); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
  }
  .primary-nav.open {
    visibility: visible; opacity: 1; transform: translateY(0);
    pointer-events: auto;
  }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav a { display: flex; justify-content: space-between; padding: 14px 2px; font-size: var(--text-body); border-top: 1px solid var(--hairline); white-space: normal; }
  .primary-nav li:first-child > a { border-top: none; }
  .primary-nav .menu-item-has-children > a::after,
  .primary-nav .has-sub > a::after { display: none; }
  /* Submenus stay open inside the mobile panel: no hidden content under stress. */
  .primary-nav li ul {
    display: block; position: static; transform: none;
    min-width: 0; padding: 0 0 4px 16px;
    background: transparent; border: none; box-shadow: none; border-radius: 0;
  }
  .primary-nav li ul a { padding: 11px 2px; border-top: 1px solid var(--hairline); border-radius: 0; font-size: var(--text-small); color: var(--ink-muted); }
  .primary-nav li ul li:first-child a { border-top: none; }
  .site-header .wrap { min-height: 72px; }
  .site-logo img { width: 110px; height: 54px; }

  .hero-full { min-height: min(78vh, 640px); }
  .psec { grid-template-columns: 1fr; gap: 0.6rem; }
  .psec > h2 { max-width: none; }
  .footer-closing .wrap { grid-template-columns: 1fr; }
  .btn-lg { min-height: 60px; }
}
@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; gap: 1.9rem; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .cta-row .link-next { text-align: center; }
  .hero-full .cta-row { align-items: center; }
  .hero-full .cta-row .btn { width: auto; min-width: 240px; }
}

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

/* ============================================================
   v9 - selezione A/D (Lorenzo)
   The owner's page-by-page selection from the design lab:
   direction A (home, servizi hub, the six servizio pages,
   4 Zampe) and direction D (chi siamo, the three situazione
   pages, sedi hub, the two sede pages, contatti), plus the
   B-home pull-quote band. Every rule below reuses the tokens
   above; no base rule was rewritten. Mockup classes were
   renamed wherever they collided with live base classes, so
   the names here are the contract names, not the mockup ones:
   CONTRACT.md (sibling of SPEC.md in v9build/) is the single
   source of truth for the markup each class expects. Several
   of the classes they were renamed away from (.card, .split,
   .statement, .rows, .steps, .process, .faq, .people) have
   since been pruned as unused, so a future pass may reclaim
   the plain names - but only through CONTRACT.md.
   ============================================================ */

/* v9 tokens: appended only, the original tokens are untouched. */
:root {
  --text-label: 0.8125rem;
  --band-pad: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --ivory: #F1EDE4;
  --ivory-88: rgba(241, 237, 228, 0.88);
  --ivory-70: rgba(241, 237, 228, 0.72);
  --ivory-55: rgba(241, 237, 228, 0.55);
  --hairline-dark: rgba(237, 231, 220, 0.22);
  --text-tel: clamp(1.875rem, 1.05rem + 3.6vw, 2.75rem);
  --text-tel-band: clamp(2.375rem, 1.4rem + 4.3vw, 4.25rem);
  --text-num: clamp(2.25rem, 1.35rem + 4.6vw, 5rem);
  --text-say: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
}

/* ---------- Bands: the shared vertical rhythm ---------- */
.band { padding-block: var(--band-pad); }
.band-surface { background: var(--surface); }
.band-flush-top { padding-top: 0; }
/* Two beige bands in a row (servizio: "Come si svolge" then "Chi fa che cosa"
   on the five pages without the light dest band between them) would read as one
   continuous run. A hairline and a single shared padding keep them two sections.
   Deliberately scoped to .band + .band, so the sedi hub's .interlude-band, which
   is meant to continue the surface, is untouched. */
.band.band-surface + .band.band-surface {
  padding-top: 0;
}
.band.band-surface + .band.band-surface > .wrap {
  border-top: 1px solid var(--hairline);
  padding-top: var(--band-pad);
}
.band-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.band-head h2 { margin: 0; text-wrap: balance; }
.band-head .lead { margin: 1rem 0 0; color: var(--ink-muted); max-width: 36em; }
.band-head-center {
  text-align: center; max-width: 42rem;
  margin: 0 auto clamp(2.75rem, 2.2rem + 2.5vw, 4.25rem);
}
.band-head-center h2 { margin: 14px 0 0; text-wrap: balance; }
.band-head-center h2 em { color: var(--green); }
.band-head-center .lab { display: block; }
.band-head-center .intro { margin: 18px auto 0; color: var(--ink-muted); }

/* ---------- Labels ---------- */
.kick {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1.1rem;
  font: 500 var(--text-label)/1.2 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.kick::before { content: ''; width: 1.75rem; height: 1px; background: var(--sage); flex: none; }
.lab {
  display: block; margin: 0;
  font: 500 var(--text-label)/1.5 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.kick-serif {
  margin: 0 0 clamp(14px, 2.5vw, 22px);
  font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); line-height: 1.4; color: var(--green);
}
.support { margin: 0; font-size: var(--text-small); color: var(--ink-muted); }
.assure {
  margin: 16px 0 0;
  font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); color: var(--ink-muted);
}

/* ---------- Pulsing sage dot (v9 contexts) ---------- */
.sa-dot {
  display: inline-block; flex: none; width: 8px; height: 8px;
  border-radius: 50%; background: var(--sage);
  animation: sa-pulse 2.2s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
@keyframes sa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(138, 160, 141, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(138, 160, 141, 0); }
  100% { box-shadow: 0 0 0 0 rgba(138, 160, 141, 0); }
}

/* ---------- Extra button voices ---------- */
.btn-ghost { background: transparent; border-color: var(--ivory-55); color: var(--ivory); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: var(--ivory); background: rgba(255, 255, 255, 0.06); color: #FFFFFF;
}
.btn-quiet { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-quiet:hover, .btn-quiet:focus-visible { background: var(--ink); color: var(--ivory); }

/* ---------- Quote band (from B home, grafted into A home) ----------
   On --ground, not --surface: in the B mockup the citazione sat between two
   ground sections, so its hairlines read as band edges. On surface it would
   merge with the heritage band above it into one uninterrupted beige stretch
   and the top hairline would float mid-band. */
.quote-band {
  background: var(--ground);
  border-block: 1px solid var(--hairline);
  padding-block: clamp(4rem, 8vw, 6rem);
  text-align: center;
}
.quote-band figure { margin: 0; }
.quote-band blockquote { margin: 0; }
.quote-band blockquote p {
  font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h2); line-height: 1.25;
  max-width: 26ch; margin: 0 auto; text-wrap: balance;
}
.quote-band figcaption {
  margin-top: 1.5rem;
  font-size: var(--text-small); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
}

/* ---------- Heritage band (A signature: giant 40 + proof row) ---------- */
.heritage { position: relative; overflow: hidden; background: var(--surface); }
.heritage.on-ground { background: var(--ground); }
.heritage-num {
  position: absolute; top: -0.16em; right: -0.06em; z-index: 0;
  font-family: var(--font-heading);
  font-size: clamp(12rem, 7rem + 18vw, 23rem);
  line-height: 0.8; letter-spacing: -0.04em;
  color: rgba(138, 160, 141, 0.32);
  user-select: none; pointer-events: none;
}
.heritage.on-ground .heritage-num { color: rgba(138, 160, 141, 0.3); }
.heritage.compact .heritage-num { font-size: clamp(8rem, 5rem + 11vw, 14rem); }
.her-in { position: relative; z-index: 1; }
.her-in h2 { margin: 0; max-width: 17em; text-wrap: balance; }
.her-note { margin: 1.25rem 0 0; max-width: 38em; color: var(--ink-muted); }
.proof {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem;
  margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.proof-item { border-top: 1px solid var(--hairline); padding-top: 1.25rem; }
.proof-item .lab { margin-bottom: 0.7rem; }
.proof-item p {
  margin: 0; font-family: var(--font-heading);
  font-size: var(--text-h3); line-height: 1.35; text-wrap: pretty;
}

/* ---------- Chi vi risponde (A home: text + hairline name rows + figure) ---------- */
.chi-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 4vw, 5rem); align-items: start;
}
.chi-text h2 { margin: 0; max-width: 16em; text-wrap: balance; }
.chi-text .lead { margin: 1.1rem 0 0; color: var(--ink-muted); max-width: 34em; }
.name-rows { list-style: none; margin: 2.25rem 0 0; padding: 0; }
.name-row {
  display: grid; grid-template-columns: 9.5rem 1fr;
  gap: 0.35rem 1.5rem; align-items: baseline;
  border-top: 1px solid var(--hairline); padding-block: 1.15rem;
}
.name-row:last-child { border-bottom: 1px solid var(--hairline); }
.name-row .name { font-family: var(--font-heading); font-size: var(--text-h3); line-height: 1.2; }
.name-row .role { font-size: var(--text-small); color: var(--ink-muted); line-height: 1.5; }
.chi-foot { margin: 1.4rem 0 0; font-size: var(--text-small); color: var(--ink-muted); max-width: 34em; }
.chi-figure { margin: 0; }
.chi-figure img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 32%; border-radius: var(--radius-card);
}
.chi-figure figcaption {
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small); color: var(--ink-muted);
}

/* ---------- Time-anchored rows (A: home passaggi + servizio flow) ---------- */
.time-rows { list-style: none; margin: 0; padding: 0; }
.time-row {
  display: grid; grid-template-columns: clamp(8rem, 20vw, 12rem) 1fr;
  gap: 1rem 1.5rem;
  border-top: 1px solid var(--hairline);
  padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
}
.time-row:last-child { border-bottom: 1px solid var(--hairline); }
.t-time {
  font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); line-height: 1.3;
  color: var(--green); text-wrap: balance;
}
.t-body h3 { margin: 0; max-width: 26em; text-wrap: balance; }
.t-body p { margin: 0.6rem 0 0; max-width: 58ch; color: var(--ink-muted); }

/* ---------- Sede cards (A home) ---------- */
.sede-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.sede-card {
  background: var(--surface); border-radius: var(--radius-card);
  overflow: hidden; display: flex; flex-direction: column;
}
.sede-card > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.sc-body {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  display: flex; flex-direction: column; flex: 1;
}
.sc-body h3 { margin: 0; font-size: var(--text-h2); }
.sc-body address { font-style: normal; margin: 0.5rem 0 0; font-size: var(--text-body); }
.sc-note { margin: 0.85rem 0 0; font-size: var(--text-small); color: var(--ink-muted); max-width: 40ch; }
.sc-hours {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 1.1rem 0 1.4rem;
  font-size: var(--text-small); color: var(--ink-muted);
}
.sc-cta { margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }

/* ---------- Dark closing CTA (A pages, parts/cta-band.php) ----------
   Photo + veil + localized radial scrim behind the text column: the
   AA-contrast machinery from the mockups, preserved verbatim. */
.cta-dark { position: relative; overflow: hidden; background: var(--ink); text-align: center; color: #FAF8F3; }
/* Applied via sa_img( slug, size, 'cta-dark-img' ) in parts/cta-band.php, not
   in any class= attribute: it is what makes the closing band's photograph a
   full-bleed backdrop behind the veil and the radial scrim. Do not delete it
   because a class scanner reports it as unused. */
.cta-dark-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
}
.cta-dark-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 24, 21, 0.5), rgba(20, 24, 21, 0.4) 45%, rgba(20, 24, 21, 0.64));
}
.cta-dark-in {
  position: relative; z-index: 2; max-width: 50rem;
  margin-inline: auto; padding-block: clamp(6rem, 4rem + 8vw, 9.5rem);
}
.cta-dark-in::before {
  content: ''; position: absolute; inset: -3rem -6rem; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 24, 21, 0.45), transparent 75%);
}
.cta-dark .eyebrow {
  display: block; margin: 0 0 1.3rem;
  font: 500 var(--text-label)/1.5 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-88);
}
.cta-dark h2 { margin: 0; color: #FFFFFF; text-wrap: balance; }
.cta-sub { margin: 1.1rem auto 0; max-width: 34em; color: var(--ivory); }
.cta-actions {
  margin-top: 2.2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
}
/* The --tap-min floor the other display numbers already carry (.tel-hero,
   .tel-display, .aside-tel, .numero). --text-h2 only reaches the 34.8px that
   line-height 1.2 needs to fill 48px at a ~775px viewport, so on every phone
   this link measured ~39px. align-items: flex-end puts the added height ABOVE
   the digits, so the underline stays 0.15em under the text and only the gap
   to the pill above it grows. No layout at load, so no shift. */
.cta-tel {
  display: inline-flex; align-items: flex-end; min-height: var(--tap-min);
  font-family: var(--font-heading); font-size: var(--text-h2);
  line-height: 1.2; letter-spacing: 0.01em;
  color: #FFFFFF; text-decoration: none;
  border-bottom: 1px solid var(--hairline-dark); padding-bottom: 0.15em;
}
.cta-tel:hover { border-bottom-color: var(--ivory); color: #FFFFFF; }
/* The band's third action, so it is a real tap target: the --tap-min box is
   absorbed by the negative margin, leaving the column rhythm unchanged. Same
   treatment as .s-link, .wa-text and .quiet-link. */
.cta-wa {
  font-size: var(--text-small); color: var(--ivory);
  text-underline-offset: 4px;
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding-block: 0.6rem; margin-block: -0.7rem;
}
.cta-wa:hover { color: #FFFFFF; }
.cta-dark :focus-visible { outline-color: var(--ground); }

/* ---------- A openings (ivory or ground, giant signature word) ---------- */
.open-ivory {
  position: relative; overflow: hidden;
  background: var(--ivory); border-bottom: 1px solid var(--hairline);
}
.open-ivory.on-ground { background: var(--ground); border-bottom: 0; }
.open-word {
  position: absolute; top: -0.12em; right: -0.05em; z-index: 0;
  font-family: var(--font-heading); font-style: italic;
  font-size: clamp(7rem, 3.5rem + 14vw, 15rem);
  line-height: 0.8; letter-spacing: -0.04em;
  color: rgba(138, 160, 141, 0.26);
  white-space: nowrap; user-select: none; pointer-events: none;
}
.open-ivory.on-ground .open-word { color: rgba(138, 160, 141, 0.2); }
.open-sig {
  position: absolute; right: -0.07em; bottom: -0.3em; z-index: 0;
  font-family: var(--font-heading); font-style: italic;
  font-size: clamp(9rem, 5rem + 16vw, 19rem);
  line-height: 0.8; letter-spacing: -0.045em;
  color: rgba(138, 160, 141, 0.16);
  user-select: none; pointer-events: none;
}
.open-in {
  position: relative; z-index: 1;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(3rem, 2.5rem + 3vw, 5.5rem);
}
/* 4 Zampe: the signature word is cut by the bottom edge, so the opening
   always keeps more bottom padding than the visible part of the word. */
.open-ivory.has-sig .open-in { padding-bottom: clamp(7rem, 5rem + 8vw, 12rem); }
.open-in h1 { margin: 0; max-width: 15em; text-wrap: balance; }
.open-in > .lead { margin: 1.4rem 0 0; max-width: 36em; color: var(--ink-muted); text-wrap: pretty; }
.open-cta {
  margin-top: 2.2rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
}

/* Servizio opening: main column + hairline rail */
.open-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 4vw, 5.5rem); align-items: start;
  margin-top: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
}
.open-main h1 { margin: 0; max-width: 13em; text-wrap: balance; }
.open-main .lead { margin: 1.5rem 0 0; max-width: 34em; color: var(--ink-muted); text-wrap: pretty; }
.open-rail { border-left: 1px solid var(--hairline); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.open-rail .lab { margin-bottom: 0.8rem; }
.open-rail .meaning {
  margin: 0; font-family: var(--font-heading);
  font-size: var(--text-h3); line-height: 1.4; text-wrap: pretty;
}
.rail-cta { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline); }
.rail-cta .support { margin-top: 0.9rem; }
.rail-cta .also { margin: 0.35rem 0 0; font-size: var(--text-small); color: var(--ink-muted); }

/* 4 Zampe opening: document row under the title, aside with serif phone */
.open-split {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 2rem clamp(2.5rem, 5vw, 5rem); align-items: start;
  margin-top: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
}
.open-split > .lead { margin: 0; color: var(--ink-muted); max-width: 34em; text-wrap: pretty; }
.open-aside { border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.aside-say {
  margin: 0.85rem 0 0;
  font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); line-height: 1.35; max-width: 18em; text-wrap: pretty;
}
.aside-tel {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  margin-top: 0.9rem;
  font-family: var(--font-heading); font-size: var(--text-tel);
  line-height: 1.1; letter-spacing: -0.015em;
  font-variant-numeric: lining-nums; white-space: nowrap;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hairline); padding-bottom: 0.06em;
}
.aside-tel:hover { color: var(--green-dark); border-bottom-color: var(--green); }
.aside-note {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.9rem 0 0;
  font-size: var(--text-small); color: var(--ink-muted);
}

/* Breadcrumbs inside v9 openings: quiet, transparent, above the giant word.
   sa_breadcrumbs() markup is untouched; only the surface changes. */
.open-ivory .breadcrumbs, .open-center .breadcrumbs {
  position: relative; z-index: 1;
  background: transparent; padding-top: 1.2rem;
  color: var(--ink-muted);
}
/* Breadcrumbs sit at the left edge on every page, including the centered
   openings: the trail is a wayfinding tool, so it belongs in one fixed
   place across the site rather than following each page's alignment. */
.open-center .breadcrumbs ol,
.open-ivory .breadcrumbs ol,
.hero-sede .breadcrumbs ol { justify-content: flex-start; }

/* ---------- D openings (centered statement, no photo) ---------- */
.open-center { background: var(--ivory); text-align: center; }
.open-center.on-ground { background: var(--ground); }
.open-center .open-inner {
  max-width: 840px; margin-inline: auto;
  padding-block: clamp(4rem, 7vw, 7.5rem) clamp(5rem, 9vw, 8.5rem);
}
.open-center.on-ground .open-inner {
  padding-block: clamp(3.25rem, 6vw, 6rem) clamp(2rem, 4vw, 3.25rem);
}
.open-center.on-ground .open-inner::after {
  content: ''; display: block; width: 44px; height: 1px;
  background: var(--sage); margin: clamp(2rem, 5vw, 3rem) auto 0;
}
.open-center h1 { margin: 0; text-wrap: balance; }
.open-center h1 em { color: var(--green); }
.open-center h1.h1-mid {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.875rem);
  line-height: 1.12;
}
.open-center .lead {
  margin: clamp(20px, 3vw, 30px) auto 0; max-width: 58ch;
  color: var(--ink-muted); text-wrap: pretty;
}

/* Situazione: the call object (one thing to do: call) */
.call-object { margin-top: clamp(2.75rem, 6.5vw, 4.5rem); }
.call-object::before {
  content: ''; display: block; width: 44px; height: 1px;
  background: var(--sage); margin: 0 auto clamp(20px, 3vw, 28px);
}
.one-thing { margin: 0; font-family: var(--font-heading); font-size: var(--text-h2); line-height: 1.2; }
.one-thing em { color: var(--green); }
/* The display numbers are the most important targets on the site, so the
   --tap-min floor is explicit: at the small end of their clamp the line box
   alone drops under 48px. */
.tel-hero {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  margin-top: clamp(18px, 3vw, 26px);
  font-family: var(--font-heading); font-size: var(--text-tel-band);
  line-height: 1.05; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.tel-hero:hover {
  text-decoration: underline; text-underline-offset: 8px;
  text-decoration-thickness: 1px; text-decoration-color: var(--sage);
}
.call-object .cta-row { margin-top: clamp(22px, 3.5vw, 30px); }

/* Contatti: the display number is the page */
.numero-block { margin-top: clamp(2.875rem, 6.5vw, 4.75rem); }
.numero-block .kick-serif { margin-bottom: clamp(14px, 2.2vw, 20px); }
/* Stays inline-block, not inline-flex: the '+39' is raised with vertical-align
   and would lose its alignment inside a flex container. min-height alone gives
   the 48px floor at the small end of --text-num. */
.numero {
  display: inline-block; min-height: var(--tap-min);
  text-decoration: none; color: var(--ink);
  font-family: var(--font-heading); font-size: var(--text-num);
  line-height: 1.02; letter-spacing: 0.005em;
}
.numero .cc {
  font-size: 0.3em; color: var(--green); letter-spacing: 0.08em;
  vertical-align: 1.45em; margin-right: 0.28em;
}
.numero .digits { white-space: nowrap; }
.numero:hover .digits {
  text-decoration: underline; text-underline-offset: 0.14em;
  text-decoration-thickness: 1px; text-decoration-color: var(--sage);
}
.numero-meta {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 2vw, 20px);
  margin: clamp(20px, 3vw, 28px) auto 0; max-width: 560px;
  font: 500 var(--text-label)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--green);
}
.numero-meta::before, .numero-meta::after {
  content: ''; height: 1px; background: var(--hairline); flex: 1 1 0;
}
.wa-text {
  font: 500 var(--text-small)/1.5 var(--font-body); color: var(--green);
  text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 1px; text-decoration-color: var(--sage);
  display: inline-flex; align-items: center; min-height: var(--tap-min);
}
.wa-text:hover { color: var(--green-dark); text-decoration-color: var(--green); }

/* ---------- Figures ---------- */
.open-figure { padding-bottom: var(--band-pad); }
.figure-doc { margin: 0; }
.figure-doc img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--radius-card);
}
.figure-doc figcaption {
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small); color: var(--ink-muted); max-width: 52em;
}
.dest-figure img { aspect-ratio: 4 / 5; object-position: 50% 55%; }
.interlude { margin: 0; }
.interlude img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  object-position: 50% 45%; border-radius: var(--radius-hero);
}
.interlude figcaption {
  margin-top: 14px; text-align: center;
  font-size: var(--text-small); color: var(--ink-muted);
}
.interlude.narrow { margin: clamp(4rem, 8vw, 6.5rem) auto 0; max-width: 980px; }
.interlude-band { padding-block: 0 var(--band-pad); }
.team-photo { margin: 0; padding-bottom: clamp(4rem, 6vw, 6.5rem); }
.team-photo img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 34%;
}
.team-photo figcaption {
  max-width: 640px; margin-inline: auto;
  padding: 16px clamp(20px, 4vw, 40px) 0;
  text-align: center; font-size: var(--text-small); color: var(--ink-muted);
}
.photo-wide { margin: clamp(2.25rem, 1.8rem + 2vw, 3.5rem) 0 0; }
.photo-wide img {
  width: 100%; height: clamp(230px, 11rem + 20vw, 470px);
  object-fit: cover; object-position: center 58%;
}
.photo-wide figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.35rem 1.75rem;
  margin-top: 1rem; padding-top: 0.95rem;
  border-top: 1px solid var(--hairline);
}
.photo-wide .cap {
  margin: 0; font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); line-height: 1.4;
  color: var(--ink-muted); max-width: 34em;
}

/* ---------- Servizi hub: the registry of groups ---------- */
.gruppo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem clamp(3rem, 5vw, 5.5rem);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2.75rem, 2.2rem + 2.5vw, 4.25rem);
}
.gruppo:first-child { border-top: 0; padding-top: clamp(3.5rem, 2.8rem + 3vw, 5.5rem); }
.g-left .kick { margin-bottom: 1rem; }
.g-left h2 { margin: 0; max-width: 14em; text-wrap: balance; }
.g-body { margin: 0.9rem 0 0; color: var(--ink-muted); max-width: 32em; }
.g-body a { color: var(--green); }
.g-body a:hover { color: var(--green-dark); }
.g-owner {
  margin: 1.5rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--hairline); max-width: 32em;
}
.g-owner em {
  font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); line-height: 1.3; color: var(--green);
}
.g-owner span { display: block; margin-top: 0.3rem; font-size: var(--text-small); color: var(--ink-muted); }
.g-rows { list-style: none; margin: 0; padding: 0; align-self: start; }
.s-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 2rem; align-items: baseline;
  border-top: 1px solid var(--hairline); padding-block: 1.3rem;
}
.s-row:first-child { border-top: 0; padding-top: 0.25rem; }
.s-row:last-child { padding-bottom: 0; }
.s-name {
  margin: 0; font-family: var(--font-heading); font-weight: 400;
  font-size: var(--text-h3); line-height: 1.25;
}
.s-note { grid-column: 1; margin: 0.15rem 0 0; font-size: var(--text-small); color: var(--ink-muted); max-width: 44ch; }
/* The only link in each service row, so it must be a real tap target: the
   --tap-min box is absorbed by the negative margin, leaving the row height
   unchanged. Same treatment as .wa-text and .quiet-link. */
.s-link {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font: 500 var(--text-small)/1.3 var(--font-body); color: var(--green);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  padding-block: 0.6rem; margin-block: -0.9rem; white-space: nowrap;
}
.s-link:hover { color: var(--green-dark); }
.separato {
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 1.5rem 3rem;
  padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.separato .kick { margin-bottom: 0.8rem; }
.separato h2 { margin: 0; font-size: var(--text-h3); }
.separato p { margin: 0.5rem 0 0; font-size: var(--text-small); color: var(--ink-muted); max-width: 46ch; }

/* ---------- Preventivo rows + team line (A servizi) ---------- */
.prev-rows { list-style: none; margin: 0; padding: 0; max-width: 56rem; }
.prev-row {
  display: grid; grid-template-columns: clamp(8rem, 18vw, 12rem) 1fr;
  gap: 0.5rem 2rem; align-items: baseline;
  border-top: 1px solid var(--hairline); padding-block: 1.4rem;
}
.prev-row .lab { line-height: 1.4; }
.prev-row p {
  margin: 0; font-family: var(--font-heading);
  font-size: var(--text-h3); line-height: 1.4; text-wrap: pretty; max-width: 30em;
}
.team-line {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.4rem; border-top: 1px solid var(--hairline); max-width: 56rem;
}
.team-line p {
  margin: 0; font-family: var(--font-heading);
  font-size: var(--text-h3); line-height: 1.5; text-wrap: pretty; max-width: 34em;
}
.team-line em { color: var(--green); }

/* ---------- Servizio: destinazione (labeled serif list + figure) ---------- */
.dest-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 4vw, 5rem); align-items: start;
}
.dest-text .kick { margin-bottom: 1.1rem; }
.dest-text h2 { margin: 0; max-width: 16em; text-wrap: balance; }
.dest-text .lead { margin: 1rem 0 0; color: var(--ink-muted); max-width: 34em; }
.dest-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.dest-item { border-top: 1px solid var(--hairline); padding-block: 1.15rem; }
.dest-item:last-child { border-bottom: 1px solid var(--hairline); }
.dest-item .lab { margin-bottom: 0.55rem; }
.dest-item p {
  margin: 0; font-family: var(--font-heading);
  font-size: var(--text-h3); line-height: 1.35; text-wrap: pretty; max-width: 26em;
}
.dest-foot { margin: 1.4rem 0 0; font-size: var(--text-small); color: var(--ink-muted); max-width: 36em; }

/* ---------- Servizio: noi / voi hairline columns ---------- */
.duo-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 3vw, 4rem); }
.col-h {
  margin: 0 0 0.4rem;
  font: 500 var(--text-label)/1.2 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.duo-split ul { list-style: none; margin: 0; padding: 0; }
.duo-split li {
  border-top: 1px solid var(--hairline); padding-block: 1.05rem;
  font-family: var(--font-heading); font-size: var(--text-h3);
  line-height: 1.35; text-wrap: pretty;
}
.duo-split li:last-child { border-bottom: 1px solid var(--hairline); }
.split-notes {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 3vw, 4rem);
  margin-top: clamp(2.75rem, 2rem + 2.5vw, 4.25rem);
}
.split-note { border-top: 1px solid var(--hairline); padding-top: 1.25rem; }
.split-note .lab { margin-bottom: 0.7rem; }
.split-note p { margin: 0; color: var(--ink-muted); max-width: 34em; }

/* ---------- Servizio: FAQ hairline rows + related paths ---------- */
.faq-rows { margin: 0; }
.faq-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0.6rem 3rem;
  border-top: 1px solid var(--hairline);
  padding-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}
.faq-row:last-child { border-bottom: 1px solid var(--hairline); }
.faq-row dt {
  font-family: var(--font-heading); font-size: var(--text-h3);
  line-height: 1.3; text-wrap: balance; font-weight: 400;
}
.faq-row dd { margin: 0; color: var(--ink-muted); max-width: 52ch; }
.rel { margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); }
.rel .lab { margin-bottom: 1.25rem; }
.rel-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.rel-list li { border-top: 1px solid var(--hairline); }
.rel-list a {
  display: inline-block; padding-block: 1.05rem;
  font-family: var(--font-heading); font-size: var(--text-h3);
  line-height: 1.3; text-decoration: none; color: var(--ink);
}
.rel-list a:hover {
  color: var(--green); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}

/* ---------- 4 Zampe ---------- */
.say-line {
  margin: 1.2rem 0 0;
  font-family: var(--font-heading); font-size: var(--text-say);
  line-height: 1.42; color: var(--ink); max-width: 26em; text-wrap: pretty;
}
.path-rows {
  list-style: none; padding: 0;
  margin: clamp(2rem, 1.6rem + 1.6vw, 3rem) 0 0;
  border-bottom: 1px solid var(--hairline);
}
.path-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0.6rem clamp(2rem, 4.5vw, 4.5rem);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
}
.pr-k h3 { margin: 0.5rem 0 0; max-width: 13em; text-wrap: balance; }
.pr-b p { margin: 0; color: var(--ink-muted); max-width: 56ch; }
.pr-b p + p { margin-top: 0.6rem; }
.pr-b a { color: var(--green); }
.pr-b a:hover { color: var(--green-dark); }
.family { background: var(--surface); padding-block: var(--band-pad); }
.family h2 { margin: 0; max-width: 16em; text-wrap: balance; }
.fam-lead { margin: 1rem 0 0; color: var(--ink-muted); max-width: 36em; }
.names-grid {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin: clamp(1.75rem, 1.5rem + 1.4vw, 2.5rem) 0 0;
  border-bottom: 1px solid var(--hairline);
}
.names-grid li { border-top: 1px solid var(--hairline); padding-block: 1.05rem; }
.names-grid .n { display: block; font-family: var(--font-heading); font-size: var(--text-h3); line-height: 1.25; }
.names-grid .r { display: block; margin-top: 0.1rem; font-size: var(--text-small); color: var(--ink-muted); }
.fam-cta { margin-top: clamp(2rem, 1.7rem + 1.4vw, 3rem); }
.fam-say {
  margin: 0; font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h2); line-height: 1.28;
  color: var(--green-dark); max-width: 15em; text-wrap: pretty;
}
.fam-cta .cta-row { margin-top: 1.5rem; }
.fam-cta .support { margin-top: 1rem; }
.fam-foot {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 1.4rem clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.5rem; border-top: 1px solid var(--hairline);
}
.fam-foot .t { margin: 0.5rem 0 0; font-size: var(--text-small); color: var(--ink-muted); max-width: 36ch; }
.fam-foot .t span { display: block; }

/* ---------- Chi siamo (D): portraits, story ---------- */
.portraits { margin-top: clamp(1.75rem, 4vw, 2.75rem); text-align: center; }
.portrait { padding-block: clamp(2.25rem, 5.5vw, 4rem); }
.portrait .name {
  margin: 0; font-family: var(--font-heading);
  font-size: clamp(2rem, 1.55rem + 2.2vw, 3rem); line-height: 1.1;
}
.portrait .name::after {
  content: ''; display: block; width: 44px; height: 1px;
  background: var(--sage); margin: clamp(16px, 2.5vw, 22px) auto 0;
}
.portrait .role {
  margin: 14px 0 0;
  font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); line-height: 1.4;
  color: var(--green); text-wrap: balance;
}
.portrait .about { margin: 12px auto 0; max-width: 52ch; color: var(--ink-muted); text-wrap: pretty; }
.group-rule {
  width: min(300px, 64%); height: 1px; border: 0;
  background: var(--hairline);
  margin: clamp(6px, 1.5vw, 14px) auto;
}
.story-inner { max-width: 760px; margin-inline: auto; text-align: center; }
.story-inner h2 {
  margin: 0;
  font: 500 var(--text-small)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--green);
}
.story-p {
  margin: 0; font-family: var(--font-heading);
  font-size: var(--text-h3); line-height: 1.55;
  color: var(--ink); text-wrap: pretty;
}
.story-inner h2 + .story-p { margin-top: clamp(28px, 4vw, 40px); }
.story-p + .story-p { margin-top: clamp(24px, 3.5vw, 36px); }
.story-p em { color: var(--green); }
.story-more { margin: clamp(30px, 4vw, 42px) 0 0; }
.story-more a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding-block: 0.6rem;
  font: 500 var(--text-small)/1.4 var(--font-body); color: var(--green);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1px; text-decoration-color: var(--sage);
}
.story-more a:hover { color: var(--green-dark); text-decoration-color: var(--green-dark); }

/* ---------- Situazione (D): triage, lists, E se... ---------- */
.triage {
  max-width: 1020px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
}
.situation { padding: clamp(2.25rem, 5vw, 3.5rem) 0 0; }
.situation + .situation { border-left: 1px solid var(--hairline); padding-left: clamp(28px, 4.5vw, 64px); }
.situation:first-child { padding-right: clamp(28px, 4.5vw, 64px); }
.situation h3 { margin: 0; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); max-width: 22ch; }
.situation p { margin: 14px 0 0; color: var(--ink-muted); max-width: 52ch; }
.situation .go {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  margin-top: 0.5rem; padding-block: 0.6rem;
  font: 500 var(--text-small)/1.5 var(--font-body); color: var(--green);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1px; text-decoration-color: var(--sage);
}
.situation .go:hover { text-decoration-color: var(--green); color: var(--green-dark); }
.triage-close { margin: clamp(3.25rem, 7vw, 5rem) auto 0; text-align: center; max-width: 560px; }
.triage-close::before {
  content: ''; display: block; width: 44px; height: 1px;
  background: var(--sage); margin: 0 auto 18px;
}
.triage-close .q {
  margin: 0; font-family: var(--font-heading);
  font-size: var(--text-h2); line-height: 1.25;
  color: var(--ink); text-wrap: balance;
}
.triage-close .q em { color: var(--green); }
.triage-close p { margin: 14px 0 0; color: var(--ink-muted); }
.lists {
  margin: 0 auto; max-width: 920px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.75rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
  text-align: center;
}
.list-col h3 {
  margin: 0; font-family: var(--font-heading); font-style: italic;
  color: var(--green); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}
.list-col .note { margin: 8px 0 0; font-size: var(--text-small); color: var(--ink-muted); }
.list-col ul { list-style: none; margin: 22px 0 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.list-col li { padding-block: 13px; border-top: 1px solid var(--hairline); }
/* Always used standalone, never inside a sentence, so it can be a real tap
   target: --tap-min like .wa-text, which is the 48px the accessibilita page
   promises. */
.quiet-link {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  margin-top: 20px; padding-block: 0.6rem;
  font: 500 var(--text-small)/1.5 var(--font-body); color: var(--green);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1px; text-decoration-color: var(--sage);
}
.quiet-link:hover { color: var(--green-dark); text-decoration-color: var(--green); }
.docs-note {
  margin: clamp(3rem, 6.5vw, 4.5rem) auto 0; max-width: 52ch;
  text-align: center; color: var(--ink-muted);
}
.docs-note::before {
  content: ''; display: block; width: 44px; height: 1px;
  background: var(--sage); margin: 0 auto 18px;
}
.lead-in {
  display: block; margin-bottom: 10px;
  font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); color: var(--green);
}
.ese-head { text-align: center; }
.ese-head h2 { margin: 14px 0 0; font-size: var(--text-display); line-height: 1.05; }
.ese { max-width: 680px; margin: clamp(2.5rem, 5.5vw, 3.75rem) auto 0; text-align: center; }
.ese-item { padding-block: clamp(1.875rem, 4.5vw, 2.875rem); }
.ese-item + .ese-item { border-top: 1px solid var(--hairline); }
.ese-item h3 {
  margin: 0; font-style: italic; color: var(--green);
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  line-height: 1.25; text-wrap: balance;
}
.ese-item p { margin: 12px auto 0; max-width: 46ch; color: var(--ink-muted); }
.ese-close { margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; text-align: center; color: var(--ink-muted); }

/* ---------- Person attribution (D signature: 44px rule + italic name) ---------- */
.attrib { max-width: 38ch; margin: clamp(2.5rem, 5vw, 4rem) auto 0; text-align: center; }
.attrib::before {
  content: ''; display: block; width: 44px; height: 1px;
  background: var(--sage); margin: 0 auto clamp(16px, 2.5vw, 22px);
}
.attrib .name {
  margin: 0; font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); line-height: 1.45;
  color: var(--green); text-wrap: balance;
}
.attrib .role { margin: 6px 0 0; font-size: var(--text-small); color: var(--ink-muted); }
.attrib .about { margin: clamp(22px, 3vw, 30px) 0 0; color: var(--ink-muted); }
.attrib.big .name { font-size: var(--text-h2); line-height: 1.25; }
.attrib.wide { max-width: 620px; }
.attrib.left { margin-inline: 0; text-align: left; max-width: none; }
.attrib.left::before { margin: 0 0 14px; }
.situation .attrib { margin-top: clamp(24px, 3.5vw, 34px); }

/* ---------- Sede (D): photographic hero ---------- */
.hero-sede {
  position: relative; overflow: hidden; color: #FFFFFF;
  min-height: clamp(560px, 78vh, 760px);
  display: flex; flex-direction: column;
}
.hs-media, .hs-veil { position: absolute; inset: 0; }
.hs-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hs-veil {
  background: linear-gradient(180deg, rgba(20, 24, 21, 0.5), rgba(20, 24, 21, 0.4) 45%, rgba(20, 24, 21, 0.64));
}
.hero-sede .breadcrumbs {
  position: relative; z-index: 1;
  background: transparent; padding-top: 1.4rem;
  color: var(--ivory);
}
.hero-sede .breadcrumbs a { color: var(--ivory); }
.hero-sede .breadcrumbs a:hover { color: #FFFFFF; }
.hero-sede .breadcrumbs li[aria-current] { color: #FFFFFF; }
.hero-sede .breadcrumbs li + li::before {
  border-right-color: var(--ivory-70); border-top-color: var(--ivory-70);
}
.hs-center {
  position: relative; z-index: 1; flex: 1; width: 100%;
  display: grid; place-items: center; text-align: center;
  padding-block: clamp(3.5rem, 9vw, 6rem);
}
.hs-inner {
  max-width: 820px; margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 44px);
}
.hero-sede .kick-serif { color: var(--ivory); text-shadow: 0 1px 20px rgba(20, 24, 21, 0.35); }
.hero-sede h1 {
  margin: 0; color: #FFFFFF; text-wrap: balance;
  text-shadow: 0 1px 28px rgba(20, 24, 21, 0.35);
}
.hs-address {
  margin: clamp(18px, 3vw, 26px) 0 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 2.5vw, 18px);
  font-family: var(--font-heading); font-size: var(--text-h3);
  color: var(--ivory); text-shadow: 0 1px 20px rgba(20, 24, 21, 0.35);
}
.hs-address::before, .hs-address::after {
  content: ''; width: clamp(24px, 5vw, 44px); height: 1px;
  background: var(--ivory-55); flex: none;
}
.hero-sede .lead {
  margin: clamp(16px, 2.5vw, 22px) auto 0; max-width: 58ch;
  color: var(--ivory); text-shadow: 0 1px 20px rgba(20, 24, 21, 0.35);
}
.hero-sede .cta-row { margin-top: clamp(28px, 4vw, 36px); justify-content: center; }
.hero-sede .assure { color: var(--ivory); text-shadow: 0 1px 20px rgba(20, 24, 21, 0.35); }
.hero-sede :focus-visible { outline-color: var(--ground); }

/* ---------- Statement band (D) ---------- */
.state-band { text-align: center; }
.state-line {
  margin: 0 auto; font-family: var(--font-heading);
  font-size: var(--text-h2); line-height: 1.28;
  max-width: 34ch; text-wrap: balance;
}
/* Contatti pairs the uppercase label directly with the display-size line, and
   both carry margin 0 - so the pair needs its own breath, in the rhythm
   .band-head-center already uses (h2 margin-top 14px). */
.state-band .lab + .state-line { margin-top: clamp(14px, 2.2vw, 20px); }
.state-line em { color: var(--green); }
.state-line.xl {
  font-size: var(--text-display); line-height: 1.08;
  letter-spacing: -0.015em; max-width: 20ch;
}
.state-proof { margin: clamp(20px, 3vw, 28px) auto 0; color: var(--ink-muted); max-width: 52ch; }

/* ---------- Sede: centered info panel ---------- */
.panel {
  margin: 0 auto; max-width: 780px;
  background: var(--ground);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  padding-inline: clamp(24px, 5vw, 56px);
}
.panel-row {
  display: grid; grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 10px clamp(24px, 4vw, 48px);
  padding-block: clamp(26px, 4vw, 36px);
}
.panel-row + .panel-row { border-top: 1px solid var(--hairline); }
.panel-label {
  margin: 0; padding-top: 0.35em;
  font: 500 var(--text-small)/1.5 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--green);
}
.panel-value p { margin: 0; color: var(--ink-muted); }
.panel-value .address-line {
  font-family: var(--font-heading); font-size: var(--text-h3);
  color: var(--ink); line-height: 1.35;
}
.panel-hours { margin: 0; }
.panel-hours > div {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 2px 24px;
  padding-block: 7px;
}
.panel-hours dt { color: var(--ink-muted); font-weight: 400; }
.panel-hours dd {
  margin: 0; font-family: var(--font-heading);
  font-size: var(--text-h3); color: var(--ink); white-space: nowrap;
}
.panel-hours .closed { font-style: italic; font-size: 1.125rem; white-space: normal; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Sede: practical hairline list ---------- */
.practical-list { margin: 0 auto; max-width: 720px; }
.practical-item { padding-block: clamp(26px, 4vw, 36px); border-top: 1px solid var(--hairline); }
.practical-item:last-child { border-bottom: 1px solid var(--hairline); }
.practical-item h3 { margin: 0; }
.practical-item p { margin: 10px 0 0; color: var(--ink-muted); max-width: 58ch; }
.practical-item p + p { margin-top: 14px; }
.practical-item a {
  color: var(--green-dark);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  text-decoration-color: var(--sage);
}
.practical-item a:hover { color: var(--green); }

/* ---------- Sedi hub: two hairline columns ---------- */
.sedi-cols { display: grid; grid-template-columns: 1fr 1fr; }
.sede-col { text-align: center; padding-inline: clamp(16px, 4.5vw, 64px); }
.sede-col + .sede-col { border-left: 1px solid var(--hairline); }
.sede-col .place { margin: 0; font-size: var(--text-h2); }
.sede-col .tagline {
  margin: 8px 0 0; font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); color: var(--green);
}
.sede-col .about { margin: clamp(18px, 2.5vw, 24px) auto 0; max-width: 44ch; color: var(--ink-muted); }
.fact-rows { margin: clamp(28px, 4vw, 40px) 0 0; }
.fact-rows > div { padding-block: 16px; border-top: 1px solid var(--hairline); }
.fact-rows > div:last-child { border-bottom: 1px solid var(--hairline); }
.fact-rows dt {
  font: 500 var(--text-small)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--green);
}
.fact-rows dd { margin: 2px 0 0; color: var(--ink-muted); }
.sede-col .attrib { margin-top: clamp(28px, 4vw, 38px); }
.sede-col .btn { margin-top: clamp(26px, 4vw, 36px); }
.sedi-close {
  margin: clamp(3.25rem, 7vw, 5rem) auto 0; max-width: 52ch;
  text-align: center; color: var(--ink-muted);
}
.sedi-close::before {
  content: ''; display: block; width: 44px; height: 1px;
  background: var(--sage); margin: 0 auto 18px;
}

/* ---------- Contatti: tiles, email, sedi list, minimal form ---------- */
.contact-tiles {
  margin: 0 auto; max-width: 960px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
}
.contact-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; text-decoration: none; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 3px;
  padding: clamp(32px, 4.5vw, 48px) clamp(22px, 3.5vw, 40px);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.contact-tile:hover { border-color: var(--green); background: rgba(138, 160, 141, 0.07); }
.ct-label { font-family: var(--font-heading); font-size: var(--text-h3); line-height: 1.3; }
.ct-line {
  margin-top: 14px; max-width: 34ch;
  font-family: var(--font-heading); font-style: italic;
  line-height: 1.5; color: var(--ink-muted);
}
.ct-meta {
  margin-top: auto; padding-top: clamp(20px, 3vw, 28px);
  font: 500 var(--text-small)/1.4 var(--font-body); color: var(--green);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1px; text-decoration-color: var(--sage);
}
.contact-tile:hover .ct-meta { text-decoration-color: var(--green); }
.email-row {
  margin: clamp(3rem, 6.5vw, 4.75rem) auto 0; max-width: 52ch;
  text-align: center;
  border-top: 1px solid var(--hairline); padding-top: clamp(34px, 4.5vw, 48px);
}
.email-row h3 { margin: 0; font-style: italic; color: var(--green); }
.email-row p { margin: 12px 0 0; color: var(--ink-muted); }
.email-row .quiet-link { margin-top: 8px; }
.sede-list { margin: 0 auto; max-width: 620px; text-align: center; border-bottom: 1px solid var(--hairline); }
.sede-item { padding-block: clamp(34px, 4.5vw, 52px); border-top: 1px solid var(--hairline); }
.sede-item h3 {
  margin: 0; font-style: italic; color: var(--green);
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
}
.sede-item .where { margin: 10px 0 0; }
.sede-item .about { margin: 2px 0 0; color: var(--ink-muted); font-size: var(--text-small); }
.sede-item .quiet-link { margin-top: 14px; }
.hours-list {
  list-style: none; padding: 0;
  margin: clamp(20px, 3vw, 26px) auto 0; max-width: 400px;
  font-size: var(--text-small); color: var(--ink-muted);
}
.hours-list li {
  display: flex; justify-content: space-between; gap: 18px;
  text-align: left; padding-block: 9px;
  border-top: 1px solid var(--hairline);
}
.hours-list li:first-child { border-top: 0; }
.hours-list .val { text-align: right; color: var(--ink); }

/* Minimal form voice: scoped overrides of the base .sa-form. The REAL
   form (admin-post sa_contact, nonce, timestamp, honeypot, notices)
   keeps its markup; only the dress changes. */
.form-band .form-notice { margin-inline: auto; max-width: 600px; }
.sa-form.form-min { margin: 0 auto; max-width: 600px; }
.form-min .field { margin-bottom: clamp(30px, 4vw, 42px); }
.form-min label {
  font: 500 var(--text-label)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-muted); margin-bottom: 8px;
}
/* One combined "telefono o email" field, typed text: no email input exists.
   The underline is the control's only visible boundary, so it carries the 3:1
   that WCAG 2.1 AA 1.4.11 asks of a UI component: --green is 6.5:1 on
   --ground, where --hairline was 1.49:1 and --sage only 2.64:1. */
/* The fields read as fields. The underline-only treatment was elegant but
   people could not tell where to click, so each control now has its own
   surface, a full border and real padding. --green on the boundary keeps the
   3:1 that WCAG 2.1 AA 1.4.11 asks of a UI component (6.5:1 on --ground). */
.form-min input[type='text'],
.form-min textarea {
  width: 100%;
  font-family: var(--font-heading); font-size: 1.1875rem; line-height: 1.5;
  color: var(--ink); background: #FFFEFA;
  border: 1px solid var(--green); border-radius: var(--radius-control);
  padding: 14px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-min input[type='text']::placeholder,
.form-min textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.form-min input[type='text']:hover,
.form-min textarea:hover { border-color: var(--green-dark); }
.form-min input[type='text']:focus,
.form-min textarea:focus {
  border-color: var(--green-dark);
  box-shadow: 0 0 0 3px rgba(69, 96, 78, 0.18);
  outline: none;
}
.form-min textarea { min-height: 120px; }
.form-min .consent { gap: 14px; }
.form-min .consent label {
  text-transform: none; letter-spacing: 0;
  font: 400 var(--text-small)/1.55 var(--font-body);
  color: var(--ink-muted); margin-bottom: 0;
}
.form-min .form-actions { text-align: center; margin-top: clamp(34px, 4.5vw, 46px); }
.form-min .form-actions .cta-note { margin: 18px 0 0; }

/* ---------- Phone band (D dark closing, green-dark) ---------- */
.phone-band { background: var(--green-dark); color: var(--ivory); text-align: center; }
.phone-band .eyebrow {
  display: block; margin: 0;
  font: 500 var(--text-small)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ivory-88);
}
.phone-band h2 { margin: 16px 0 0; color: #FFFFFF; text-wrap: balance; }
.pb-body { margin: 18px auto 0; max-width: 52ch; color: rgba(241, 237, 228, 0.85); }
.tel-display {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  margin-top: clamp(26px, 4vw, 36px);
  font-family: var(--font-heading); font-size: var(--text-tel-band);
  line-height: 1.05; letter-spacing: 0.01em; white-space: nowrap;
  color: #FFFFFF; text-decoration: none;
}
.tel-display:hover {
  /* The colour is repeated here on purpose. The global `a:hover` rule sets
     color: var(--green-dark) at specificity (0,1,1), which outranks the
     single-class .tel-display (0,1,0) - so without this line the closing number
     turned --green-dark on hover, and --green-dark is exactly .phone-band's own
     background. The number disappeared under the cursor on nine pages.
     Any future link that sets its own colour on a dark band needs the same
     repetition, or it will inherit the light-ground hover colour. */
  color: #FFFFFF;
  text-decoration: underline; text-underline-offset: 8px;
  text-decoration-thickness: 1px; text-decoration-color: var(--sage);
}
.phone-band .cta-row { margin-top: clamp(26px, 4vw, 34px); justify-content: center; }
.pb-line {
  margin: clamp(18px, 3vw, 26px) auto 0; max-width: 44ch;
  font-family: var(--font-heading); font-style: italic;
  font-size: var(--text-h3); color: var(--ivory);
}
.pb-proof { margin: 26px 0 0; font-size: var(--text-small); color: var(--ivory-88); }
.phone-band .numero-meta { color: var(--ivory-88); margin-top: clamp(18px, 2.5vw, 24px); }
.phone-band .numero-meta::before,
.phone-band .numero-meta::after { background: rgba(241, 237, 228, 0.28); }
.phone-band :focus-visible { outline-color: var(--ground); }

/* ---------- Related (per continuare) ---------- */
.related { padding-block: clamp(4rem, 8vw, 6rem); }
.related-label {
  margin: 0;
  font: 500 var(--text-small)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--green);
}
.related-grid {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.related-grid a {
  display: block; text-decoration: none;
  border-top: 1px solid var(--hairline); padding-top: 20px;
}
.related-grid h3 { margin: 0; color: var(--ink); transition: color 0.2s ease; }
.related-grid p { margin: 8px 0 0; font-size: var(--text-small); color: var(--ink-muted); }
.related-grid a:hover h3 {
  color: var(--green); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}

/* The v8 component rules that page.php, 404.php, archive-necrologio.php and
   single-necrologio.php used to emit (.card, .legal-content, .cerimonia-box,
   .condoglianze, .link-list, .hero-compact, .h2-sub and the mt- and mb-tight
   utilities) were removed with the markup: those four templates now speak the
   v9 language like every other page, so nothing referenced them any more. */

/* ---------- Scroll anchor for the floating H24 control ----------
   assets/js/main.js is chrome and byte-identical to v8: it finds the anchor
   for the mandated floating contact with '.hero-full, .hero, .hero-typo' and
   shows the control once that element has scrolled past. The v9 openings are
   new classes, so each of them also carries the marker token 'hero-typo';
   without it the observer falls back to #main and the control never appears
   on an inner page. Do not remove the token from the templates.
   These rules cancel the v8 typographic-head styling the token drags in: the
   openings keep their own surface (set later in this layer, so it already
   wins), their own vertical rhythm and the display-size h1. */
.open-ivory.hero-typo,
.open-center.hero-typo,
.hero-sede.hero-typo { padding-block: 0; }
.hero-sede.hero-typo { background: none; }
.open-ivory.hero-typo h1,
.open-center.hero-typo h1:not(.h1-mid),
.hero-sede.hero-typo h1 { font-size: var(--text-display); }

/* Breadcrumbs are the one navigational element on every inner page, so their
   links get the same 48px target the /accessibilita/ page promises. The base
   rule's 6px padding left them at 38px. */
.breadcrumbs a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min); padding-block: 0;
}

/* Arcella's column carries two actions (the sede page and the map), so the
   pair sits in a centered row instead of two separately offset buttons. */
.sede-col .cta-row { margin-top: clamp(26px, 4vw, 36px); justify-content: center; }
.sede-col .cta-row .btn { margin-top: 0; }

/* A quiet link inside a .cta-row is a flex item, and under 560px that row
   stretches its items to full width - so the label stays centered in a
   centered band instead of sliding to the left edge. */
.cta-row .quiet-link { justify-content: center; }

/* The staggered text entrance was removed on the owner's instruction:
   everything must be visible immediately. Nothing replaces it, so the
   openings paint in one pass with no opacity or transform to undo. */

/* ---------- v9 responsive: same stages as the base layers ---------- */
@media (max-width: 1020px) {
  .chi-grid { grid-template-columns: 1fr; gap: 3rem; }
  .chi-figure img { aspect-ratio: 3 / 2; object-position: 50% 30%; }
  .gruppo { grid-template-columns: 1fr; gap: 1.75rem; }
  .gruppo .g-rows { border-top: 1px solid var(--hairline); }
  .gruppo .g-rows .s-row:first-child { padding-top: 1.3rem; }
  .open-grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .open-rail {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--hairline); padding-top: 2rem; max-width: 34rem;
  }
  .dest-grid { grid-template-columns: 1fr; gap: 3rem; }
  .dest-figure img { aspect-ratio: 3 / 2; }
  .names-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fam-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .proof { grid-template-columns: 1fr; gap: 1.75rem; }
  .time-row { grid-template-columns: 1fr; gap: 0.45rem 0; }
  .sede-cards { grid-template-columns: 1fr; }
  .name-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .prev-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .separato { grid-template-columns: 1fr; justify-items: start; }
  .duo-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split-notes { grid-template-columns: 1fr; gap: 1.75rem; }
  .faq-row { grid-template-columns: 1fr; }
  .rel-list { grid-template-columns: 1fr; gap: 0; }
  .rel-list li:last-child { border-bottom: 1px solid var(--hairline); }
  .open-split { grid-template-columns: 1fr; gap: 1.75rem; }
  .open-aside { max-width: 32em; }
  .path-row { grid-template-columns: 1fr; gap: 0.5rem 0; }
  .pr-k h3 { margin-top: 0.3rem; max-width: 22em; }
  .triage { grid-template-columns: 1fr; border-top: 0; }
  .situation {
    border-top: 1px solid var(--hairline);
    padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(8px, 2vw, 16px);
  }
  .situation + .situation { border-left: 0; padding-left: 0; }
  .situation:first-child { padding-right: 0; }
  .lists { grid-template-columns: 1fr; max-width: 520px; }
  .contact-tiles { grid-template-columns: 1fr; max-width: 520px; }
  .sedi-cols { grid-template-columns: 1fr; }
  .sede-col + .sede-col {
    border-left: 0; border-top: 1px solid var(--hairline);
    margin-top: clamp(2.75rem, 8vw, 4rem); padding-top: clamp(2.75rem, 8vw, 4rem);
  }
  .related-grid { grid-template-columns: 1fr; }
  /* The dest figure keeps its own crop (3 / 2, set at 1020px): scoping this
     rule stops the later, equally specific selector from swallowing it. */
  .figure-doc:not(.dest-figure) img { aspect-ratio: 16 / 10; }
  .hero-sede { min-height: min(78vh, 640px); }
}
@media (max-width: 640px) {
  .interlude img, .team-photo img { aspect-ratio: 4 / 3; }
  .names-grid, .fam-foot { grid-template-columns: 1fr; }
  .panel-row { grid-template-columns: 1fr; gap: 14px; }
  .panel-label { padding-top: 0; }
  .panel-hours > div { display: block; padding-block: 9px; }
  .panel-hours dd { white-space: normal; }
  .open-word { opacity: 0.8; }
  .open-sig { color: rgba(138, 160, 141, 0.12); }
  .heritage-num { opacity: 0.85; }
}
@media (max-width: 560px) {
  .s-row { grid-template-columns: 1fr; }
  .s-link { grid-column: 1; grid-row: auto; justify-self: start; margin-block: 0.35rem 0; }
  .hours-list li { flex-direction: column; gap: 2px; }
  .hours-list .val { text-align: left; }
  .tel-hero, .tel-display { font-size: clamp(2.25rem, 1.5rem + 6vw, 2.75rem); }
  .open-center .open-inner { padding-block: 3.5rem 4.25rem; }
  .portrait { padding-block: 30px; }
}