/* Self-hosted (latin subset, variable weight; both fonts are SIL OFL). Loading
   them from Google's servers would send every visitor's IP to Google on page
   load, which needs consent under GDPR; serving them from this site does not. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TherAktiv by Stefani Kritzinger — category-standard modern clinic site.
   Palette is drawn from the practice's own logo (media/logo.png): a deep
   navy carries every CTA/text-on-color pairing (it's the only one of the
   logo's two blues that clears 4.5:1 with white text), the brand's lighter
   sky-blue appears as a decorative flourish (hero gradient, dark-surface
   accents) where it doesn't have to carry text contrast on its own. Plus
   Jakarta Sans for display, Inter for body — a clean, precise, boutique-
   clinic register, not a wellness-cliché cream/serif palette.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #fbfbfa;
  --bg-alt: #eef4f9;
  --surface: #ffffff;
  --ink: #15191c;
  --ink-soft: #4b5560;
  --ink-faint: #8a949c;
  --border: #e2e7eb;
  --border-strong: #ccd3da;

  --accent: #174384;
  --accent-deep: #102d5c;
  --accent-bright: #009fe3;
  --accent-soft: #e8f4fb;
  --accent-contrast: #ffffff;

  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --space-1: 6px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 72px;
  --space-7: 108px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 3px rgba(16, 28, 56, 0.07), 0 1px 2px rgba(16, 28, 56, 0.08);
  --shadow-md: 0 12px 32px rgba(16, 28, 56, 0.14);

  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-veil: color-mix(in srgb, var(--accent) 10%, transparent);
  --ink-veil: color-mix(in srgb, var(--ink) 6%, transparent);

  /* One shared hover language for every lift/press control (buttons, cards,
     the link-arrow nudge). A directional "ease-out" curve like the reveal
     motion's is tuned for a one-way entrance — mirrored on hover-out it
     snaps back with an unnatural acceleration, which read as the "choppy"
     hover. This standard ease-in-out curve is symmetric, so leaving a
     control feels like the reverse of entering it, not a different motion. */
  --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-hover: 220ms;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}

img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: var(--accent-contrast); }

:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 3px;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* — icon marks: outline-only line icons, drawn for this system — */
.mark { display: block; flex-shrink: 0; }
.mark circle, .mark line, .mark rect, .mark path, .mark ellipse, .mark polygon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* — buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform var(--duration-hover) var(--ease-hover), box-shadow var(--duration-hover) var(--ease-hover), background var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}
.btn svg { width: 16px; height: 16px; }

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0) scale(0.98); box-shadow: none; transition-duration: 100ms; }

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); }
.btn--ghost:active { transform: translateY(0) scale(0.98); transition-duration: 100ms; }

.btn--ghost-inverse {
  background: transparent;
  border-color: rgba(255,255,255,0.4);
  color: var(--accent-contrast);
}
.btn--ghost-inverse:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-2px); }

.btn--sm { padding: 10px 18px; font-size: 14px; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(251, 251, 250, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px var(--space-4);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}
.nav__logo {
  height: 40px;
  width: auto;
}
.nav__brand-by {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  padding-top: 3px;
}

.nav__links { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.nav__links a {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  padding-bottom: 4px;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current='page'] { color: var(--ink); }
.nav__links a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.nav__actions { display: flex; align-items: center; gap: var(--space-3); }

.lang-toggle { position: relative; display: inline-flex; border: 1.5px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.lang-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lang-toggle label {
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  color: var(--ink-soft);
  transition: background 140ms, color 140ms;
}
.lang-toggle label:has(input:checked) { background: var(--ink); color: #fff; }
.lang-toggle label:has(input:focus-visible) { outline: 3px solid var(--accent-deep); outline-offset: -3px; }

.nav__toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; color: var(--ink); }

/* ==========================================================================
   Hero (home)
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 56vw, 640px);
  display: flex;
  align-items: center;
  padding: var(--space-6) 0;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The subject (face/hands) sits in the left half of the frame, feet in
     the right half, at roughly mid-height — a slightly high object-position
     keeps her head clear of the bottom-heavy scrim/content on wide crops. */
  object-position: center 44%;
}
/* The scrim runs dark-to-transparent from right to left, on purpose: the
   subject's face is on the left side of the source photo, so the content
   column sits over the RIGHT (darker) side, keeping her face uncovered and
   clearly visible instead of hidden behind text or a scrim. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to left,
    color-mix(in srgb, var(--ink) 88%, transparent) 0%,
    color-mix(in srgb, var(--ink) 60%, transparent) 34%,
    color-mix(in srgb, var(--ink) 18%, transparent) 64%,
    transparent 90%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; display: flex; justify-content: flex-end; }
.hero__content { max-width: 500px; }
.hero__title {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: #fff;
  margin: 0 0 var(--space-3);
  max-width: 16ch;
}
.hero__subtitle {
  font-size: 18px;
  line-height: 1.65;
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.84);
  margin-bottom: var(--space-4);
}
.hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* — inner page hero — */
/* Centered like Home's standalone section heads (.section__head--center) —
   a page-hero here is always title+subtitle with no paired image, the same
   condition that earns centering there. */
.page-hero { padding: var(--space-6) 0 var(--space-5); background: var(--bg-alt); border-bottom: 1px solid var(--border); text-align: center; }
.page-hero__title { font-size: clamp(2.1rem, 3.8vw, 3rem); margin: var(--space-2) auto var(--space-3); max-width: 20ch; }
.page-hero__subtitle { font-size: 18px; line-height: 1.6; max-width: 62ch; color: var(--ink-soft); margin: 0 auto; }

/* ==========================================================================
   Philosophy strip
   ========================================================================== */

/* Deliberately the deep brand navy, not the site's usual light tint — this
   is the one section explaining the "TherAktiv" name itself, and the darker
   ground creates real separation from the plain sections around it. */
.philosophy { padding: var(--space-6) 0; background: var(--accent); }
.philosophy__inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
}
.philosophy__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: var(--ink);
  white-space: nowrap;
}
.philosophy__word span { color: var(--accent); }
.philosophy__text { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }

/* ==========================================================================
   Services grid
   ========================================================================== */

.section { padding: var(--space-7) 0; }
.section--alt { background: var(--bg-alt); }
.section__head { max-width: 640px; margin: 0 0 var(--space-5); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-top: var(--space-2); }
.section__lede { font-size: 17.5px; color: var(--ink-soft); margin-top: var(--space-2); line-height: 1.6; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--duration-hover) var(--ease-hover), box-shadow var(--duration-hover) var(--ease-hover), transform var(--duration-hover) var(--ease-hover);
}
.service-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-1);
}
.service-card__icon svg { width: 26px; height: 26px; }
.service-card__title { font-size: 19px; }
.service-card__desc { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; flex-grow: 1; }
.service-card__meta {
  display: inline-flex;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: 999px;
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  margin-top: var(--space-1);
}
.service-card__link svg { width: 14px; height: 14px; transition: transform var(--duration-hover) var(--ease-hover); }
.service-card__link:hover svg { transform: translateX(3px); }
.service-card__link:hover { color: var(--accent-deep); }

/* — full services (servizi page) — */
.service-full {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px 1fr;
  margin-bottom: var(--space-4);
}
.service-full:last-child { margin-bottom: 0; }
.service-full__media {
  position: relative;
  min-height: 260px;
}
.service-full__media img { width: 100%; height: 100%; object-fit: cover; }
.service-full__body {
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--space-4);
  align-content: start;
}
.service-full__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-full__icon svg { width: 30px; height: 30px; }
.service-full__title { font-size: 22px; margin-bottom: var(--space-2); }
.service-full__desc { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin-bottom: var(--space-2); }
.service-full__detail { font-size: 14.5px; color: var(--ink-faint); font-style: normal; margin-bottom: var(--space-3); }
.service-full__detail strong { color: var(--ink-soft); font-weight: 600; }
.service-full__footer { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.service-full__duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 6px 13px;
  border-radius: 999px;
}
.service-full__duration svg { width: 14px; height: 14px; }

/* ==========================================================================
   About teaser / locations teaser (home)
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-6);
  align-items: center;
}
.split--reverse .split__visual { order: 2; }
.split__visual {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-veil);
  position: relative;
}
.split__visual .img-slot { position: absolute; inset: 0; }
.split__title { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: var(--space-2) 0 var(--space-3); }
.split__body { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin-bottom: var(--space-4); }
/* A single introductory sentence (no title, no CTA) reads as an afterthought
   at body size next to a portrait-sized photo — the empty column looked
   unfinished. Sized and weighted like a headline instead, it earns the
   space rather than floating in it. */
.split__lede {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 28ch;
}

.locations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.location-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.location-card__title { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: var(--space-2); }
.location-card__title svg { width: 20px; height: 20px; color: var(--accent); }
.location-card__addr { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin-bottom: var(--space-2); }
.location-card__map {
  width: 100%;
  aspect-ratio: 16/10;
  border: 0;
  border-radius: var(--radius);
  filter: grayscale(0.15) contrast(1.02);
}

/* ==========================================================================
   Über mich / Chi sono
   ========================================================================== */

.qual-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.qual-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-3);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.qual-card svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.qual-card__text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.qual-card__text strong { color: var(--ink); font-weight: 600; }

.timeline { display: flex; flex-direction: column; }
.timeline__item {
  position: relative;
  padding: 0 0 var(--space-3) var(--space-4);
  border-left: 2px solid var(--border);
  margin-left: 5px;
}
.timeline__item:last-child { border-color: transparent; padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: -6.5px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--border-strong);
}
.timeline__place { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.timeline__field { font-size: 14.5px; color: var(--ink-soft); }

.philosophy-card {
  background: var(--ink);
  color: rgba(255,255,255,0.92);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.philosophy-card__title { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.2rem); margin-bottom: var(--space-3); }
.philosophy-card__body { font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.75); }
.philosophy-card__body strong { color: #fff; }

.collab-card {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: flex-start;
}
.collab-card__avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.collab-card__name { font-size: 19px; margin-bottom: 2px; }
.collab-card__role { font-size: 13.5px; font-weight: 700; color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-2); }
.collab-card__body { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-6);
  align-items: start;
}
.contact-direct {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.contact-direct__row { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--ink); }
.contact-direct__icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-direct__icon svg { width: 20px; height: 20px; }
.contact-direct__label { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.contact-direct__value { font-size: 16px; font-weight: 600; }
.contact-direct__row:hover .contact-direct__value { color: var(--accent-deep); }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.field input, .field textarea {
  font-family: var(--font-body);
  font-size: 15.5px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--bg);
  color: var(--ink);
  transition: border-color 140ms, box-shadow 140ms;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-veil);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 13px; color: var(--ink-faint); margin-top: var(--space-2); }

.locations-section .locations-grid { margin-top: 0; }

/* — contact form: spam trap, consent, send status — */
/* Off-screen rather than display:none, so bots that skip hidden fields still fill it. */
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-bottom: var(--space-2); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.consent a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.contact-form .form-note { margin: 0 0 var(--space-3); }
.form-status { margin-top: var(--space-3); font-size: 15px; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status[data-state='pending'] { color: var(--ink-soft); }
.form-status[data-state='ok'] { color: var(--accent-deep); font-weight: 600; }
.form-status[data-state='error'] { color: #9b2c2c; }

/* — map placeholder: the Google embed only loads after a click (see main.js) — */
.map-consent {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3);
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.map-consent__text { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); max-width: 40ch; }
.map-consent__text a, .map-consent__link { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.map-consent__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.map-consent__link { font-size: 14px; font-weight: 600; }

/* — legal pages (Impressum / Datenschutz): long-form reading, both languages in the markup — */
html[lang='de'] [data-lang='it'], html[lang='it'] [data-lang='de'] { display: none; }
.legal { max-width: 74ch; margin: 0 auto; }
.legal h2 { font-size: 22px; margin: var(--space-5) 0 var(--space-2); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 17px; margin: var(--space-3) 0 var(--space-1); }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.legal p { margin-bottom: var(--space-2); }
.legal ul { list-style: disc; padding-left: 1.3em; margin-bottom: var(--space-2); }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal__meta { font-size: 14px; color: var(--ink-faint); margin-top: var(--space-5); }
/* Highlighter for details still to be filled in. Currently unused: the legal pages carry invisible TODO-LEGAL comments instead (see build-deploy.sh). */
.todo { background: #fff1a8; color: var(--ink); padding: 0 4px; border-radius: 3px; }

/* — footer legal links — */
.site-footer__legal { display: flex; gap: var(--space-3); }
.site-footer__legal a { color: inherit; text-decoration: none; }
.site-footer__legal a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Closing CTA band
   ========================================================================== */

.closing {
  background: var(--ink);
  color: #fff;
  padding: var(--space-7) 0;
  text-align: center;
}
.closing__title { font-size: clamp(2rem, 3.8vw, 2.8rem); margin-bottom: var(--space-3); color: #fff; }
.closing__body { font-size: 18px; color: rgba(255,255,255,0.72); margin: 0 auto var(--space-4); max-width: 52ch; }
.closing__ctas { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: var(--space-6) 0 var(--space-4); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 0.8fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.footer-brand__logo { height: 32px; width: auto; margin-bottom: var(--space-2); }
.footer-brand__tag { font-size: 14.5px; color: var(--ink-soft); margin-top: var(--space-2); max-width: 34ch; line-height: 1.55; }
.footer-col__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: var(--space-2); }
.footer-col a, .footer-col span { display: block; font-size: 15px; color: var(--ink-soft); text-decoration: none; margin-bottom: 8px; }
.footer-col a:hover { color: var(--accent-deep); }
.site-footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ==========================================================================
   Photo container
   ========================================================================== */

.img-slot {
  position: relative;
  overflow: hidden;
  background: var(--ink-veil);
}
.img-slot img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Motion — reveal on scroll, respects reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1), transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  /* `transition` is a shorthand: whichever rule wins the cascade replaces
     the whole property list, it doesn't merge with another rule's list.
     Before this, a card that is both `.reveal` and hoverable (e.g.
     `.service-card`) kept the slow entrance transition on `transform`
     forever, because `.reveal` was declared later in the file — so hovering
     it months after page-load still animated the lift at reveal speed
     (1000ms, entrance easing), while border-color/box-shadow, which the
     entrance transition never mentions, snapped instantly. That mismatch
     was the "choppy" hover. Once revealed, hand transform (and any other
     hover-driven property) back to the fast, symmetric hover timing —
     harmless to declare for elements with no such hover state to trigger.
     Delay resets to 0 so this doesn't inherit the staggered entrance delay. */
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1), transform var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover), box-shadow var(--duration-hover) var(--ease-hover), background var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
    transition-delay: 0ms;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  /* Below the two-column reading width there's no clear "empty" side left
     in the crop to set text against, so the directional left/right scrim
     gives way to a top-to-bottom one and the content column goes full width
     instead of hugging the right edge. */
  .hero { min-height: clamp(420px, 92vw, 560px); align-items: flex-end; padding-bottom: var(--space-6); }
  .hero__scrim {
    background: linear-gradient(to top,
      color-mix(in srgb, var(--ink) 88%, transparent) 0%,
      color-mix(in srgb, var(--ink) 55%, transparent) 45%,
      color-mix(in srgb, var(--ink) 15%, transparent) 80%,
      transparent 100%);
  }
  .hero__inner { justify-content: flex-start; }
  .hero__content { max-width: 100%; }
  .split, .split--reverse .split__visual { grid-template-columns: 1fr; }
  .split__visual { order: -1; width: 100%; max-width: 480px; margin: 0 auto var(--space-2); }
  .services-grid { grid-template-columns: 1fr; }
  .qual-grid { grid-template-columns: 1fr; }
  .locations-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .service-full { grid-template-columns: 1fr; }
  .philosophy__inner { grid-template-columns: 1fr; text-align: left; }
}

@media (max-width: 760px) {
  .nav { flex-wrap: nowrap; padding: 12px var(--space-3); gap: var(--space-2); }
  .nav__logo { height: 32px; }
  .nav__brand-by { font-size: 10px; white-space: nowrap; }
  .nav__actions { gap: 8px; }
  .nav__actions .btn--primary { display: none; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-3);
  }
  .nav__links a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav__links a:last-child { border-bottom: none; }
  .site-nav.is-open .nav__links { display: flex; }
  .nav__toggle { display: inline-flex; flex-shrink: 0; }
  .lang-toggle { flex-shrink: 0; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .hero { padding: var(--space-5) 0 var(--space-6); }
  .section { padding: var(--space-6) 0; }
}