/* ============================================
   ЦПД «Конфіденс» — Concept v2
   Design system: serious, corporate, restrained
   ============================================ */

/* ---------- Tokens ---------- */
:root {
  /* Palette
     Neutrals are tinted toward Ялівець (sage green hue ~150°) using OKLCH
     with chroma 0.006–0.012 so they sit warmer/cooler than pure grey. */
  --yaliv: #004D33;
  --polotno: #f5f0e6;                             /* linen cream, nudged warmer so terracotta sits naturally (was #f4f2eb, slightly cool) */
  --ranok: #9ac76b;
  --lastov: #b8581f;
  --dosch: #5c7592;
  --teplo: #cebb96;
  --warm: #f3e7d3;                                /* warm sand — the "тепле" beat in the section rhythm (holds terracotta accents, never green text) */
  --white: oklch(99.4% 0.005 150);              /* warm off-white, tinted toward green */
  --black: oklch(20% 0.008 150);                /* near-black, tinted */
  --ink: oklch(22% 0.012 150);                  /* body text */
  --ink-2: oklch(34% 0.010 150);                /* secondary text */
  --muted: oklch(52% 0.012 200);                /* captions, tertiary */
  --line: oklch(20% 0.012 150 / 0.10);          /* hairline dividers */
  --line-dark: oklch(99% 0.005 150 / 0.14);
  --yaliv-deep: #003424;

  /* Type */
  --ff: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --tracking-h: -0.5px;

  /* Layout */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: 32px;
  --section-y: 120px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Elevation — layered to match brand greens */
  --shadow-1: 0 1px 2px rgba(0,40,28,0.04), 0 4px 12px -6px rgba(0,40,28,0.08);
  --shadow-2: 0 2px 4px rgba(0,40,28,0.05), 0 12px 28px -14px rgba(0,40,28,0.14);
  --shadow-3: 0 30px 60px -30px rgba(0,40,28,0.25), 0 12px 28px -16px rgba(0,40,28,0.18);

  /* Motion — Emil curves */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  --press-scale: 0.97;
}

/* ---------- Reset ---------- */
[hidden] { display: none !important; } /* enforce native hide over class display rules (used for "hide with ability to return") */
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 11px 18px; background: var(--yaliv); color: #fff; border-radius: 8px; font-weight: 600; font-size: 14px; transform: translateY(-180%); transition: transform 200ms ease; }
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html { overflow-x: clip; }
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--ff);
  font-weight: 600;
  letter-spacing: var(--tracking-h);
  line-height: 1.05;
}
h1, .h1 { font-size: clamp(40px, 5.8vw, 72px); line-height: 1.02; }
h2, .h2 { font-size: clamp(32px, 4vw, 48px); }
h3, .h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
h4, .h4 { font-size: 20px; line-height: 1.3; }
.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: oklch(46% 0.045 245);   /* darker dosch — passes WCAG AA on white AND polotno */
  margin-bottom: 18px;
}
.caption { font-size: 13px; color: var(--muted); }
.lead { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; color: var(--muted); max-width: 42ch; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
section { padding: var(--section-y) 0; position: relative; }
.section--tight { padding: 80px 0; }

/* Rhythm: breathe mission and CTA, slight asymmetry on stats */
.mission { padding: clamp(120px, 14vw, 180px) 0; }
.cta-section { padding: clamp(120px, 14vw, 180px) 0; }
.stats { padding: var(--section-y) 0 calc(var(--section-y) - 16px); }

/* Background variants — alternating */
.bg-white   { background: var(--white); color: var(--ink); }
.bg-polotno { background: var(--polotno); color: var(--ink); }
.bg-warm    { background: var(--warm); color: var(--ink); }
/* In warm-toned sections the eyebrow goes terracotta (warm-on-warm, never on green) */
.bg-warm .eyebrow { color: var(--lastov); }
.bg-yaliv   { background: var(--yaliv); color: var(--white); }
.bg-yaliv .eyebrow { color: rgba(255,255,255,0.7); }
.bg-yaliv .caption { color: rgba(255,255,255,0.55); }
.bg-yaliv .lead { color: rgba(255,255,255,0.8); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-weight: 500; font-size: 15px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition:
    transform 200ms var(--ease-out),
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
  white-space: nowrap;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: scale(var(--press-scale)); transition-duration: 80ms; }
.btn:focus-visible { outline: 2px solid var(--yaliv); outline-offset: 3px; }

.btn--primary {
  background: linear-gradient(180deg, #005e3f 0%, var(--yaliv) 100%);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 18px -10px rgba(0,77,51,0.55);
}
.btn--primary:hover { background: linear-gradient(180deg, #006d4a 0%, #003e2a 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 14px 26px -12px rgba(0,77,51,0.6); }
.btn--accent {
  background: linear-gradient(180deg, var(--lastov) 0%, #9e4818 100%);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 10px 22px -10px rgba(168,80,28,0.55);
}
.btn--accent:hover { background: linear-gradient(180deg, #a8501c 0%, #883d13 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 16px 30px -12px rgba(168,80,28,0.6); }
/* Terracotta accent highlight block (donate recommended card) */
.soft-card--accent { position: relative; border-color: rgba(189,92,35,0.45); box-shadow: 0 0 0 1px rgba(189,92,35,0.22), 0 20px 44px -26px rgba(189,92,35,0.4); }
.soft-card__badge { position: absolute; top: 18px; right: 18px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--lastov); padding: 5px 11px; border-radius: 999px; }
.service-card__kicker--accent { color: var(--lastov); background: rgba(189,92,35,0.14); }
.btn--white { background: var(--white); color: var(--yaliv); }
.btn--white:hover { background: #f1efe8; }
.btn--outline { background: transparent; color: currentColor; border-color: currentColor; }
.btn--outline:hover { background: rgba(0,0,0,0.04); }
.bg-yaliv .btn--outline:hover { background: rgba(255,255,255,0.08); }
.btn--ghost { background: transparent; padding: 10px 0; color: var(--yaliv); }
.btn--ghost:hover { color: var(--lastov); }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--sm { padding: 10px 16px; font-size: 14px; }

.btn svg { width: 18px; height: 18px; stroke-width: 1.75; }

/* ---------- Navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; align-items: center; gap: 28px;
  height: 76px;
}
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 36px; width: auto; }
.nav__menu {
  display: flex; gap: 4px; flex: 1;
  margin-left: 16px;
}
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  font-size: 14.5px;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--yaliv); background: rgba(0,77,51,0.06); }
}
.nav__link.is-active { color: var(--yaliv); background: rgba(0,77,51,0.06); }
.nav__link:active { transform: scale(0.98); transition-duration: 80ms; }
.nav__link .chev { width: 14px; height: 14px; opacity: 0.6; }
.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__lang {
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  display: inline-flex; gap: 6px;
  padding: 8px 10px; border-radius: var(--r-sm);
}
.nav__lang span.active { color: var(--yaliv); }
.nav__support {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--lastov);
  padding: 8px 15px; border-radius: 999px;
  border: 1.5px solid rgba(189,92,35,0.32);
  background: rgba(189,92,35,0.07);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.nav__support-heart { width: 15px; height: 15px; flex: none; }
.nav__support:hover { color: var(--lastov); background: rgba(189,92,35,0.14); border-color: var(--lastov); transform: translateY(-1px); }
.nav__burger { display: none; padding: 8px; border-radius: var(--r-sm); }
.nav__burger:hover { background: rgba(0,0,0,0.05); }

/* ============================================
   Mobile drawer — right-side slide-in overlay
   ============================================ */
.nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 40, 28, 0.34);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}
.nav__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nav__drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--white);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  box-shadow: -24px 0 60px -20px rgba(0, 40, 28, 0.25);
  transition:
    transform 380ms var(--ease-drawer),
    visibility 0s linear 380ms;
}
.nav__drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 380ms var(--ease-drawer),
    visibility 0s linear 0s;
}

/* Drawer header */
.nav__drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 18px 24px;
  border-bottom: 1px solid var(--line);
}
.nav__drawer-logo {
  display: flex;
  align-items: center;
}
.nav__drawer-logo img {
  height: 28px;
  width: auto;
}
.nav__drawer-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}
.nav__drawer-close:hover,
.nav__drawer-close:focus-visible {
  background: oklch(96% 0.008 150);
}

/* Drawer body (scrollable) */
.nav__drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
}
.nav__drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ink);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.nav__drawer-link:hover,
.nav__drawer-link:focus-visible {
  background: oklch(96% 0.008 150);
}
.nav__drawer-link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-top: 1.5px solid var(--muted);
  transform: rotate(45deg);
  margin-right: 4px;
}
.nav__drawer-link--support {
  margin-top: 12px;
  color: var(--lastov);
}
.nav__drawer-link--support::after {
  border-color: var(--lastov);
}

/* Nested group (details/summary) */
.nav__drawer-group {
  border-radius: var(--r-md);
  margin: 0;
}
.nav__drawer-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ink);
  border-radius: var(--r-md);
  transition: background-color 160ms var(--ease-out);
}
.nav__drawer-group > summary::-webkit-details-marker { display: none; }
.nav__drawer-group > summary:hover,
.nav__drawer-group[open] > summary {
  background: oklch(96% 0.008 150);
}
.nav__drawer-group > summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.75px solid var(--ink-2);
  border-bottom: 1.75px solid var(--ink-2);
  transform: rotate(45deg);
  transition: transform 240ms var(--ease-out);
  margin-right: 6px;
}
.nav__drawer-group[open] > summary::after {
  transform: rotate(-135deg);
}
.nav__drawer-group > a {
  display: block;
  padding: 12px 12px 12px 28px;
  font-size: 15.5px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.nav__drawer-group > a:hover,
.nav__drawer-group > a:focus-visible {
  background: oklch(96% 0.008 150);
  color: var(--ink);
}
.nav__drawer-group[open] > a:last-of-type {
  margin-bottom: 8px;
}

/* Drawer footer (sticky CTA + lang) */
.nav__drawer-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 20px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--white);
}
.nav__drawer-cta {
  width: 100%;
  justify-content: center;
  font-size: 16px;
}
.nav__drawer-lang {
  display: inline-flex;
  padding: 4px;
  background: oklch(96% 0.008 150);
  border-radius: 999px;
}
.nav__drawer-lang__opt {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
  min-width: 52px;
}
.nav__drawer-lang__opt.is-active {
  background: var(--white);
  color: var(--yaliv);
  box-shadow: 0 1px 2px rgba(0, 40, 28, 0.08);
}
.nav__drawer-lang__opt:hover:not(.is-active) {
  color: var(--ink);
}

/* Body lock when drawer open */
body.is-drawer-open {
  overflow: hidden;
}

/* ---------- HERO ---------- */
.hero { padding: 40px 0 72px; }
.hero__grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 56px; align-items: center;
  min-height: calc(100vh - 76px - 112px);
}
.hero__title {
  font-size: clamp(44px, 5.6vw, 76px);
  font-weight: 600;
  letter-spacing: clamp(-1.2px, -0.075vw, -0.6px);
  line-height: 1.02;
  color: var(--ink);
}
.hero__title em {
  font-style: normal;
  color: var(--lastov); /* terracotta heading accent on the light hero — warm co-lead */
}
.hero__sub {
  margin-top: 28px;
  font-size: clamp(17px, 1.35vw, 19px);
  color: var(--ink-2);
  max-width: 56ch;
  line-height: 1.55;
}
.hero__actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero__actions .btn { min-width: 220px; justify-content: center; }
.hero__actions .btn--lg { padding: 18px 28px; font-size: 16px; }
.hero__meta {
  margin-top: 48px;
  display: flex; gap: 32px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.hero__meta-item { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-2); }
.hero__meta-item svg { width: 18px; height: 18px; color: var(--dosch); flex: none; }

.hero__visual {
  position: relative;
  aspect-ratio: 4 / 4.6;
  max-height: calc(100vh - 76px - 132px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #d8d4c5, #b9b3a0);
}
.hero__poster, .hero__media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__poster {
  z-index: 0;
  animation: kenBurns 18s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
.hero__media {
  z-index: 1;
  background: var(--polotno);
}
@media (prefers-reduced-motion: reduce) {
  .hero__media { display: none; }
  .hero__poster { animation: none; }
}
@keyframes kenBurns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1%, -1.5%); }
}
.hero__visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.22));
  pointer-events: none;
}
.hero__badge {
  position: absolute; left: 20px; bottom: 20px; z-index: 1;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 14px 18px; border-radius: var(--r-md);
  display: flex; gap: 12px; align-items: center;
  font-size: 13px; color: var(--ink);
  max-width: 280px;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,0.18);
}
.hero__badge svg { color: var(--yaliv); width: 22px; height: 22px; flex: none; }

/* ---------- Service banner ---------- */
.serv-banner { padding: 96px 0; overflow: hidden; }
.serv-banner__grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px;
  align-items: center;
}
.serv-banner h2 {
  font-size: clamp(32px, 3.4vw, 48px);
  max-width: 560px;
  line-height: 1.05;
}
.serv-banner__lead { color: rgba(255,255,255,0.78); margin-top: 20px; max-width: 52ch; font-size: 17px; }
.serv-banner__cta { margin-top: 32px; }

.serv-banner__preview { position: relative; perspective: 1200px; }
.serv-preview {
  background: oklch(99% 0.005 150);
  color: var(--ink);
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 40px 70px -45px rgba(0,0,0,0.40),
    0 18px 40px -28px rgba(0,0,0,0.22);
  transform-origin: center center;
  display: flex; flex-direction: column; gap: 12px;
  animation: previewFloat 6s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
@keyframes previewFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
.serv-preview__head {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid oklch(20% 0.01 150 / 0.08);
}
.serv-preview__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(82% 0.04 60);
}
.serv-preview__dot:nth-child(1) { background: oklch(70% 0.16 25); }
.serv-preview__dot:nth-child(2) { background: oklch(82% 0.14 80); }
.serv-preview__dot:nth-child(3) { background: oklch(72% 0.16 145); }
.serv-preview__title {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.serv-preview__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: oklch(96% 0.008 150);
  border-radius: 10px;
  font-size: 13.5px;
}
.serv-preview__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 500;
}
.serv-preview__value {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink);
  font-weight: 500;
}
.serv-preview__value svg { width: 14px; height: 14px; color: var(--muted); }
.serv-preview__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.serv-preview__chip {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid oklch(20% 0.01 150 / 0.12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}
.serv-preview__chip:nth-child(2),
.serv-preview__chip:nth-child(4) {
  background: var(--yaliv);
  color: white;
  border-color: var(--yaliv);
}
.serv-preview__match {
  margin-top: 8px;
  padding: 14px 16px;
  background: var(--yaliv);
  color: white;
  border-radius: 12px;
  display: flex; align-items: baseline; gap: 12px;
}
.serv-preview__match-num {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1;
}
.serv-preview__match-label {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}

/* ---------- Stats (editorial rows) ---------- */
.stats__head {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 64px; align-items: end; margin-bottom: 56px;
}
.stats__head .lead { max-width: 38ch; color: var(--dosch); }

/* Compact card grid — 4-up on desktop, 2×2 on tablet/mobile (client: "як 4 блочки") */
.stats__rows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  list-style: none;
  padding: 0; margin: 0;
}
.stat-line {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 2.2vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
}
.stat-line--light    { background: var(--white); color: var(--ink); }
.stat-line--polotno  { background: var(--polotno); color: var(--ink); }
.stat-line--dark {
  /* repurposed as a terracotta accent card — warm highlight among the light cards */
  background: linear-gradient(150deg, #c25a23 0%, #a8481a 68%, #9a4015 100%);
  color: var(--white);
  border-color: transparent;
}

/* Numbers */
.stat-line__num {
  font-size: clamp(40px, 3.6vw, 60px);
  font-weight: 500;
  letter-spacing: -2px;
  color: var(--lastov);
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.stat-line__sfx {
  color: var(--lastov);
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 4px;
}
.stat-line--dark .stat-line__num,
.stat-line--dark .stat-line__sfx {
  color: #ffe9d8; /* warm cream on terracotta */
}

/* Body */
.stat-line__body { max-width: 100%; }
.stat-line__label {
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.3;
}
.stat-line__note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}
.stat-line--dark .stat-line__label { color: var(--white); }
.stat-line--dark .stat-line__note  { color: rgba(255,255,255,0.6); }

/* Chip — hidden in the compact card layout */
.stat-line__chip { display: none; }

/* Head of organisation feature (home) */
.head-feature__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.head-feature { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.head-feature__photo { aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; max-width: 400px; box-shadow: var(--shadow-2); }
.head-feature__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.head-feature__quote { font-size: clamp(20px, 2.2vw, 30px); line-height: 1.4; font-weight: 500; letter-spacing: -0.4px; color: var(--ink); margin: 16px 0 24px; text-wrap: balance; }
.head-feature__by { display: flex; flex-direction: column; gap: 2px; }
.head-feature__name { font-weight: 600; font-size: 16px; color: var(--ink); }
.head-feature__role { font-size: 14px; color: var(--muted); }
@media (max-width: 760px) {
  .head-feature__grid { grid-template-columns: 1fr; gap: 28px; }
  .head-feature__photo { max-width: 260px; }
}

/* Scroll-reveal: each row slides in from below with stagger */
.js-anim .stat-line {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: var(--stagger-delay, 0ms);
}
.js-anim .stat-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- How we work (editorial timeline) ---------- */
.how__head {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 64px; align-items: end;
  margin-bottom: 72px;
}
.how__head .lead { max-width: 38ch; }

/* How: horizontal card-flow with arrows between, last card drenched */
.how__flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(12px, 1.5vw, 24px);
  align-items: stretch;
  list-style: none;
  margin: 0; padding: 0;
}
.how-stage {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .how-stage:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: oklch(20% 0.012 150 / 0.18);
  }
}
.how-stage__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.how-stage__num {
  font-size: clamp(42px, 4vw, 60px);
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 0.9;
  color: var(--lastov); /* terracotta process numbers — warm, guides the eye (on light bg) */
  font-variant-numeric: tabular-nums;
}
.how-stage__time {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--polotno);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.how-stage__title {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
}
.how-stage__text {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* Final stage: drenched-yaliv destination moment */
.how-stage--final {
  background: var(--yaliv);
  border-color: var(--yaliv);
  color: var(--white);
}
.how-stage--final .how-stage__num { color: var(--ranok); } /* final step is a GREEN card — keep the number sage, never terracotta on green */
.how-stage--final .how-stage__time {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.how-stage--final .how-stage__title { color: var(--white); }
.how-stage--final .how-stage__text { color: rgba(255,255,255,0.72); }
@media (hover: hover) and (pointer: fine) {
  .how-stage--final:hover { border-color: var(--yaliv); }
}

/* Connecting dashed arrows */
.how__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(20% 0.012 150 / 0.22);
  width: clamp(40px, 4vw, 64px);
  padding-top: clamp(34px, 3vw, 50px); /* aligns with number row */
}
.how__arrow svg {
  width: 100%;
  height: 16px;
  overflow: visible;
}
.how__arrow line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 800ms var(--ease-out);
}
.how__arrow polyline {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms var(--ease-out) 600ms, transform 400ms var(--ease-out) 600ms;
}
.js-anim .how__flow.is-visible .how__arrow line { stroke-dashoffset: 0; }
.js-anim .how__flow.is-visible .how__arrow polyline { opacity: 1; transform: translateX(0); }
.js-anim .how__flow.is-visible .how__arrow:nth-of-type(4) line { transition-delay: 300ms; }
.js-anim .how__flow.is-visible .how__arrow:nth-of-type(4) polyline { transition-delay: 900ms; }

/* Stagger reveal for stages */
.js-anim .how-stage {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: var(--stagger-delay, 0ms);
}
.js-anim .how-stage.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Projects ---------- */
.projects__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; margin-bottom: 56px;
}
.projects__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.projects__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.project {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .project:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(0,77,51,0.18); }
}
.project:active { transform: scale(0.99); transition-duration: 100ms; }
.project__photo {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #d8d4c5, #b9b3a0);
  position: relative;
  overflow: hidden;
}
.project__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition:
    transform 700ms var(--ease-out),
    filter 700ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .project:hover .project__photo img { transform: scale(1.045); }
}
.project__badge {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,0.95);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; color: var(--yaliv);
  display: inline-flex; gap: 6px; align-items: center;
}
.project__badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ranok);
}
.project__body { padding: 24px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.project__region {
  font-size: 12px; color: var(--dosch); text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 10px;
}
.project__title { font-size: 20px; font-weight: 600; letter-spacing: var(--tracking-h); margin-bottom: 12px; line-height: 1.2; }
.project__services {
  font-size: 13.5px; color: var(--ink-2);
  margin-bottom: 16px;
}
.project__foot {
  margin-top: auto; padding-top: 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.project__more { font-size: 13.5px; color: var(--yaliv); font-weight: 500; display: inline-flex; gap: 6px; }
.project__more svg { width: 14px; height: 14px; transition: transform .2s ease; }
.project:hover .project__more svg { transform: translateX(4px); }

/* ---------- Mission ---------- */
/* Eyebrow above big statement */
.mission__eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dosch);
  margin: 0 0 clamp(40px, 5vw, 72px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.mission__eyebrow::before {
  content: "";
  width: 32px; height: 2px;
  background: var(--yaliv);
  display: inline-block;
}

/* Big editorial statement with scroll-driven reveal */
.mission__statement {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 36px);
  max-width: min(1100px, 90%);
}
.mission__para {
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin: 0;
}
.mission__para .word {
  display: inline-block;
  color: oklch(20% 0.012 150 / 0.16);
  transition: color 320ms var(--ease-out);
}
.mission__para .word.is-revealed {
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .mission__para .word { color: var(--ink); transition: none; }
}

/* ---------- Partners (clean, no plates) ---------- */
.partners { padding: 80px 0 88px; }
.partners__head { text-align: center; margin-bottom: 44px; }
.partners__head h2 { margin: 0 auto; font-size: clamp(17px, 1.7vw, 22px); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.partners__scroller { display: flex; align-items: center; gap: 10px; }
.partners__viewport {
  flex: 1; min-width: 0;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.partners__viewport::-webkit-scrollbar { display: none; }
.partners__track {
  display: flex; gap: clamp(48px, 6vw, 80px); align-items: center;
  width: max-content; padding: 10px 18px;
}
.partners__nav {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--white); color: var(--ink-2);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.partners__nav svg { width: 20px; height: 20px; }
.partners__nav:hover { background: var(--yaliv); color: var(--white); border-color: var(--yaliv); }
.partners__nav[hidden] { display: none; }
@media (max-width: 700px) { .partners__nav { display: none; } }
.partner-logo {
  height: 50px; width: auto;
  filter: grayscale(100%) brightness(0.6);
  opacity: 0.7;
  transition: filter 320ms var(--ease-out), opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  flex: none;
}
@media (hover: hover) and (pointer: fine) {
  .partner-logo:hover { filter: grayscale(0%) brightness(1); opacity: 1; transform: scale(1.05); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Events ---------- */
.events__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; margin-bottom: 56px;
}
.events__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.event[hidden] { display: none; }
.event {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column;
  min-height: 280px;
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform .2s ease;
}
.event:hover { transform: translateY(-3px); }
.event__tags { display: flex; gap: 8px; margin-bottom: 20px; }
.event__tag {
  font-size: 11.5px; font-weight: 500;
  padding: 5px 10px; border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}
.event__tag--online {
  background: rgba(154,199,107,0.18); color: #3f6624;
  padding-left: 22px; position: relative;
}
.event__tag--online::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #5f8d34;
}
.event__tag--offline {
  background: rgba(189,92,35,0.12); color: var(--lastov);
  padding-left: 22px; position: relative;
}
.event__tag--offline::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--lastov);
}
.event__tag--free { background: rgba(0,77,51,0.08); color: var(--yaliv); }
.event__title { font-size: 19px; font-weight: 600; letter-spacing: var(--tracking-h); line-height: 1.25; margin-bottom: 12px; }
.event__date {
  font-size: 14px; color: var(--ink-2);
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 6px;
}
.event__date svg { width: 14px; height: 14px; color: var(--yaliv); }
.event__btn { margin-top: auto; align-self: flex-start; }

/* ---------- Testimonials ---------- */
.test__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; margin-bottom: 56px;
}
.test__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.testimon {
  display: flex; flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--white);
  transition: transform 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .testimon:is([data-go], :has(a)):hover { transform: translateY(-3px); border-color: rgba(0,77,51,0.15); }
}
.testimon__quote {
  font-size: 56px; font-weight: 500;
  color: var(--lastov); line-height: 0.6;
  font-family: Georgia, serif;
  margin-bottom: 8px;
  height: 28px;
}
.testimon__text {
  font-size: 15.5px; line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 12px;
  flex: 1;
}
/* Real quotes vary wildly in length (150–900+ chars). Clamp to a uniform card height
   by default — "Читати повністю" expands the ONE clicked card without breaking the
   grid row height of its neighbours (this is the actual fix for the client's
   "different sizes, hard to combine" complaint about the old site). */
.testimon__text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testimon.is-expanded .testimon__text {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.testimon__more {
  display: inline-flex; align-items: center;
  align-self: flex-start;
  min-height: 44px; /* real tap target, not just the visible text (WCAG 2.5.5) */
  font-size: 13.5px; font-weight: 600;
  color: var(--yaliv);
  background: none; border: 0; padding: 10px 0;
  margin: -10px 0 10px;
  cursor: pointer;
}
.testimon__more:hover { text-decoration: underline; text-underline-offset: 2px; }
.testimon__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px; border-top: 1px solid var(--line);
  gap: 12px;
}
.testimon__date { font-size: 13px; color: var(--muted); }
.testimon__by { font-size: 13px; color: var(--ink-2); font-weight: 600; text-align: right; }
.testimon__stars { display: inline-flex; gap: 2px; color: var(--lastov); flex: none; }
.testimon__stars svg { width: 14px; height: 14px; fill: currentColor; }
/* Expanding one real-quote card must not stretch its row siblings taller too — CSS Grid's
   default align-items:stretch was cascading the height change across the whole row,
   which read as "all the cards expanded" even though only one had. */
#testi-grid { align-items: start; }

/* ---------- Blog ---------- */
.blog__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; margin-bottom: 56px;
}
.blog__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.post {
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.post__photo {
  aspect-ratio: 16/10;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #d8d4c5, #b9b3a0);
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .post:hover .post__photo { transform: translateY(-3px); }
  .post:hover .post__photo img { transform: scale(1.03); }
}
.post__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.post__cat {
  font-size: 12px; color: var(--lastov); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.post__title { font-size: 22px; font-weight: 600; letter-spacing: var(--tracking-h); line-height: 1.22; margin-bottom: 12px; }
.post__desc { font-size: 15px; color: var(--ink-2); margin-bottom: 20px; }
.post__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.post__author { display: flex; gap: 10px; align-items: center; color: var(--ink-2); }
.post__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--polotno);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: none;
}
.post__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.post__more { color: var(--yaliv); font-weight: 500; }

/* ---------- FAQ (native <details>/<summary>) ---------- */
.faq__grid {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px;
  align-items: start;
}
.faq__list { border-top: 1px solid var(--line); }
.faq__item {
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary { list-style: none; }
.faq__q {
  width: 100%;
  text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0; gap: 16px;
  font-size: 18px; font-weight: 500; letter-spacing: -0.3px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: color 180ms var(--ease-out);
}
.faq__q-text { flex: 1; }
@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { color: var(--yaliv); }
}
.faq__toggle {
  position: relative;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  pointer-events: none;
  transition: background-color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  background: var(--lastov); /* terracotta "+" on every question — warmth down the accordion */
  border-radius: 2px;
  transform-origin: center;
  transition: transform 280ms var(--ease-out), opacity 200ms var(--ease-out), background-color 220ms var(--ease-out);
}
.faq__toggle::before { transform: translate(-50%, -50%); }
.faq__toggle::after  { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__toggle { background: var(--lastov); border-color: var(--lastov); }
.faq__item[open] .faq__toggle::before,
.faq__item[open] .faq__toggle::after { background: var(--white); }
.faq__item[open] .faq__toggle::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq__q:hover .faq__toggle { border-color: var(--lastov); }
.faq__item[open] .faq__q { color: var(--yaliv); }
.faq__a {
  overflow: hidden;
}
.faq__a-inner {
  padding: 0 0 28px;
  font-size: 16px; color: var(--ink-2); line-height: 1.6;
  max-width: 70ch;
}
.faq__side {
  position: sticky;
  top: calc(76px + 32px);
  align-self: start;
}
.faq__side h3 { margin-bottom: 14px; }
.faq__side p { color: var(--ink-2); margin-bottom: 24px; }

/* ---------- CTA section ---------- */
.cta-section { text-align: center; }
.cta-section h2 { font-size: clamp(44px, 6.2vw, 84px); max-width: 880px; margin: 0 auto 24px; line-height: 1.02; letter-spacing: -1px; color: var(--ink); }
.cta-section p { color: var(--ink-2); max-width: 540px; margin: 0 auto 36px; font-size: 17px; line-height: 1.55; }

/* CTA with photo background + parallax */
.cta-section--photo {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  padding: clamp(120px, 14vw, 200px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.cta-section--photo .cta-section__bg {
  position: absolute;
  inset: -10% 0;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}
.cta-section--photo .cta-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cta-section--photo .cta-section__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,40,28,0.10) 0%, rgba(0,40,28,0.55) 60%, rgba(0,40,28,0.78) 100%);
  pointer-events: none;
}
.cta-section--photo .cta-section__body {
  position: relative;
  z-index: 1;
  width: 100%;
}
.cta-section--photo h2 { color: var(--white); }
.cta-section--photo p { color: rgba(255,255,255,0.85); }
@media (prefers-reduced-motion: reduce) {
  .cta-section--photo .cta-section__bg { transform: none !important; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--yaliv-deep);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 32px;
}
.footer__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px; padding-bottom: 56px;
  border-bottom: 1px solid var(--line-dark);
}
.footer__brand .footer__logo img { height: 38px; filter: brightness(0) invert(1); margin-bottom: 20px; }
.footer__brand p { font-size: 14px; max-width: 280px; line-height: 1.55; }
.footer__col h4 {
  font-size: 13px; color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 20px; font-weight: 500;
}
.footer__col ul li { margin-bottom: 12px; font-size: 14.5px; }
.footer__col a:hover { color: var(--ranok); }
.footer__support { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 4px; }
.footer__support .nav__support-heart { width: 16px; height: 16px; }
.footer__socials { display: flex; gap: 12px; margin-top: 16px; }
.footer__socials a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.footer__socials a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.footer__socials svg { width: 18px; height: 18px; }
.footer__bottom {
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.footer__legal { display: flex; gap: 24px; }
.footer__legal a:hover { color: var(--ranok); }

/* ---------- Page stub (legacy) ---------- */
.page-stub {
  min-height: 60vh;
  padding: 120px 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
}
.page-stub__crumb {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--muted);
  margin-bottom: 24px;
}
.page-stub h1 { margin-bottom: 16px; max-width: 800px; }
.page-stub .lead {
  max-width: 56ch;
  margin: 0 auto 32px;
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--ink-2);
}
.page-stub__back {
  display: inline-flex; gap: 8px; align-items: center;
  color: var(--yaliv); font-weight: 500; font-size: 15px;
}

/* ============================================
   Inner-page components
   ============================================ */

/* Breadcrumb */
.crumb {
  /* flex-wrap: на сторінках із довгою назвою проєкту рядок не вміщався,
     і середнє посилання «Про нас» стискалося до 31px, рвучись навпіл */
  display: inline-flex; flex-wrap: wrap; row-gap: 4px; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}
.crumb a {
  color: var(--muted);
  transition: color 180ms var(--ease-out);
}
.crumb a:hover { color: var(--yaliv); }
.crumb__sep { opacity: 0.4; }
.crumb__current { color: var(--ink-2); font-weight: 500; }

/* Page hero (used by inner pages) — strong presence, balanced.
   NB: set vertical padding only — keep the .container horizontal gutter (32px)
   so the hero left edge aligns with all body sections and the CTA. */
.page-hero {
  padding-top: clamp(8px, 1.5vw, 20px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
/* Slim heading for content-first pages (blog / media / faq) */
.page-hero--slim { padding-bottom: clamp(24px, 3vw, 40px); }
.page-hero--slim .page-hero__sub { max-width: 64ch; }
.page-hero .eyebrow { display: block; margin-bottom: 18px; }
.page-hero__title {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -1px;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 18ch;
}
.page-hero__sub {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
}

/* ===== Full-width banner hero (client: photo background + text overlay, distinct per page) ===== */
.page-banner {
  position: relative;
  display: flex;
  align-items: center; /* content vertically centred → equal breathing room top & bottom */
  min-height: clamp(360px, 44vh, 480px);
  /* Explicit longhands: a `padding:` shorthand with clamp() values was mis-parsing
     padding-bottom to 0, jamming the text against the bottom edge. */
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(48px, 5vw, 72px);
  padding-left: 0;
  padding-right: 0;
  background-color: var(--yaliv);
  overflow: hidden;
  isolation: isolate;
}
.page-banner--short {
  min-height: clamp(300px, 36vh, 400px);
  padding-top: clamp(44px, 4.5vw, 64px);
  padding-bottom: clamp(44px, 4.5vw, 64px);
}
.page-banner__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--banner-pos, center);
}
/* Two-layer scrim: strong left wash keeps overlaid text readable on ANY photo
   (incl. bright ones like the training curtains); bottom darkening anchors the
   actions; right side stays clear so the photo focal point reads through. */
.page-banner::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(20,17,10,0.87) 0%, rgba(20,17,10,0.67) 30%, rgba(22,19,12,0.26) 62%, rgba(22,19,12,0) 88%),
    linear-gradient(180deg, rgba(18,15,9,0.42) 0%, rgba(18,15,9,0.10) 34%, rgba(16,13,8,0.64) 100%);
}
.page-banner .container { position: relative; }
.page-banner .crumb { color: rgba(255,255,255,0.82); margin-bottom: 18px; }
.page-banner .crumb a { color: rgba(255,255,255,0.72); }
.page-banner .crumb a:hover { color: #fff; }
.page-banner .crumb__current { color: rgba(255,255,255,0.92); }
.page-banner .crumb__sep { opacity: 0.5; }
.page-banner__content { max-width: 760px; }
.page-banner .eyebrow { display: block; margin-bottom: 16px; color: var(--ranok); }
.page-banner__status {
  display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25);
}
.page-banner__title {
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 600; line-height: 1.04; letter-spacing: -1px;
  color: #fff; margin: 0 0 18px; max-width: 18ch; text-wrap: balance;
}
.page-banner__title em { font-style: normal; color: var(--ranok); }
.page-banner__sub {
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55;
  color: rgba(255,255,255,0.88); margin: 0; max-width: 56ch;
}
.page-banner__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.page-banner .btn--outline { border-color: rgba(255,255,255,0.78); color: #fff; }
.page-banner .btn--outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.page-banner__meta { color: rgba(255,255,255,0.72); margin-top: 22px; font-size: 14px; }
@media (max-width: 680px) {
  .page-banner { min-height: clamp(300px, 56vh, 430px); }
  .page-banner__title { font-size: clamp(30px, 8vw, 44px); }
  .page-banner::before { background: linear-gradient(180deg, rgba(0,30,20,0.40) 0%, rgba(0,40,27,0.85) 100%); }
}

/* Split hero — copy left, image right (no empty halves) */
.page-hero__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.page-hero__split .page-hero__title { max-width: 14ch; }
.page-hero__visual {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, oklch(90% 0.025 150), oklch(82% 0.035 150));
  box-shadow: var(--shadow-2);
}
.page-hero__visual img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Hero action buttons row */
.page-hero__actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 32px;
}
/* Hero supporting stats row (gives list/filter heroes presence) */
.page-hero__stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.page-hero__stat { display: flex; flex-direction: column; gap: 4px; }
.page-hero__stat b {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--lastov);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Inside a photo banner the hero is a GREEN surface — numbers must be light,
   never terracotta-on-green (terracotta stays for light-hero stat rows). */
.page-banner .page-hero__stats { border-top-color: rgba(255,255,255,0.22); }
.page-banner .page-hero__stat b { color: #fff; }
.page-banner .page-hero__stat span { color: rgba(255,255,255,0.75); }
.page-hero__stat span {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
}
/* Status pill (project / specialist availability) */
.page-hero__status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: rgba(0,77,51,0.08);
  color: var(--yaliv);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.page-hero__status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ranok);
  box-shadow: 0 0 0 3px rgba(154,199,107,0.22);
}
.page-hero__meta {
  font-size: 14px;
  color: var(--muted);
  margin-top: 18px;
}
/* Hero fact row (course landing) */
.page-hero__meta-row {
  display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 2.4vw, 30px);
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding-top: clamp(22px, 2.6vw, 28px);
  border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-2);
}
.page-hero__meta-row span { display: inline-flex; align-items: center; gap: 9px; }
.page-hero__meta-row span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ranok); flex: none; }
.page-hero__meta-row b { color: var(--yaliv); font-weight: 600; }
.page-hero__actions { margin-top: clamp(24px, 3vw, 30px); }
@media (max-width: 860px) {
  .page-hero__split { grid-template-columns: 1fr; gap: 32px; }
  .page-hero__split .page-hero__visual { order: -1; aspect-ratio: 16/10; }
  .page-hero__split .page-hero__title,
  .page-hero__title { max-width: 100%; }
}

/* Section heading on inner page */
.sec-h {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 26ch;
}
.sec-sub {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--ink-2);
  line-height: 1.55;
  margin: -16px 0 32px;
  max-width: 65ch;
}

/* Filter tabs (used by services, events, blog, groups, projects, etc.) */
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.tab {
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out);
  white-space: nowrap;
}
.tab:hover { color: var(--yaliv); border-color: oklch(20% 0.012 150 / 0.25); }
.tab.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.tabs__reset {
  display: inline-flex; align-items: center;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  border: 0;
  font-family: inherit;
}
.tabs__reset:hover { color: var(--yaliv); }

/* Filter toolbar — chips on the left, result count + reset on the right */
.filterbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.filterbar__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filterbar .tabs { margin-bottom: 0; }
.filterbar__meta { display: inline-flex; align-items: center; gap: 6px; }
.filterbar__count {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Grid utilities for inner pages */
/* Anchor targets stop below the sticky header (76px) instead of under it */
[id] { scroll-margin-top: 96px; }

/* SPA page swaps replace the whole document content; Chrome's scroll anchoring
   would "helpfully" re-offset the viewport after the swap. */
html { overflow-anchor: none; }

.grid { display: grid; gap: clamp(20px, 2.5vw, 32px); }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2-1 { grid-template-columns: 2fr 1fr; }
.grid--1-2 { grid-template-columns: 1fr 2fr; }
.grid--3-2 { grid-template-columns: 1.5fr 1fr; }
.grid--portrait { grid-template-columns: minmax(260px, 360px) 1fr; }

/* List row (events list, reports list) */
.list-row {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr minmax(80px, auto) auto;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.list-row:first-child { border-top: 1px solid var(--line); }
/* Donate reports: fixed date column so titles sit on one vertical axis across rows */
.page[data-page="donate"] .list-row { grid-template-columns: 130px 1fr minmax(80px, auto) auto; }
.list-row__date {
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.list-row__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.2px;
  line-height: 1.35;
}
.list-row__title a:hover { color: var(--yaliv); }
.list-row__meta {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.list-row .btn {
  padding: 8px 16px;
  font-size: 13px;
}

/* Cards & soft surfaces */
.soft-card {
  background: linear-gradient(180deg, #fff 0%, oklch(99% 0.005 150) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.5vw, 32px);
}
.soft-card { transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out); }
/* Hover lift only where the card actually leads somewhere — hover is a promise of a click */
@media (hover: hover) and (pointer: fine) {
  .soft-card:is([data-go], :has(a)):hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: oklch(20% 0.012 150 / 0.18); }
}
.soft-card__icon {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: rgba(0,77,51,0.07);
  color: var(--yaliv);
  margin-bottom: 18px;
}
.soft-card__icon svg { width: 23px; height: 23px; }
.soft-card__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}
.soft-card__text {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* Service card */
.service-card {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out), background-color 220ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
.service-card[data-go] { cursor: pointer; }
.service-card__kicker {
  display: inline-block; align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lastov); /* terracotta category kicker — warmth on every card (green stays on the link/action) */
  background: rgba(184,88,31,0.12);
  padding: 5px 11px; border-radius: 999px;
  margin: 0 0 14px;
  transition: background-color 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .service-card:is([data-go], :has(a)):hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: oklch(20% 0.012 150 / 0.18); background-color: oklch(97.5% 0.025 132); }
  .service-card:is([data-go], :has(a)):hover .service-card__title { color: var(--yaliv); }
  .service-card:is([data-go], :has(a)):hover .service-card__kicker { background: rgba(184,88,31,0.22); }
}
.service-card__tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.service-card__tag {
  padding: 4px 10px;
  background: var(--polotno);
  color: var(--ink-2);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.service-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin: 0 0 8px;
  transition: color 220ms var(--ease-out);
}
.service-card__desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 12px;
}
.service-card__meta {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 16px;
}
.service-card__link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--yaliv);
  display: inline-flex; align-items: center; gap: 6px;
}
.service-card__link svg { width: 15px; height: 15px; flex: none; transition: transform 220ms var(--ease-out); }
.service-card:hover .service-card__link svg { transform: translateX(3px); }
.service-card__link:hover { color: var(--yaliv-deep); }

/* Team card */
.team-card {
  text-align: left;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.team-card__photo {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, oklch(92% 0.02 150), oklch(82% 0.03 150));
  margin-bottom: 16px;
  overflow: hidden;
  transition: transform 320ms var(--ease-out);
}
.team-card:hover .team-card__photo { transform: translateY(-3px); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
  margin: 0 0 4px;
}
.team-card__role {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.team-card__meta {
  font-size: 12.5px;
  color: var(--muted);
}

/* Team group switch (Фахівці / Адмінкоманда) */
.team-switch { display: inline-flex; gap: 4px; padding: 4px; background: var(--polotno); border: 1px solid var(--line); border-radius: 999px; }
.team-switch__btn { padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.team-switch__btn span { font-size: 12px; opacity: 0.75; font-weight: 500; }
.team-switch__btn.is-active { background: var(--yaliv); color: var(--white); }
.team-switch__btn.is-active span { opacity: 0.85; }
/* Admin role placeholder cards */
.team-card--role { cursor: default; }
.team-card__photo--ph { display: flex; align-items: center; justify-content: center; background: rgba(154,199,107,0.14); color: var(--yaliv); }
.team-card__photo--ph svg { width: 40px; height: 40px; }
.team-card--role:hover .team-card__photo { transform: none; }

/* Media tiles (Ми в медіа) */
.media-grid { gap: clamp(20px,2.4vw,28px); }
.media-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.media-card__thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--polotno); }
.media-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.media-card__body { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px,2vw,24px); flex: 1; }
.media-card__outlet { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--yaliv); }
.media-card__title { font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--ink); letter-spacing: -0.2px; margin: 0; }
.media-card__link { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 500; color: var(--yaliv); display: inline-flex; align-items: center; gap: 6px; }
.media-card__link svg { width: 15px; height: 15px; flex: none; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .media-card:is(a, :has(a)):hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: oklch(20% 0.012 150 / 0.16); }
  .media-card:is(a, :has(a)):hover .media-card__thumb img { transform: scale(1.04); }
  .media-card:is(a, :has(a)):hover .media-card__link svg { transform: translateX(3px); }
}

/* Form */
.form {
  display: flex; flex-direction: column;
  gap: 16px;
  max-width: 560px;
}
/* Field group — label sits above the input (reference-grade clarity) */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field__label {
  font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.1px;
}
.field__label .req { color: var(--lastov); margin-left: 1px; }
.form-field {
  display: block;
  width: 100%;
  padding: 13px 15px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--polotno);   /* tinted fill so each field clearly reads as an input */
  border: 1px solid oklch(20% 0.012 150 / 0.13);
  border-radius: var(--r-md);
  transition: border-color 220ms var(--ease-calm), box-shadow 260ms var(--ease-calm), background-color 220ms var(--ease-calm);
}
.form-field:hover { border-color: oklch(20% 0.012 150 / 0.26); background: oklch(97.4% 0.005 150); }
.form-field:focus {
  outline: none;
  background: var(--white);
  border-color: var(--yaliv);
  /* warm, generous glow — reads as gentle attention, not an alert */
  box-shadow: 0 0 0 4px rgba(0,77,51,0.1);
}
.form-field::placeholder { color: var(--muted); }
textarea.form-field {
  min-height: 130px;
  resize: vertical;
  font-family: inherit;
}
select.form-field {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23004D33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-field:focus-visible {
  outline: 2px solid var(--yaliv);
  outline-offset: 2px;
}
.form-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}
.form-check input[type=checkbox] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
  flex: none;
  margin-top: 2px;
  transition: background-color 160ms, border-color 160ms;
  position: relative;
}
.form-check input[type=checkbox]:checked {
  background: var(--yaliv);
  border-color: var(--yaliv);
}
.form-check input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
}

/* Counters block */
.counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(4px, 1vw, 10px) 0;
}
.counters__item { display: flex; flex-direction: column; gap: 8px; }
.counters__num {
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 500;
  letter-spacing: -1.5px;
  color: var(--lastov);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.counters__label {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.4;
}
/* Terracotta plate variant for counters (project-single) — warm accent block */
.counters--plate { background: linear-gradient(135deg, #c25a23 0%, #a8481a 66%, #9a4015 100%); border-radius: var(--r-lg); padding: clamp(28px,3.5vw,44px) clamp(28px,4vw,56px); }
.counters--plate .counters__num { color: #ffe9d8; }
.counters--plate .counters__label { color: rgba(255,255,255,0.8); }
/* Project description block */
.proj-about { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.proj-about__lead { font-size: clamp(20px,2.1vw,27px); line-height: 1.42; color: var(--ink); font-weight: 500; margin: 0; letter-spacing: -0.3px; }
.proj-about__body { display: flex; flex-direction: column; gap: 14px; }
.proj-about__text { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0; }
@media (max-width: 760px) { .proj-about { grid-template-columns: 1fr; gap: 22px; } }
/* Project participant voices — home-style testimonial carousel */
.voices-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px,3vw,40px); }
.voices-nav { display: flex; gap: 8px; flex: none; }
.voices-nav__btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--white); color: var(--ink-2); transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out); }
.voices-nav__btn svg { width: 20px; height: 20px; }
.voices-nav__btn:hover { background: var(--yaliv); color: var(--white); border-color: var(--yaliv); }
.voices-nav__btn[hidden] { display: none; }
.voices-track { display: flex; gap: clamp(20px,2vw,28px); overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; }
.voices-track::-webkit-scrollbar { display: none; }
.testimon--voice { flex: 1 0 clamp(280px, 31%, 400px); scroll-snap-align: start; }
/* flex-grow:1 (а не 0): коли відгуків мало і трек не переповнений, картки добирають
   вільні 120px і права межа збігається з сіткою секції вище. При 4+ відгуках
   сума basis перевищує трек, вільного місця немає — grow не спрацьовує,
   flex-shrink лишається 0, і карусель так само скролиться. */
.testimon__voice-by { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
@media (max-width: 680px) { .testimon--voice { flex: 0 0 84%; } .voices-nav { display: none; } }

/* Pull-quote — full background tint, no side-stripe (DESIGN.md absolute ban) */
.pullquote {
  position: relative;
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--polotno);
  border-radius: var(--r-md);
  max-width: 720px;
}
/* Standalone quote band — centered composition instead of left-pinned box */
.pullquote--center { margin-inline: auto; max-width: 820px; }
.pullquote::before {
  content: "“";
  position: absolute;
  top: 8px;
  left: 16px;
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: var(--ranok);
  opacity: 0.5;
  pointer-events: none;
}
.pullquote__text {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink);
  font-style: normal;
  margin: 0 0 12px;
  position: relative;
}
.pullquote__author {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}

/* Numbered steps (4-step «Як записатись», consult page etc) */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.step {
  display: flex; flex-direction: column;
  gap: 10px;
}
.step__num {
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 600;
  color: var(--lastov);   /* terracotta step numbers (on light bg) */
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.step__title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.step__text {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Cover image (article hero) */
.cover {
  width: 100%;
  aspect-ratio: 16/7;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, oklch(86% 0.04 150), oklch(74% 0.05 150));
  overflow: hidden;
  margin-bottom: 24px;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }

/* Article body — centered reading column (correct for long-form) */
/* Two-column reading layout: main column + sticky sidebar fills the right
   (was a 70ch column floating in container--wide, leaving a dead right half) */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 320px);
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}
.article-body {
  max-width: 68ch;
}
.article-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aside-card {
  background: var(--polotno);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
}
.aside-card__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.aside-author { display: flex; align-items: center; gap: 14px; }
.aside-author__mono {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--yaliv); color: #fff;
  font-weight: 600; font-size: 16px; letter-spacing: 0.02em;
}
.aside-author__name { font-weight: 600; color: var(--ink); margin: 0; font-size: 15px; }
.aside-author__role { color: var(--muted); margin: 2px 0 0; font-size: 13px; }
.aside-share { display: flex; gap: 10px; }
.aside-share__btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--yaliv);
  cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.aside-share__btn svg { width: 19px; height: 19px; }
.aside-share__btn:hover { background: var(--yaliv); color: #fff; border-color: var(--yaliv); transform: translateY(-2px); }
.aside-share__btn.is-copied { background: var(--ranok); border-color: var(--ranok); color: var(--yaliv); }
/* Warm support nudge — terracotta accent while reading */
.aside-cta {
  background: linear-gradient(165deg, #fbf3ec 0%, #f7e8dc 100%);
  border-color: rgba(184, 88, 31, 0.28);
}
.aside-cta__title {
  font-weight: 600; font-size: 17px; color: var(--lastov); margin: 0 0 6px;
  letter-spacing: -0.2px;
}
.aside-cta__text { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 16px; }
.aside-cta .btn--accent { width: 100%; justify-content: center; }
@media (max-width: 920px) {
  .article-layout { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
  .article-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .article-aside .aside-card { flex: 1 1 220px; }
  .article-body { max-width: 72ch; }
}
@media (max-width: 560px) {
  .article-aside { flex-direction: column; }
}
/* Legal/privacy body — reuses .article-layout grid + sticky aside */
.legal-body { max-width: 72ch; }
.legal-body h2 {
  font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; color: var(--ink);
  letter-spacing: -0.3px; margin: 1.6em 0 12px; line-height: 1.25;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 28px; }
.legal-body a { color: var(--yaliv); text-decoration: underline; text-underline-offset: 2px; }
.legal-toc { display: flex; flex-direction: column; }
.legal-toc a {
  display: block; padding: 7px 0; font-size: 14px; line-height: 1.4;
  color: var(--ink-2); border-bottom: 1px solid var(--line);
  transition: color 140ms ease, padding-left 140ms ease;
}
.legal-toc a:last-child { border-bottom: 0; }
.legal-toc a:hover { color: var(--yaliv); padding-left: 6px; }
.article-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 1.2em;
}
.article-body h2 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin: 1.8em 0 0.6em;
  line-height: 1.2;
}
.article-body figure {
  margin: 1.5em 0;
}
.article-body img {
  width: 100%;
  border-radius: var(--r-md);
}
.article-body figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
}

/* Article meta */
.article-meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 13.5px;
  color: var(--muted);
  margin: 12px 0 0;
}
.article-meta__cat {
  display: inline-block;
  padding: 4px 12px;
  background: var(--polotno);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 12px;
}

/* CTA dark (used at end of every inner page) */
.cta-dark {
  background: var(--yaliv);
  color: var(--white);
  text-align: center;
  padding: clamp(60px, 8vw, 100px) 0;
}
.cta-dark h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0 0 12px;
}
.cta-dark p {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 24px;
}
.cta-dark p {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-dark .btn--white {
  background: var(--white);
  color: var(--yaliv);
}
.cta-dark .btn--white:hover { background: oklch(96% 0.005 150); }
.cta-dark .btn--outline { color: var(--white); border-color: rgba(255,255,255,0.78); }
.cta-dark .btn--outline:hover { background: rgba(255,255,255,0.10); border-color: #fff; }
.cta-dark__actions {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}
/* Terracotta re-skin of a closing CTA — one-class conversion for the green↔terracotta
   rhythm. Double class out-ranks base .cta-dark. Applied to the emotional/human CTAs. */
.cta-dark.cta-dark--warm { background: linear-gradient(135deg, #c25a23 0%, #a8481a 62%, #9a4015 100%); }
.cta-dark.cta-dark--warm .btn--white { color: #a8481a; }
.cta-dark.cta-dark--warm .btn--white:hover { background: #fff4ec; color: #8f3c12; }
.cta-dark.cta-dark--warm .btn--accent { background: #fff; color: #a8481a; box-shadow: none; }
.cta-dark.cta-dark--warm .btn--accent:hover { background: #fff4ec; box-shadow: none; }

/* ===== Terracotta-drenched CTA — the secondary-colour "brand moment" the client
   asked for ("виділити блок цим кольором"). Used on support/donate closing CTAs
   so the warm colour reads as intentional, not a scattered accent. ===== */
.cta-warm {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #c25a23 0%, #a8481a 62%, #9a4015 100%);
  color: #fff;
  text-align: center;
  padding: clamp(64px, 8vw, 104px) 0;
}
.cta-warm::before { /* soft warm glow top-centre for depth */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% -10%, rgba(255,225,200,0.22), transparent 60%);
}
.cta-warm__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,255,255,0.9); margin: 0 0 16px;
}
.cta-warm__eyebrow svg { width: 16px; height: 16px; }
.cta-warm h2 {
  font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; color: #fff;
  letter-spacing: -0.5px; line-height: 1.1; margin: 0 0 14px;
}
.cta-warm p {
  font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.88);
  max-width: 54ch; margin: 0 auto 26px;
}
.cta-warm__actions {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 4px;
}
.cta-warm .btn--white { background: #fff; color: #a8481a; }
.cta-warm .btn--white:hover { background: #fff4ec; color: #8f3c12; }
.cta-warm .btn--outline { color: #fff; border-color: rgba(255,255,255,0.78); }
.cta-warm .btn--outline:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
.cta-warm :focus-visible { outline-color: #fff; }

/* Empty state */
.empty {
  text-align: center;
  padding: clamp(80px, 10vw, 140px) 24px;
}
.empty__num {
  font-size: clamp(80px, 12vw, 140px);
  font-weight: 500;
  letter-spacing: -3px;
  color: var(--line);
  line-height: 1;
  margin: 0 0 16px;
}

/* Pagination */
.pager {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 32px;
}
.pager__page {
  min-width: 40px;
  height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.pager__page:hover { color: var(--yaliv); }
.pager__page.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* Section header utility */
.sec-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; margin-bottom: 56px;
  flex-wrap: wrap;
}
.sec-head__title { max-width: 720px; }
.sec-head .eyebrow { margin-bottom: 12px; }

/* Helpers */
.flex { display: flex; }
/* fade-in elements stay visible by default. JS adds .js-anim to <html>
   right before observing; only then do they hide and wait for is-visible. */
.fade-in { opacity: 1; transform: none; }
/* IMPORTANT: `transition` is a single property — whichever rule wins the cascade
   replaces the WHOLE list, not just the properties it mentions. These reveal classes
   get tagged onto interactive cards (.service-card, .post, .project...) that have
   their OWN hover transition (box-shadow/border-color/background-color); without
   restating those here, tagging a card for scroll-reveal silently killed its hover
   smoothness site-wide (cards snapped instead of easing on hover). The entrance
   properties (opacity/transform/filter) carry the stagger delay baked into their own
   value so hover-triggered properties below start immediately, with no extra lag. */
.js-anim .fade-in {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 750ms var(--ease-out) var(--stagger-delay, 0ms),
    transform 750ms var(--ease-out) var(--stagger-delay, 0ms),
    box-shadow 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    background-color 220ms var(--ease-out);
}
.js-anim .fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* Entrance variety — differentiate motion by content type so 28 pages of identical
   translateY-fade stop feeling flat/monotonous. Both stay within the calm envelope:
   no bounce, no >1.1s duration — but pushed clearly visible per client feedback
   ("appearances aren't noticeable enough"), not just a hover-level nudge. */
/* Без filter:blur — раніше тут був blur(11px), що знімався лише при .is-visible.
   У Safari при багатьох фото на сторінці (команда — 84 картки) перехід filter
   не докручувався й фото застрягали розмитими. Тепер поява — це opacity+scale,
   застрягти розмитим неможливо: у гіршому разі картка трохи прозоріша, але різка. */
.js-anim .fade-in--photo {
  transform: scale(1.06) translateY(16px);
  transition:
    opacity 950ms var(--ease-calm) var(--stagger-delay, 0ms),
    transform 950ms var(--ease-calm) var(--stagger-delay, 0ms),
    box-shadow 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    background-color 220ms var(--ease-out);
}
.js-anim .fade-in--photo.is-visible { transform: scale(1) translateY(0); }
.js-anim .fade-in--card {
  opacity: 0;
  transform: scale(0.92) translateY(22px);
  transition:
    opacity 700ms var(--ease-calm) var(--stagger-delay, 0ms),
    transform 700ms var(--ease-calm) var(--stagger-delay, 0ms),
    box-shadow 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    background-color 220ms var(--ease-out);
}
.js-anim .fade-in--card.is-visible { opacity: 1; transform: scale(1) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-in--photo, .fade-in--card { filter: none; transform: none; }
}

/* Page transitions — interruptible, with discrete display support */
.page { display: none; }
.page.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 320ms var(--ease-out),
    transform 320ms var(--ease-out),
    display 320ms allow-discrete;
}
@starting-style {
  .page.is-active {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: opacity 0.2s ease; }
  .partners__track { animation: none; }
  .page.is-active { animation: none; }
}

/* ============================================
   VISUAL POLISH — Concept v2.1
   Decorative layers, refined depth, accents.
   ============================================ */

/* ---------- Nav dropdown (Матеріали для батьків / Про нас) ---------- */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  font-size: 14.5px;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
  font-family: inherit;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .nav-dropdown__trigger,
  .nav-dropdown.is-open .nav-dropdown__trigger {
    color: var(--yaliv);
    background: rgba(0,77,51,0.06);
  }
}
.nav-dropdown.is-open .nav-dropdown__trigger {
  color: var(--yaliv);
  background: rgba(0,77,51,0.06);
}
.nav-dropdown__trigger .chev {
  width: 14px; height: 14px;
  opacity: 0.55;
  transition: transform 220ms var(--ease-out);
}
.nav-dropdown:hover .nav-dropdown__trigger .chev,
.nav-dropdown.is-open .nav-dropdown__trigger .chev {
  transform: rotate(180deg);
}

.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 340px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: 8px;
  z-index: 60;
  display: grid;
  gap: 2px;

  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 180ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s linear 220ms;
}
/* Invisible bridge over the 8px gap so hover doesn't break */
.nav-dropdown__panel::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .nav-dropdown__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition:
      opacity 180ms var(--ease-out),
      transform 200ms var(--ease-out),
      visibility 0s linear 0s;
  }
}
.nav-dropdown.is-open .nav-dropdown__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 180ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s linear 0s;
}

.nav-dropdown--wide .nav-dropdown__panel { min-width: 380px; }

.nav-dropdown__item {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color 160ms var(--ease-out);
}
.nav-dropdown__item:hover,
.nav-dropdown__item:focus-visible {
  background: oklch(96% 0.008 150);
}
.nav-dropdown__item:focus-visible { outline: 2px solid var(--yaliv); outline-offset: -1px; }
.nav-dropdown__item-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.nav-dropdown__item-meta {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- Nav language dropdown (UA / EN) ---------- */
.nav-lang {
  position: relative;
  display: inline-block;
}
.nav-lang__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-lang:hover .nav-lang__trigger,
  .nav-lang.is-open .nav-lang__trigger {
    color: var(--yaliv);
    background: rgba(0,77,51,0.06);
  }
}
.nav-lang.is-open .nav-lang__trigger {
  color: var(--yaliv);
  background: rgba(0,77,51,0.06);
}
.nav-lang__current { font-weight: 600; }
.nav-lang__trigger .chev {
  width: 12px; height: 12px;
  opacity: 0.55;
  transition: transform 220ms var(--ease-out);
}
.nav-lang:hover .nav-lang__trigger .chev,
.nav-lang.is-open .nav-lang__trigger .chev { transform: rotate(180deg); }

.nav-lang__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: 6px;
  z-index: 60;
  display: grid;
  gap: 2px;

  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 180ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s linear 220ms;
}
.nav-lang__panel::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .nav-lang:hover .nav-lang__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition:
      opacity 180ms var(--ease-out),
      transform 200ms var(--ease-out),
      visibility 0s linear 0s;
  }
}
.nav-lang.is-open .nav-lang__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 180ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s linear 0s;
}
.nav-lang__opt {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.nav-lang__opt:hover { background: oklch(96% 0.008 150); color: var(--ink); }
.nav-lang__opt.is-active { color: var(--yaliv); font-weight: 600; background: rgba(0,77,51,0.05); }

/* ---------- Nav: subtle active underline ---------- */
.nav__link::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--yaliv);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--ease-out);
}
.nav__link.is-active::after,
.nav__link:hover::after { transform: scaleX(1); }
.nav { transition: box-shadow 220ms var(--ease-out); }

/* ---------- Hero: decorative layers, eyebrow, underline flourish ---------- */
.hero { position: relative; overflow: hidden; }

/* Initial paint stagger — copy column cascades in via data-mounted toggle */
.hero__copy > * {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
}
.hero__copy > *:nth-child(1) { transition-delay: 0ms; }
.hero__copy > *:nth-child(2) { transition-delay: 70ms; }
.hero__copy > *:nth-child(3) { transition-delay: 140ms; }
.hero__copy > *:nth-child(4) { transition-delay: 210ms; }
.hero__copy > *:nth-child(5) { transition-delay: 280ms; }
html:not([data-mounted]) .hero__copy > * {
  opacity: 0;
  transform: translateY(12px);
}

/* Hero visual reveals via clip-path on first paint */
.hero__visual {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1000ms var(--ease-drawer) 60ms;
}
html:not([data-mounted]) .hero__visual {
  clip-path: inset(0 0 100% 0);
}
/* hero decorative dot-grid and ranok blob removed for cleaner brand feel */
.hero .container { position: relative; z-index: 1; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 12px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: rgba(0,77,51,0.06);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--yaliv);
}
.hero__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ranok);
  box-shadow: 0 0 0 4px rgba(154,199,107,0.22);
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(154,199,107,0.22); }
  50%      { box-shadow: 0 0 0 7px rgba(154,199,107,0.08); }
}
.hero__title em { position: relative; display: inline-block; }
.hero__underline {
  position: absolute;
  left: -2%; right: -2%; bottom: -14px;
  width: 104%; height: 14px;
  color: var(--ranok);
  pointer-events: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawUnderline 1.8s 600ms var(--ease-out) forwards;
}
@keyframes drawUnderline {
  to { stroke-dashoffset: 0; }
}
.hero__visual {
  background: linear-gradient(135deg, oklch(86% 0.04 150), oklch(74% 0.05 150));
  box-shadow: var(--shadow-3);
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.18);
  pointer-events: none;
  z-index: 1;
}
.hero__badge { box-shadow: 0 18px 40px -20px rgba(0,40,28,0.35); }

/* ---------- Service banner: polish chips ---------- */
.serv-preview {
  border: 1px solid rgba(0,77,51,0.06);
  background:
    linear-gradient(180deg, #fff, oklch(98% 0.005 150));
}
.serv-preview__chip { transition: transform 200ms var(--ease-out); }
.serv-preview__chip:nth-child(2),
.serv-preview__chip:nth-child(4) {
  box-shadow: 0 6px 16px -8px rgba(0,77,51,0.5);
}

/* ---------- Stats: subtle accent on number, dotted top rule ---------- */
.stat-row {
  transition: background-color 260ms var(--ease-out);
}
.stat-row::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--yaliv);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 380ms var(--ease-out);
}
.stat-row:hover::before { transform: scaleX(1); }
/* Stat numbers stay solid yaliv; original rule above provides color. */

/* how-step decorative rules retired — clean editorial list now */

/* ---------- Projects: gradient overlay on photo, refined depth ---------- */
.project {
  background: linear-gradient(180deg, #fff 0%, oklch(99% 0.005 150) 100%);
  box-shadow: var(--shadow-1);
}
@media (hover: hover) and (pointer: fine) {
  .project:hover { box-shadow: var(--shadow-3); transform: translateY(-6px); }
}
.project__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,40,28,0.18) 100%);
  pointer-events: none;
}
.project__badge { box-shadow: 0 4px 12px -6px rgba(0,40,28,0.18); }

/* mission column rules retired — single-anchor layout now */

/* ---------- Partners: refined plate / mask softer ---------- */
.partners__head h2 { letter-spacing: -0.3px; }

/* ---------- Events: refined depth, no side stripes ---------- */
.event {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, oklch(99% 0.005 150) 100%);
  box-shadow: var(--shadow-1);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .event:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
}
.event__title { margin-bottom: 14px; }

/* Featured event: terracotta-drenched accent block (was deep green — it was the
   biggest green mass on the events page + green-on-green pills read clinical) */
.event--featured {
  background: linear-gradient(135deg, #c25a23 0%, #a8481a 66%, #9a4015 100%);
  color: var(--white);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  min-height: auto;
}
@media (min-width: 980px) {
  .event--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: stretch;
  }
}
.event__featured-main {
  display: flex;
  flex-direction: column;
}
.event--featured .event__title {
  font-size: clamp(22px, 2vw, 30px);
  margin: 0 0 16px;
  letter-spacing: -0.5px;
  line-height: 1.15;
  max-width: 22ch;
}
.event--featured .event__desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 48ch;
}
/* On the terracotta card all pills go cream (green pills would clash on terracotta) */
.event--featured .event__tag--online,
.event--featured .event__tag--offline,
.event--featured .event__tag--free {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.event--featured .event__tag--online::before,
.event--featured .event__tag--offline::before { background: #ffe0cc; }

/* Right column: calendar / meta / CTA — deep warm-brown tint (same hue family as the
   terracotta card, NOT green) so the two panels harmonize instead of clashing */
.event__featured-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: oklch(24% 0.05 47);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
}
.event__featured-cal {
  display: flex; flex-direction: column;
  line-height: 1;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.event__featured-day {
  font-size: clamp(48px, 4.2vw, 60px);
  font-weight: 600;
  letter-spacing: -1.5px;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.event__featured-month {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: #ffe0cc;
  margin-top: 6px;
}
.event__featured-meta {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.event__featured-meta > div {
  display: grid;
  grid-template-columns: 95px 1fr;
  gap: 12px;
  align-items: baseline;
}
.event__featured-meta dt {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  margin: 0;
}
.event__featured-meta dd {
  font-size: 14.5px;
  color: var(--white);
  margin: 0;
}
.event__featured-cta {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  background: var(--white);
  color: #a8481a;
  box-shadow: 0 4px 12px -6px rgba(80,30,10,0.4);
}
.event__featured-cta:hover {
  background: #fff4ec;
  color: #8f3c12;
}
.event__featured-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0;
  color: #ffe0cc;
  margin-bottom: 20px;
}
.event__featured-mark::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #ffe0cc;
  box-shadow: 0 0 0 4px rgba(255,224,204,0.25);
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
@media (hover: hover) and (pointer: fine) {
  .event--featured:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
}

/* ---------- Events: "what we run" formats strip (fills the page when the
   live list is hidden — evergreen, no dead space before the CTA) ---------- */
.evt-formats { margin-top: clamp(8px, 2vw, 20px); }
.evt-formats__head { max-width: 660px; margin-bottom: clamp(24px, 3vw, 36px); }
.evt-formats__head .eyebrow { margin-bottom: 10px; }
.evt-formats__lead { color: var(--ink-2); line-height: 1.6; margin: 12px 0 0; }
.evt-formats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}
.evt-format {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(20px, 1.8vw, 26px);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .evt-format:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: rgba(184,88,31,0.30); }
}
.evt-format__ico {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(154, 199, 107, 0.16);
  color: var(--yaliv);
  margin-bottom: 16px;
}
.evt-format__ico svg { width: 23px; height: 23px; }
.evt-format h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 7px; letter-spacing: -0.2px; }
.evt-format p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
@media (max-width: 880px) { .evt-formats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .evt-formats__grid { grid-template-columns: 1fr; } }

/* ---------- Testimonials: subtle warmth, larger quote ---------- */
.testimon {
  background: linear-gradient(180deg, #fff 0%, oklch(98% 0.005 150) 100%);
}
.testimon__quote {
  font-size: 88px;
  color: var(--lastov);
  line-height: 0.55;
  height: 36px;
  opacity: 0.6;
}

/* ---------- Blog: card lift and accent corner ---------- */
.post__photo { box-shadow: var(--shadow-1); position: relative; }
.post__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,40,28,0.14) 100%);
  pointer-events: none;
}
.post__cat::before {
  content: "";
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 8px;
  margin-bottom: 3px;
}

/* ---------- FAQ: subtle hover, refined open state ---------- */
/* (replaced by .faq__item[open] selector above) */
.faq__item { transition: background-color 220ms var(--ease-out); }

/* ---------- CTA: strong typographic statement, no ornament ---------- */
.cta-section h2 { font-weight: 600; }

/* ---------- Footer: refined hover, soft separators ---------- */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 80%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154,199,107,0.35), transparent);
}
.footer__brand p { color: rgba(255,255,255,0.55); }
.footer__col a { transition: color 180ms var(--ease-out), padding-left 200ms var(--ease-out); }
.footer__col a:hover { padding-left: 4px; }
.footer__socials a {
  background: rgba(255,255,255,0.02);
}

/* ---------- Section-level gentle fade for ornaments ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow-dot { animation: none; }
  .hero__underline { animation: none; stroke-dashoffset: 0; }
  .hero__copy > * { transition-duration: 200ms !important; transform: none !important; transition-delay: 0ms !important; }
  .hero__visual { clip-path: inset(0 0 0 0) !important; transition: none !important; }
  .event__featured-mark::before { animation: none; }
  .nav__drawer { transition: opacity 200ms ease !important; transform: none !important; }
}

/* ---------- Original :focus rules continue below ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--yaliv);
  outline-offset: 3px;
  border-radius: 6px;
}
/* On dark sections a dark outline is invisible — use a white outline (high contrast on juniper) */
.bg-yaliv :focus-visible,
.serv-banner :focus-visible,
.cta-dark :focus-visible,
.page-banner :focus-visible,
.stat-line--dark :focus-visible,
.footer :focus-visible { outline-color: #fff; }

/* ============================================
   INNER-PAGE FOUNDATIONS — keep structure, lift execution.
   Match the rhythm and weight of the home page.
   ============================================ */

.page-hero { position: relative; }
.page-hero__title { display: block; }
.page-hero__title em {
  font-style: normal;
  color: var(--lastov); /* terracotta accent on light content-first heroes */
}
.page-hero__visual { background: var(--polotno); }
.page-hero__visual:has(img) { background: none; }

/* Section padding for inner pages — generous like home, consistent rhythm.
   Home sections manage their own padding and are excluded. */
.page:not([data-page="home"]) section.bg-white,
.page:not([data-page="home"]) section.bg-polotno,
.page:not([data-page="home"]) section.bg-warm,
.page:not([data-page="home"]) section.bg-yaliv {
  padding: clamp(72px, 8vw, 104px) 0;
}
.page:not([data-page="home"]) section.section--tight {
  padding: clamp(32px, 4vw, 52px) 0;
}
/* First section on every inner page holds crumb + page-hero.
   The crumb wrapper gives top space; page-hero owns the bottom gap.
   EXCLUDES .page-banner — photo banners own their own symmetric padding,
   and this rule was overriding their padding-bottom to 0 (text jammed to edge). */
.page:not([data-page="home"]) > section:first-child:not(.page-banner) {
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: 0;
}
/* When the filter tabs section follows the hero, pull it tight to the hero */
.page:not([data-page="home"]) section.section--filters {
  padding-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(28px, 3vw, 40px);
}


/* Team-card photo zoom on hover (matches project card behavior) */
.team-card .team-card__photo {
  overflow: hidden;
  transition: box-shadow 260ms var(--ease-out);
}
.team-card .team-card__photo img {
  transition: transform 600ms var(--ease-out);
}
.team-card:hover .team-card__photo img {
  transform: scale(1.04);
}
.team-card {
  transition: transform 260ms var(--ease-out);
}
/* [data-go] — прототип (SPA), a[href] — WordPress (картка стає справжнім посиланням).
   Одне правило на обидва випадки, щоб пакет для розробника не розходився з прототипом. */
.team-card:is([data-go], a[href]):hover { cursor: pointer; transform: translateY(-3px); }

/* Bigger numbers in .counters when they appear inside .bg-yaliv */
.bg-yaliv .counters__num,
.cta-dark .counters__num { color: var(--ranok); }
.bg-yaliv .counters__label,
.cta-dark .counters__label { color: rgba(255,255,255,0.7); }

/* Numbered-list typography for steps in articles/manuals (used in parents-routes) */
.steps--horizontal {
  grid-template-columns: repeat(4, 1fr);
}
.steps--columns-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .steps--horizontal { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .steps--horizontal,
  .steps--columns-2 { grid-template-columns: 1fr; }
}

/* Pull-quote sized-up version for hero quotes in mission/specialist */
.pullquote--large {
  padding: clamp(32px, 4vw, 56px);
  max-width: 100%;
}
.pullquote--large .pullquote__text {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  font-style: normal;
}
.pullquote--large .pullquote__author {
  margin-top: 20px;
  font-size: 14px;
}

/* Strip — horizontal media row with photo + caption */
.strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.strip--reverse { grid-template-columns: 1fr 1.4fr; }
.strip--reverse > :first-child { order: 2; }
.strip__media {
  aspect-ratio: 5/4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--polotno), oklch(90% 0.02 150));
  box-shadow: var(--shadow-2);
}
.strip__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .strip, .strip--reverse { grid-template-columns: 1fr; }
  .strip--reverse > :first-child { order: 0; }
}


/* Heavier separator for list-row sections — better visual break */
.list-row {
  transition: background-color 200ms var(--ease-out);
}
.list-row:hover {
  background-color: rgba(0,77,51,0.025);
}

/* Empty-state visuals for testimonials/projects pagers */
.pager__page--ellipsis {
  border: none;
  cursor: default;
  color: var(--muted);
}
.pager__page--ellipsis:hover { color: var(--muted); }

/* Section header utility for inner pages — pair eyebrow + sec-h + sec-sub */
.sec-head--center {
  text-align: center;
  align-items: center;
}
.sec-head--center .sec-sub { margin-left: auto; margin-right: auto; }

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .team-card:hover .team-card__photo img { transform: none; }
  .team-card:is([data-go], a[href]):hover { transform: none; }
}

/* ---- Review fixes ---- */
/* Screen-reader-only heading (restores h1>h2>h3 hierarchy on list pages without visual change) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* Consistent rhythm for the link inside soft-cards site-wide */
.soft-card .service-card__link { margin-top: 16px; }
/* Keyboard focus ring for clickable cards */
.service-card[data-go]:focus-visible,
.project[data-go]:focus-visible,
.post[data-go]:focus-visible,
.team-card[data-go]:focus-visible,
.event[data-go]:focus-visible {
  outline: 2px solid var(--yaliv);
  outline-offset: 3px;
  border-radius: var(--r-lg);
}
/* Subtle warm normalization so the real team portraits read as one consistent gallery */
.team-card__photo img,
.split__media img[src*="/team/"] {
  filter: saturate(0.94) contrast(0.99) sepia(0.05);
}
/* 3-up steps variant (event-single day cards) */
.steps--columns-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .steps--columns-3 { grid-template-columns: 1fr; } }

/* FAQ body — readable measure, left-aligned at the container gutter (not centered) */
.faq-body .sec-h,
.faq-body .faq__list { max-width: 820px; }

/* Registration / form splits: vertically centre the (substantial) copy against the taller
   form card so neither side leaves a void — the reference pattern. */
.split:has(.form-panel) { align-items: center; }

/* Direct-contact block under form-split copy — balances column height + offers an easier path */
.alt-contact {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}
.alt-contact__label {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 0 0 16px;
}
.alt-contact__links { display: flex; flex-direction: column; gap: 14px; }
.alt-contact__link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(15px, 1.3vw, 17px); font-weight: 500; color: var(--ink);
  transition: color 160ms var(--ease-out);
}
.alt-contact__link svg { width: 20px; height: 20px; color: var(--yaliv); flex: none; }
.alt-contact__link:hover { color: var(--yaliv); }

/* Media list (about-media): uniform button width so outlet names align in a column */
[data-page="about-media"] .list-row .btn {
  min-width: 124px;
  justify-content: center;
}

/* ===== Event program — readable day-by-day agenda ===== */
/* Three evenings = three equal upright cards (client: rows left dead space on the right) */
.program { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
.program-day {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(24px, 3vw, 36px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.program-day > div:last-child { display: flex; flex-direction: column; flex: 1; }
.program-day__topics { flex: 1; }
@media (max-width: 1100px) { .program { grid-template-columns: 1fr; } .program-day { gap: 12px; } }
@media (hover: hover) { .program-day:hover { box-shadow: var(--shadow-2); border-color: oklch(20% 0.012 150 / 0.16); } }
.program-day__badge {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--yaliv);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(0,77,51,0.08);
  margin-bottom: 16px; align-self: flex-start;
}
.program-day__theme {
  font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; letter-spacing: -0.3px;
  color: var(--ink); margin: 0 0 6px; line-height: 1.2;
}
.program-day__date { font-size: 14px; color: var(--ink-2); margin: 0; }
.program-day__topics { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.program-day__topics li {
  position: relative; padding-left: 26px;
  font-size: 15px; color: var(--ink); line-height: 1.5;
}
.program-day__topics li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ranok);
}
.program-day__speakers {
  font-size: 13.5px; color: var(--ink-2); margin: 0;
  padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.5;
}
.program-day__speakers strong { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .program-day { grid-template-columns: 1fr; gap: 18px; } }

/* ===== Course modules (curriculum list) ===== */
.modules { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 20px) clamp(20px, 2.5vw, 32px); }
.module {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 1.8vw, 22px);
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  align-items: start;
  transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .module:hover { box-shadow: var(--shadow-2); border-color: oklch(20% 0.012 150 / 0.16); transform: translateY(-2px); }
}
.module__num {
  font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; color: var(--yaliv);
  font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.5px;
}
.module__title { font-size: 16.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.2px; margin: 0 0 6px; line-height: 1.25; }
.module__desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 10px; }
.module__tag {
  display: inline-block; font-size: 11px; color: var(--yaliv); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(0,77,51,0.07); padding: 4px 10px; border-radius: 999px;
}
@media (max-width: 720px) { .modules { grid-template-columns: 1fr; } }

/* ===== Certificate mockup (course certification block) ===== */
.cert-card {
  aspect-ratio: 1.4 / 1;
  background: linear-gradient(155deg, oklch(99% 0.004 150) 0%, var(--polotno) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.cert-card::before {
  content: ""; position: absolute; inset: 12px; border: 1px solid oklch(0% 0 0 / 0.07);
  border-radius: calc(var(--r-md) - 6px); pointer-events: none;
}
.cert-card__brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: 0.16em; font-size: 12px; text-transform: uppercase; color: var(--yaliv); }
.cert-card__brand svg { width: 18px; height: 18px; }
.cert-card__kicker { margin: clamp(16px,2.5vw,26px) 0 4px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.cert-card__title { font-size: clamp(18px, 2vw, 26px); font-weight: 600; letter-spacing: -0.4px; color: var(--ink); margin: 0; line-height: 1.15; }
.cert-card__name { margin: clamp(14px,2vw,22px) 0 2px; font-size: clamp(17px,1.7vw,21px); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 8px; max-width: 70%; }
.cert-card__sub { font-size: 12.5px; color: var(--ink-2); margin: 8px 0 0; }
.cert-card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 18px; }
.cert-card__credits { font-size: 13px; font-weight: 600; color: var(--yaliv); }
.cert-card__seal { width: 78px; height: 78px; padding: 6px; border-radius: 50%; border: 2px solid var(--yaliv); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--yaliv); font-size: 9px; font-weight: 700; text-align: center; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; flex: none; }
.cert-card__seal b { font-size: 11px; letter-spacing: 0.01em; }

/* ===== FAQ two-column ===== */
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 4vw, 64px); align-items: start; }
@media (max-width: 760px) { .faq-cols { grid-template-columns: 1fr; } }

/* ===== Two-sided fit list (для кого: підійде / зарано) ===== */
.fitlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fitlist li { position: relative; padding-left: 30px; font-size: 15px; color: var(--ink); line-height: 1.45; }
.fitlist--yes li::before, .fitlist--no li::before {
  position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.fitlist--yes li::before { content: "✓"; background: rgba(0,77,51,0.1); color: var(--yaliv); }
.fitlist--no li { color: var(--ink-2); }
.fitlist--no li::before { content: "×"; background: oklch(89% 0.03 40); color: oklch(45% 0.14 40); font-size: 15px; font-weight: 800; }

/* ===== Price card (course enroll) ===== */
.price-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.price-card {
  background: var(--yaliv); color: var(--white);
  border-radius: var(--r-lg); padding: clamp(32px, 4vw, 52px);
  position: relative; overflow: hidden;
}
.price-card::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.09) 0.8px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at 90% 10%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse at 90% 10%, #000, transparent 70%);
  pointer-events: none;
}
.price-card > * { position: relative; z-index: 1; }
.price-card__label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); margin: 0 0 10px; }
.price-card__amount { font-size: clamp(40px, 5vw, 60px); font-weight: 600; letter-spacing: -1.5px; line-height: 1; margin: 0 0 6px; }
.price-card__amount span { font-size: 0.4em; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0; }
.price-card__note { font-size: 14px; color: rgba(255,255,255,0.72); margin: 0 0 24px; }
.price-card .btn { width: 100%; justify-content: center; }
.price-card__fine { font-size: 12.5px; color: rgba(255,255,255,0.6); margin: 14px 0 0; text-align: center; }
@media (max-width: 820px) { .price-split { grid-template-columns: 1fr; } }

/* ===== Full-bleed photo interlude band (overlaid statement) ===== */
.photo-band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(88px, 13vw, 168px) 0; }
.photo-band__bg { position: absolute; inset: 0; z-index: -2; }
.photo-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.photo-band__veil {
  position: absolute; inset: 0; z-index: -1;
  /* warm terracotta-brown veil (was cold juniper) — warms the human photos and breaks the all-green rhythm */
  background: linear-gradient(110deg, oklch(27% 0.075 47 / 0.88) 0%, oklch(27% 0.07 47 / 0.64) 45%, oklch(28% 0.06 47 / 0.34) 100%);
}
/* body is also .container (full width, centred, gutter) — do NOT cap it in ch (ch resolves
   against the small body font and collapses the column). Constrain the headline/text instead. */
.photo-band__eyebrow { display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #f2c9a6; margin-bottom: 18px; }
.photo-band h2 { font-size: clamp(28px, 4vw, 52px); font-weight: 600; letter-spacing: -0.6px; line-height: 1.12; color: var(--white); margin: 0; max-width: 640px; }
.photo-band p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.85); margin: 18px 0 0; max-width: 480px; }
.photo-band__body.is-center { text-align: center; }
.photo-band__body.is-center h2,
.photo-band__body.is-center p { margin-left: auto; margin-right: auto; }

/* Контейнерний варіант банера — фідбек клієнта: повноширинна стіна «Тіло пам'ятає»
   розбивала цілісне сприйняття міні-ленду. Те саме фото+думка, але рамкова картка
   в ритмі решти секцій, менша, зі скругленням — не ділить сторінку навпіл. */
.photo-inset { position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); padding: clamp(44px, 6vw, 78px) clamp(28px, 5vw, 60px); }
.photo-inset__bg { position: absolute; inset: 0; z-index: -2; }
.photo-inset__bg img { width: 100%; height: 100%; object-fit: cover; }
.photo-inset__veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, oklch(27% 0.075 47 / 0.9) 0%, oklch(27% 0.07 47 / 0.66) 48%, oklch(28% 0.06 47 / 0.36) 100%); }
.photo-inset__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: #f2c9a6; margin-bottom: 14px; }
.photo-inset h2 { font-size: clamp(23px, 2.8vw, 38px); font-weight: 600; letter-spacing: -0.4px;
  line-height: 1.15; color: var(--white); margin: 0; max-width: 600px; }
.photo-inset p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6;
  color: rgba(255,255,255,0.86); margin: 15px 0 0; max-width: 460px; }


/* ===== Callout (safety / crisis / reassurance — tinted, no side-stripe) ===== */
.callout {
  background: var(--polotno);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
}
.callout--sage { background: rgba(154,199,107,0.16); }
/* Empty state when a filter matches nothing */
.filter-empty { grid-column: 1 / -1; margin: 0; padding: 32px 0 8px; color: var(--muted); font-size: 15.5px; }
.filter-empty[hidden] { display: none; }

/* Form success state (after valid submit) */
.form-success { text-align: center; padding: clamp(28px, 4vw, 48px) clamp(16px, 2vw, 28px); outline: none; }
.form-success__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 999px;
  background: rgba(154,199,107,0.22); color: var(--yaliv);
  margin-bottom: 18px;
}
.form-success__icon svg { width: 26px; height: 26px; }
.form-success__title { font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; letter-spacing: -0.3px; color: var(--ink); margin: 0 0 8px; }
.form-success__text { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 auto; max-width: 42ch; }

/* 404 quick links read as links */
@media (hover: hover) and (pointer: fine) {
  .empty a[data-go]:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--lastov); }
}
/* Editorial split: title left, body right — fills wide bands without dead space (home section-head pattern) */
.callout--split { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: clamp(20px, 3.5vw, 56px); align-items: center; }
.callout--split .callout__title { margin: 0; }
.callout--split p { max-width: 62ch; }
@media (max-width: 860px) {
  .callout--split { grid-template-columns: 1fr; gap: 12px; }
}
.callout__title { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.3px; color: var(--ink); margin: 0 0 10px; }
.callout p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 70ch; }
.callout__lines { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 16px 0 0; padding: 0; list-style: none; }
.callout__lines li { font-size: 15px; color: var(--ink); font-weight: 500; }
.callout__lines b { color: var(--yaliv); }

/* ===== Speakers grid ===== */
.speakers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 30px);
}
.speaker__photo {
  aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: 14px; background: var(--polotno);
}
.speaker__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94) contrast(0.99) sepia(0.05); }
.speaker__name { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); margin: 0 0 3px; }
.speaker__role { font-size: 13px; color: var(--ink-2); line-height: 1.4; margin: 0; }
@media (max-width: 860px) { .speakers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .speakers { grid-template-columns: 1fr; } }

/* ===== Roadmap timeline (about-mission «Наш шлях») — readable years, connector line ===== */
.roadmap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
}
/* Connector axis — runs through the centre of the checkpoint dots (both at y=8px) */
.roadmap::before {
  content: "";
  position: absolute;
  top: 7px; left: 8px; right: 8px;
  height: 2px;
  background: linear-gradient(90deg, var(--yaliv) 0%, var(--ranok) 100%);
}
.roadmap__item { position: relative; padding-top: 38px; }
/* Solid checkpoint sitting ON the line (white ring lifts it off the axis) */
.roadmap__item::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--yaliv);
  box-shadow: 0 0 0 4px var(--white);
}
/* Scroll-triggered draw: line wipes left→right, checkpoints pop in sequence */
.js-anim .roadmap::before { transform: scaleX(0); transform-origin: left center; }
.js-anim .roadmap.is-visible::before { transform: scaleX(1); transition: transform 1.15s var(--ease-out); }
.js-anim .roadmap__item::before { transform: scale(0); transform-origin: center; }
.js-anim .roadmap.is-visible .roadmap__item::before { transform: scale(1); transition: transform .5s var(--ease-out); }
.js-anim .roadmap.is-visible .roadmap__item:nth-child(1)::before { transition-delay: .12s; }
.js-anim .roadmap.is-visible .roadmap__item:nth-child(2)::before { transition-delay: .46s; }
.js-anim .roadmap.is-visible .roadmap__item:nth-child(3)::before { transition-delay: .80s; }
.js-anim .roadmap.is-visible .roadmap__item:nth-child(4)::before { transition-delay: 1.06s; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .roadmap::before, .js-anim .roadmap__item::before { transform: none !important; transition: none !important; }
}
.roadmap__year {
  display: block;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 600;
  letter-spacing: -1px;
  color: var(--lastov); /* terracotta timeline years (on light bg) */
  line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.roadmap__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin: 0 0 8px;
}
.roadmap__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 28ch;
}
@media (max-width: 860px) {
  .roadmap { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .roadmap::before { display: none; }
  .roadmap__item { padding-top: 0; }
  .roadmap__item::before { display: none; }
  .roadmap__year { color: var(--lastov); }
}
@media (max-width: 520px) { .roadmap { grid-template-columns: 1fr; } }

/* ===== Proof split — featured stat + supporting list (distinct from counters) ===== */
.proof-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.proof-hero__num {
  font-size: clamp(72px, 10vw, 132px);
  font-weight: 500;
  letter-spacing: -4px;
  line-height: 0.86;
  color: var(--lastov);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 18px;
}
.proof-hero__label {
  display: block;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-bottom: 10px;
}
.proof-hero__note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 36ch;
}
.proof-list { display: flex; flex-direction: column; }
.proof-list__row {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding: clamp(20px, 2.5vw, 28px) 0;
  border-top: 1px solid var(--line);
}
.proof-list__row:last-child { border-bottom: 1px solid var(--line); }
.proof-list__num {
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 500;
  letter-spacing: -2px;
  color: var(--lastov);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.proof-list__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
  margin: 0 0 3px;
}
.proof-list__note { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; }
@media (max-width: 860px) {
  .proof-split { grid-template-columns: 1fr; gap: 40px; }
}

/* ===== Highlight banner (training «Отримані сертифікати» → external sheet) ===== */
.hl-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
  border-radius: var(--r-lg);
  background: var(--yaliv);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hl-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 0.8px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 50%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at 80% 50%, #000 0%, transparent 70%);
  pointer-events: none;
}
.hl-banner__text { position: relative; z-index: 1; max-width: 60ch; }
.hl-banner__title {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--white);
  margin: 0 0 8px;
}
.hl-banner__sub { font-size: 15px; color: rgba(255,255,255,0.72); margin: 0; }
.hl-banner .btn { position: relative; z-index: 1; flex-shrink: 0; }
.hl-banner__icon { display: inline-flex; }

/* ===== Help aside (FAQ 2-col) ===== */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.faq-layout__main { min-width: 0; }
.faq-aside {
  position: sticky;
  top: 100px;
  background: var(--polotno);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px);
}
.faq-aside h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin: 0 0 12px;
}
.faq-aside p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; }
.faq-aside__contacts { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.faq-aside__contact { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink); }
.faq-aside__contact svg { width: 18px; height: 18px; color: var(--yaliv); flex: none; }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}

/* Stat grid — edge-aligned big numbers with label + note (inner-page proof block) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 48px) clamp(24px, 2.5vw, 40px);
}
.stat-cell { min-width: 0; }
.stat-cell__num {
  display: block;
  font-size: clamp(46px, 5vw, 76px);
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 0.92;
  color: var(--yaliv);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.stat-cell__label {
  display: block;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.stat-cell__note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 30ch;
}
@media (max-width: 900px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } }

/* ============================================
   INNER-PAGE LAYOUT UTILITIES v3
   Balanced two-column splits, media figures, info grids,
   section headers with side action. No empty halves.
   ============================================ */

/* Section header: title block on the left, optional action on the right */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.sec-head__title { max-width: 760px; }
.sec-head .eyebrow { display: block; margin-bottom: 14px; }
.sec-head .sec-h { margin-bottom: 0; }
.sec-head .sec-sub { margin: 14px 0 0; }
.sec-head__action { flex-shrink: 0; padding-bottom: 4px; }

/* Content + media split (balanced, never empty) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}
.split--copy-wide { grid-template-columns: 1.2fr 0.8fr; }
.split--media-wide { grid-template-columns: 0.8fr 1.2fr; }
.split--profile { grid-template-columns: minmax(280px, 360px) 1fr; }
.split__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--polotno);
  box-shadow: var(--shadow-2);
}
.split__media--wide { aspect-ratio: 4/3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split--media-left .split__media { order: -1; }
.split__title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin: 0 0 18px;
}
.split__text {
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 52ch;
}
.split__text:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .split, .split--copy-wide, .split--media-wide, .split--profile {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .split--media-left .split__media,
  .split__media { order: -1; aspect-ratio: 16/10; }
}

/* Reusable media figure (cover image with optional caption pill) */
.media-figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--polotno);
  box-shadow: var(--shadow-2);
}
.media-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-figure__caption {
  position: absolute;
  left: 16px; bottom: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink);
}
.media-figure__caption strong { font-weight: 600; letter-spacing: -0.2px; }

/* Info grid — feature cells without heavy cards (icon/number + title + text) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px);
}
.info-grid--2 { grid-template-columns: repeat(2, 1fr); }
.info-grid--4 { grid-template-columns: repeat(4, 1fr); }
.info-cell__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: rgba(0,77,51,0.07);
  color: var(--yaliv);
  margin-bottom: 18px;
}
.info-cell__icon svg { width: 22px; height: 22px; }
.info-cell__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0 0 8px;
}
.info-cell__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 860px) {
  .info-grid, .info-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .info-grid, .info-grid--2, .info-grid--4 { grid-template-columns: 1fr; }
}

/* Prose column — centered readable text body (about, mission, legal) */
.prose {
  max-width: 68ch;
}
.prose p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 1.1em;
}
.prose p:last-child { margin-bottom: 0; }

/* Cover band — full-width image used as article/event hero */
.cover-band {
  aspect-ratio: 21/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--polotno);
  box-shadow: var(--shadow-2);
  margin-bottom: clamp(28px, 3vw, 44px);
}
.cover-band img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .cover-band { aspect-ratio: 16/10; } }

/* Form panel — bordered card holding a form (contacts, registration) */
/* Elevated form card — distinct, floating over the section like the references.
   White card + deep soft green-tinted shadow reads clearly above any background. */
.form-panel {
  background: var(--white);
  border: 1px solid oklch(20% 0.012 150 / 0.08);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.2vw, 44px);
  box-shadow: 0 30px 70px -28px rgba(0,40,28,0.26), 0 6px 16px -6px rgba(0,40,28,0.08);
}
.bg-polotno .form-panel { background: var(--white); }
.form-panel .form { max-width: none; }
/* Optional header inside the form card */
.form-panel__head { margin-bottom: clamp(18px, 2vw, 24px); }
.form-panel__title { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.3px; color: var(--ink); margin: 0 0 4px; }
.form-panel__sub { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.5; }
/* Submit button inside a form card spans full width by default */
.form-panel .form > .btn,
.form > .btn[type="submit"] { width: 100%; justify-content: center; }

/* ===== Audience diptych (about «Хто наш клієнт») ===== */
.who-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.who-panel { padding: clamp(28px, 3vw, 44px); border-radius: var(--r-lg); }
.who-panel--children { background: var(--yaliv); color: var(--white); position: relative; overflow: hidden; }
.who-panel--children::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 85% 0%, rgba(154,199,107,0.16), transparent 55%); }
.who-panel--adults { background: var(--polotno); color: var(--ink); border: 1px solid var(--line); }
.who-panel > * { position: relative; z-index: 1; }
.who-panel__tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px; margin-bottom: 18px; }
.who-panel--children .who-panel__tag { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); }
.who-panel--adults .who-panel__tag { background: var(--white); color: var(--yaliv); border: 1px solid var(--line); }
.who-panel__title { font-size: clamp(20px, 1.9vw, 27px); font-weight: 600; letter-spacing: -0.4px; margin: 0; line-height: 1.15; }
.who-list { list-style: none; margin: 20px 0 0; padding: 0; }
.who-list li { position: relative; padding: 14px 0 14px 28px; font-size: 15.5px; line-height: 1.5; border-top: 1px solid var(--line); }
.who-list li:first-child { border-top: 0; }
.who-list li::before { content: ""; position: absolute; left: 0; top: 20px; width: 11px; height: 11px; border-radius: 50%; background: var(--ranok); }
.who-panel--children .who-list li { border-top-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.92); }
@media (max-width: 720px) { .who-split { grid-template-columns: 1fr; } }

/* ===== Editorial instructor profile — horizontal, portrait not dominant, constrained bio ===== */
.instructors { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 28px); }
.instructors--single { max-width: 920px; }
.instructor-card {
  display: grid; grid-template-columns: minmax(0, 290px) 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: clamp(22px, 2.6vw, 34px);
}
.instructor-card__photo { aspect-ratio: 4/5; overflow: hidden; background: var(--polotno); border-radius: var(--r-md); }
.instructor-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: saturate(0.94) contrast(0.99) sepia(0.05); transition: transform 1.1s var(--ease-expo); }
@media (hover: hover) { .instructor-card:hover .instructor-card__photo img { transform: scale(1.045); } }
.instructor-card__body { min-width: 0; }
.instructor-card__name { font-size: clamp(23px, 2.3vw, 30px); font-weight: 600; letter-spacing: -0.5px; color: var(--ink); margin: 0 0 5px; line-height: 1.08; text-wrap: balance; }
.instructor-card__role { font-size: 14.5px; font-weight: 500; color: var(--yaliv); margin: 0 0 18px; }
.instructor-card__bio { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 22px; max-width: 52ch; text-wrap: pretty; }
.cred-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; max-width: 460px; }
.cred-strip > div { background: var(--white); padding: 14px 16px; }
.cred-strip b { display: block; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; color: var(--yaliv); letter-spacing: -0.3px; }
.cred-strip span { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
@media (max-width: 620px) {
  .instructor-card { grid-template-columns: 1fr; gap: 22px; }
  .instructor-card__photo { max-width: 220px; }
}

/* ===== Course phase strip (Тіло → Стабілізація → Ресурс) ===== */
.phase-strip { --phase-gap: clamp(20px, 3vw, 44px); position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--phase-gap); }
/* connector runs from the centre of dot 1 (14px in) to the centre of dot 3 (one column-width from the right) */
.phase-strip::before { content: ""; position: absolute; top: 13px; left: 14px; right: calc((100% - 2 * var(--phase-gap)) / 3 - 14px); height: 2px; background: linear-gradient(90deg, var(--yaliv), var(--ranok)); opacity: 0.55; }
.phase { position: relative; padding-top: 38px; }
.phase::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--yaliv); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--polotno); }
.phase__num { position: absolute; top: 0; left: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 13px; font-weight: 600; z-index: 1; }
.phase__month { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--yaliv); font-weight: 600; margin: 0 0 6px; }
.phase__title { font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; letter-spacing: -0.3px; color: var(--ink); margin: 0 0 8px; }
.phase__text { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 30ch; }
@media (max-width: 680px) { .phase-strip { grid-template-columns: 1fr; gap: 28px; } .phase-strip::before { display: none; } .phase { padding-top: 0; padding-left: 42px; } }

/* ===== Featured testimonial on the dark juniper pivot — big scroll-illuminating quote + supporting voices ===== */
.quote-section { position: relative; overflow: hidden; }
.quote-section .container { position: relative; z-index: 1; }
/* Deep-green quote block — anchors GREEN mid-scroll so green and terracotta alternate
   (green quote block → terracotta CTA below). Reverted from terracotta: with the CTA
   now terracotta too, two terracotta blocks read too-orange (final review). */
.quote-section--warm { background: var(--yaliv); color: var(--white); }
.quote-section--warm .testi__mark { color: var(--ranok); }
.quote-section--warm .testi__avatar { background: var(--ranok); color: var(--yaliv); }
/* Centered editorial quote (client redesign: no clipped radial glow, one calm axis).
   Double class: must out-rank the base .testi grid declared later in this file. */
.testi.testi--center { display: block; max-width: 880px; margin: 0 auto; text-align: center; }
.testi.testi--center .testi__mark { margin: 0 auto clamp(12px, 1.6vw, 20px); line-height: 0.5; }
.testi.testi--center .testi__quote { margin: 0 auto; max-width: 24ch; }
.testi.testi--center .testi__by { justify-content: center; }
.testi.testi--center .testi__side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(36px, 4.5vw, 60px); text-align: left; }
.testi.testi--center .testi-mini { transition: none; }
@media (hover: hover) { .testi.testi--center .testi-mini:hover { background: rgba(255,255,255,0.06); transform: none; } }
@media (max-width: 680px) { .testi.testi--center .testi__side { grid-template-columns: 1fr; } }
.testi { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.testi__main { min-width: 0; }
.testi__mark { display: block; font-family: Georgia, "Times New Roman", serif; font-size: clamp(70px, 8vw, 120px); line-height: 0.4; color: var(--ranok); opacity: 0.5; margin-bottom: clamp(6px, 1.2vw, 14px); }
.testi__quote { font-size: clamp(24px, 2.9vw, 38px); font-weight: 500; line-height: 1.32; letter-spacing: -0.4px; margin: 0; color: var(--white); max-width: 18ch; text-wrap: balance; }
/* scroll word-illumination (same mechanism as the home mission etalon) */
.testi__quote .word { display: inline-block; color: rgba(255,255,255,0.32); transition: color 360ms var(--ease-out); }
.testi__quote .word.is-revealed { color: var(--white); }
@media (prefers-reduced-motion: reduce) { .testi__quote .word { color: var(--white); transition: none; } }
.testi__by { display: flex; align-items: center; gap: 14px; margin-top: clamp(28px, 3.5vw, 40px); }
.testi__avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ranok); color: var(--yaliv); font-weight: 700; font-size: 18px; }
.testi__name { font-size: 15px; font-weight: 600; color: var(--white); margin: 0; }
.testi__role { font-size: 13px; color: rgba(255,255,255,0.65); margin: 0; }
.testi__side { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 18px); }
.testi-mini {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg); padding: clamp(20px, 2vw, 26px);
  transition: background-color .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
@media (hover: hover) { .testi-mini:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,224,204,0.28); transform: translateY(-3px); } }
.testi-mini__mark { font-family: Georgia, "Times New Roman", serif; font-size: 34px; line-height: 0.5; color: #ffe0cc; opacity: 0.85; margin-bottom: 10px; display: block; }
.testi-mini p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 0 0 16px; flex: 1; }
.testi-mini footer { display: flex; align-items: center; gap: 10px; }
.testi-mini__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,224,204,0.16); color: #ffe0cc;
  font-weight: 700; font-size: 13px;
}
.testi-mini cite { font-size: 12.5px; font-style: normal; color: rgba(255,255,255,0.65); }

/* ===== Відгуки: редакторський розворот (program-single) =====
   Додати в style.css після блоку .testi-mini (~рядок 4063).
   Старі правила .testi--center / .testi-mini НЕ чіпаємо: .testi--center
   ще використовується другою секцією (index.html ~12039). */

/* Вертикальні відступи. Було інлайном clamp(96px,12vw,160px) = 160+160 = 320px
   чистої порожнечі на 1440. Тут 112+112 = 224px. */
.testi-spread-sec { padding: clamp(72px, 8vw, 112px) 0; }

/* .eyebrow за замовчуванням має колір oklch(46% 0.045 245) — темно-синій,
   розрахований на біле/полотно. На --yaliv це ~1.5:1, тобто нечитабельно.
   --ranok на #004D33 = 5.10:1 — проходить AA. Перекрит ОБОВ'ЯЗКОВИЙ. */
.quote-section--warm .eyebrow { color: var(--ranok); margin-bottom: 0; }

.testi-spread__head {
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  margin-bottom: clamp(36px, 4vw, 48px);
}

/* Сітка розвороту.
   align-items:start — верхні краї колонок на одній лінії. У базовому .testi
   стояло align-items:center, через що колонки «плавали» одна відносно одної.
   minmax(0,…) — захист від розпирання сітки довгим словом (no h-scroll). */
.testi-spread {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

/* ---------- Головний відгук ---------- */
.testi-spread__lead { margin: 0; min-width: 0; }

.testi-spread__mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 0.8;              /* НЕ 0.4: колапс line-height ламав вертикальний ритм */
  color: var(--ranok);
  opacity: 0.55;
  /* -0.06em — оптичне вирівнювання: бокова заплічина гліфа лапки інакше
     візуально відсуває колонку від краю ейброу вище. */
  margin: 0 0 clamp(8px, 1vw, 14px) -0.06em;
}

/* Міру рядка задає ШИРИНА КОЛОНКИ, а не max-width:24ch.
   На 1440: колонка ~749px при кеглі 29.5px → ~41 знак у рядку → 4 рядки
   замість 7. max-width в em — лише стеля для наддовгих екранів.
   text-wrap:pretty замість balance: balance при вузькій мірі і був однією
   з причин «вірша в стовпчик». */
.testi-spread__quote {
  font-size: clamp(20px, 2.05vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.3px;
  color: var(--white);           /* ~9.9:1 на --yaliv */
  margin: 0;
  max-width: 26em;
  text-wrap: pretty;
}

.testi-spread__by {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(26px, 3vw, 36px);
}
.testi-spread__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ranok); color: var(--yaliv);
  font-weight: 700; font-size: 17px;
}
.testi-spread__id { display: block; }
.testi-spread__name {
  display: block; font-style: normal;
  font-size: 15px; font-weight: 600; color: var(--white);
}
.testi-spread__role {
  display: block; font-size: 13px;
  color: rgba(255,255,255,0.72);  /* 5.97:1 на --yaliv */
}

/* ---------- Два інші відгуки ---------- */
/* Вертикальна волосяна лінія = «жолоб» розвороту: тримає праву колонку
   на сітці й замінює собою слабоконтрастні скляні картки. */
.testi-spread__notes {
  display: grid;
  gap: clamp(24px, 2.6vw, 32px);
  padding-left: clamp(28px, 3.4vw, 48px);
  border-left: 1px solid rgba(255,255,255,0.18);
}
.testi-note { margin: 0; }
.testi-spread__notes .testi-note + .testi-note {
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.testi-note p {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(255,255,255,0.94);  /* ~8.9:1 — раніше текст «тонув» разом із карткою */
  margin: 0 0 16px;
}
.testi-note footer { display: flex; align-items: center; gap: 10px; }
.testi-note__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(154,199,107,0.18); color: var(--ranok);
  font-weight: 700; font-size: 12.5px;
}
.testi-note cite {
  font-style: normal; font-size: 12.5px;
  color: rgba(255,255,255,0.72);  /* 5.97:1 */
}

/* ---------- Адаптив ---------- */
@media (max-width: 1024px) {
  .testi-spread { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
}

/* Планшет: розворот складається — два відгуки стають рядом ПІД головним,
   лівий край у всіх трьох лишається спільним. Розділювач між ними
   перетворюється з горизонтального на вертикальний. */
@media (max-width: 860px) {
  .testi-spread { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 44px); }
  .testi-spread__notes {
    grid-template-columns: 1fr 1fr;
    padding-left: 0; border-left: 0;
    padding-top: clamp(28px, 4vw, 36px);
    border-top: 1px solid rgba(255,255,255,0.18);
  }
  .testi-spread__notes .testi-note + .testi-note {
    padding-top: 0; border-top: 0;
    padding-left: clamp(24px, 3.5vw, 32px);
    border-left: 1px solid rgba(255,255,255,0.18);
  }
}

/* Мобільний: одна колонка, розділювач знову горизонтальний. */
@media (max-width: 600px) {
  .testi-spread__notes { grid-template-columns: 1fr; gap: 26px; }
  .testi-spread__notes .testi-note + .testi-note {
    padding-left: 0; border-left: 0;
    padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.18);
  }
}
/* Проявлення по словах для нового класу цитати. Базовий стан НАВМИСНО читабельний
   (0.62 -> ~6.4:1 на --yaliv, проходить AA): навіть якби анімація колись не
   докрутилась, текст лишається читабельним. Раніше база була 0.32 — нечитабельно,
   і саме це клієнт побачив на скріншоті. */
.testi-spread__quote .word { display: inline-block; color: rgba(255,255,255,0.62);
  transition: color 360ms var(--ease-out); }
.testi-spread__quote .word.is-revealed { color: var(--white); }
@media (prefers-reduced-motion: reduce) {
  .testi-spread__quote .word { color: var(--white); transition: none; }
}
@media (max-width: 820px) { .testi { grid-template-columns: 1fr; gap: 36px; } }

/* ===== Scroll reveal (premium settle) — opt-in, used on inner course/landing sections ===== */
.js-anim .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-calm), transform 0.9s var(--ease-expo); will-change: transform, opacity; }
.js-anim .rv.on { opacity: 1; transform: none; }
.js-anim .rv--blur { filter: blur(7px); transition: opacity 0.7s var(--ease-calm), transform 0.9s var(--ease-expo), filter 0.9s var(--ease-expo); }
.js-anim .rv--blur.on { filter: blur(0); }
.rv-d1 { transition-delay: 0.07s; } .rv-d2 { transition-delay: 0.14s; } .rv-d3 { transition-delay: 0.21s; } .rv-d4 { transition-delay: 0.28s; } .rv-d5 { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .rv, .js-anim .rv--blur { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ===== Soft ambient glow field (calm, paused until in view) ===== */
.glow-field { position: relative; overflow: hidden; isolation: isolate; }
.glow-field > .glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: -1; opacity: 0; transition: opacity 1.2s var(--ease-calm); }
.glow-field.in > .glow { opacity: 1; }
.glow--sage { background: radial-gradient(circle, rgba(154,199,107,0.5), transparent 70%); }
.glow--juniper { background: radial-gradient(circle, rgba(0,77,51,0.28), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .glow-field.in > .glow { animation: glow-drift 13s var(--ease-in-out) infinite; }
  .glow-field.in > .glow:nth-child(2) { animation-duration: 17s; animation-direction: alternate; }
}
@keyframes glow-drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(2.5%,-2%) scale(1.03); } 66% { transform: translate(-2%,2.5%) scale(0.98); } }

/* ===== Calm CTA micro-interactions — inner pages only (home untouched) ===== */
@media (hover: hover) and (pointer: fine) {
  .page:not([data-page="home"]) .btn--primary:hover,
  .page:not([data-page="home"]) .btn--white:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0,77,51,0.4); }
  .page:not([data-page="home"]) .btn svg { transition: transform 0.3s var(--ease-calm); }
  .page:not([data-page="home"]) .btn:hover svg { transform: translateX(3px); }
}

/* ===== Atmosphere — inner pages only (home etalon stays untouched) ===== */
/* Subtle film grain: only renders when a non-home page is active (sits below the sticky header z:50 and the drawer z:60) */
.page:not([data-page="home"])::before {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Warmer, deeper card interactions on inner pages — clickable cards only (info-cell is informational, no hover).
   .post (blog cards) is DELIBERATELY excluded: it's an editorial photo+text layout with no
   border-radius/border/background of its own (unlike the boxed .service-card/.soft-card/.project),
   so this square-cornered box-shadow rendered as a mismatched square outline poking out past
   the rounded .post__photo corners. .post already has its own purpose-built hover — the photo
   lifts and the image gently zooms (see .post:hover .post__photo below) — it doesn't need this too. */
@media (hover: hover) and (pointer: fine) {
  .page:not([data-page="home"]) .service-card:is([data-go], :has(a)):hover,
  .page:not([data-page="home"]) .soft-card:is([data-go], :has(a)):hover,
  .page:not([data-page="home"]) .project:hover {
    box-shadow: 0 2px 4px rgba(0,40,28,0.04), 0 26px 52px -24px rgba(0,77,51,0.22);
    border-color: oklch(20% 0.012 150 / 0.16);
  }
}
/* Lit-surface treatment for dark juniper blocks on inner pages */
.page:not([data-page="home"]) .cta-dark,
.page:not([data-page="home"]) .bg-yaliv { position: relative; overflow: hidden; }
.page:not([data-page="home"]) .cta-dark::before,
.page:not([data-page="home"]) .bg-yaliv::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent); z-index: 0;
}
.page:not([data-page="home"]) .cta-dark > *,
.page:not([data-page="home"]) .bg-yaliv > * { position: relative; z-index: 1; }

/* Inline checklist (centered benefits row above a centered form).
   Double class: must out-rank the base .checklist declared LATER in this file (flex-direction:column). */
.checklist.checklist--inline { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px clamp(20px, 2.5vw, 32px); }
.checklist.checklist--inline li { margin: 0; }

/* ===== Telegram-bot registration card (used where the real flow is the bot) ===== */
.bot-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid oklch(20% 0.012 150 / 0.08);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.2vw, 44px);
  box-shadow: 0 30px 70px -28px rgba(0,40,28,0.26), 0 6px 16px -6px rgba(0,40,28,0.08);
}
/* When placed beside a taller form (consult), the CTA sinks to the bottom so both cards match height */
.bot-card .btn { margin-top: auto; }
.bot-card__icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,77,51,0.08); color: var(--yaliv);
  margin-bottom: 20px;
}
.bot-card__icon svg { width: 30px; height: 30px; }
.bot-card__title { font-size: clamp(20px, 1.9vw, 25px); font-weight: 600; letter-spacing: -0.4px; color: var(--ink); margin: 0 0 8px; }
.bot-card__text { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; max-width: 46ch; }
.bot-steps { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bot-steps li { position: relative; padding-left: 40px; font-size: 14.5px; color: var(--ink); line-height: 1.45; min-height: 28px; display: flex; align-items: center; }
.bot-steps li::before {
  counter-increment: botstep;
  content: counter(botstep);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--yaliv); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.bot-steps { counter-reset: botstep; }
.bot-card .btn { width: 100%; justify-content: center; }
.bot-card__note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; text-align: center; }

/* Info cell base (used in info-grid) */
.info-cell { min-width: 0; }

/* Project badge — completed variant (muted) */
.project__badge--done {
  background: rgba(255,255,255,0.86);
  color: var(--ink-2);
}
/* Featured post inside blog hero split */
.post--hero { height: 100%; }

/* Logo wall — static grid of partner logos */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.logo-wall__item {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 112px;
}
.logo-wall__item img[src*="smart-osvita"],
.logo-wall__item img[src*="pozytyvni-zhinky"] { max-height: 72px; }
.logo-wall__item img {
  max-height: 52px;        /* bigger so smaller logos (Red Cross, Спільно) are clearly legible */
  max-width: 80%;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  filter: grayscale(0.1);   /* near-natural so logos stay recognisable, just lightly unified */
  transition: opacity 200ms var(--ease-out), filter 200ms var(--ease-out);
}
.logo-wall__item:hover img { opacity: 1; filter: grayscale(0); }
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }

/* Band — full-width inline CTA row (text left, button right) */
.band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.band__text { flex: 1 1 300px; min-width: 0; }
.band__title { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: var(--ink); letter-spacing: -0.3px; margin: 0 0 6px; }
.band__sub { font-size: 14.5px; color: var(--ink-2); margin: 0; max-width: 52ch; }
.band .btn { flex-shrink: 0; }

/* Vacancy card */
.vacancy {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 30px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .vacancy:hover { border-color: oklch(20% 0.012 150 / 0.18); box-shadow: var(--shadow-2); transform: translateY(-2px); }
}
.vacancy__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.vacancy__title { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.3px; line-height: 1.25; margin: 0; }
.vacancy__type {
  flex: none;
  padding: 4px 10px;
  background: rgba(0,77,51,0.07);
  color: var(--yaliv);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.vacancy__meta { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; }
.vacancy .service-card__link { margin-top: auto; }

/* Document rows — downloadable reports / files */
.doc-list { display: flex; flex-direction: column; gap: 12px; }
.doc-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  padding: 18px clamp(18px, 2vw, 24px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.bg-white .doc-row { background: linear-gradient(180deg, #fff, oklch(99% 0.005 150)); }
@media (hover: hover) and (pointer: fine) {
  .doc-row:hover { border-color: oklch(20% 0.012 150 / 0.2); box-shadow: var(--shadow-1); transform: translateY(-1px); }
}
.doc-row__icon {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: rgba(189,92,35,0.08);
  color: var(--lastov);
}
.doc-row__icon svg { width: 20px; height: 20px; }
.doc-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-row__title { font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.2px; }
.doc-row__meta { font-size: 12.5px; color: var(--muted); }
.doc-row__action {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--yaliv);
  white-space: nowrap;
}
.doc-row__action svg { width: 16px; height: 16px; }
.doc-row:hover .doc-row__action { color: var(--yaliv-deep); }
@media (max-width: 560px) {
  /* Було `.doc-row__action span{display:none}` — правило НІКОЛИ не спрацьовувало:
     у розмітці <span class="doc-row__action">Текст<svg/></span>, вкладеного span немає.
     Через це підпис «Документація»/«Завантажити» з'їдав 113px і назва
     тендера тулилась у 104px, розсипаючись на 4 рядки. Замість ховати текст —
     переносимо дію на власний рядок, назва отримує всю ширину. */
  .doc-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .doc-row__action { grid-column: 2; justify-self: start; }
}

/* Spec list — key/value rows inside detail cards (program, event) */
.spec-list { margin: 0; }
.spec-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.spec-list > div:last-child { border-bottom: 0; }
.spec-list dt { font-size: 13.5px; color: var(--muted); }
.spec-list dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; }

/* Checklist — yaliv check marks, used beside forms / reassurance */
.checklist {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(0,77,51,0.10);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 6px; top: 6px;
  width: 4px; height: 8px;
  border-right: 2px solid var(--yaliv);
  border-bottom: 2px solid var(--yaliv);
  transform: rotate(45deg);
}

/* Quote band — full-width testimonial / philosophy moment on yaliv */
.quote-band {
  text-align: left;
}
.quote-band__text {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--white);
  margin: 0 0 24px;
  max-width: 24ch;
}
.quote-band__author {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}
.quote-band__author strong { color: var(--ranok); font-weight: 600; display:block; margin-bottom: 2px; }


/* ============================================================
   КОМАНДА — 96 людей, фільтр за локацією (v55)
   ============================================================ */

/* пояснювальний рядок над фільтром: базові компетенції не винесені в чіпи */
.team-note{
  max-width:62ch; margin:0 0 clamp(18px,2vw,26px);
  color:var(--muted); font-size:14.5px; line-height:1.6;
}

/* лічильник у чіпі: «Онлайн 39» */
.tab__n{
  margin-left:6px; opacity:.6;
  font-variant-numeric:tabular-nums; font-weight:600;
}
.tab.is-active .tab__n{opacity:.75}

/* сітка карток */
.team-grid{align-items:start}

/* локація в картці — дрібним капсом під посадою */
.team-card__loc{
  margin:6px 0 0; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--yaliv); font-weight:600;
}

/* фолбек, коли фото немає: іменна плашка з ініціалами (не сірий силует) */
.team-card__photo--initials{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/5; background:var(--lastov);
}
.team-card__photo--initials span{
  color:#fff; font-size:clamp(30px,4vw,42px); font-weight:600; letter-spacing:.02em;
}

/* кнопка «показати більше» */
.team-more-wrap{display:flex; justify-content:center; margin-top:clamp(26px,3vw,38px)}
.team-more-wrap[hidden]{display:none}

/* адмінкоманда — свідомо простіша картка, без переходу в профіль */
.team-grid--admin .team-card{cursor:default}
.team-card--admin .team-card__photo{aspect-ratio:1/1}
.team-card--admin:hover{transform:none; box-shadow:none}
.team-card--admin .team-card__name{font-size:16px}
.team-card--admin .team-card__role{font-size:13px}

/* картка фахівця клікабельна з клавіатури */
.team-card[role="link"]{cursor:pointer}
.team-card[role="link"]:focus-visible{
  outline:3px solid var(--yaliv); outline-offset:3px; border-radius:14px;
}
.team-card.beyond{display:none}

/* ============================================================
   СТОРІНКА ФАХІВЦЯ (v58)
   Проблема, яку лікуємо: сторінка була на 60% порожня —
   права колонка 980px при заголовку 641px, текст біо 668px у контейнері 1216px,
   секція біо 104px паддінгу зверху/знизу при 214px контенту.
   ============================================================ */

/* Шапка: вужчий контейнер + фото і текст поруч, без мертвої зони праворуч */
.spec-head{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(28px,4vw,52px); align-items:start; margin-top:clamp(20px,2.5vw,30px);
}
.spec-head__media img{
  width:100%; max-width:320px;
  height:auto;            /* без цього атрибут height="800" розтягує фото */
  aspect-ratio:4/5; object-fit:cover;
  border-radius:16px; display:block;
}
/* Плашка з ініціалами: НЕ ставити display:block — вона центрує вміст флексом */
.spec-head__media .team-card__photo--initials{
  width:100%; max-width:320px; aspect-ratio:4/5; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
}
.spec-head__media .team-card__photo--initials span{font-size:clamp(46px,6vw,66px); line-height:1}

.spec-head__body{max-width:62ch}
.spec-head__title{
  font-size:clamp(30px,3.6vw,46px); font-weight:600; line-height:1.08;
  letter-spacing:-.02em; color:var(--ink); margin:0 0 10px; text-wrap:balance;
}
.spec-head__role{font-size:clamp(16px,1.25vw,18.5px); color:var(--ink-2); margin:0 0 12px}

/* Локація — пілюля, а не дрібний капс загублений у порожнечі */
.spec-pill{
  display:inline-block; padding:5px 13px; border-radius:999px;
  background:var(--soft-green,#e6efea); color:var(--yaliv);
  font-size:11.5px; font-weight:650; letter-spacing:.07em; text-transform:uppercase;
}
/* Лід — ПЕРШИЙ абзац опису клієнта, перенесений у шапку.
   Це не новий текст: він просто не дає правій колонці бути порожньою. */
.spec-head__lead{
  margin:18px 0 0; font-size:17px; line-height:1.65; color:var(--ink-2); max-width:58ch;
}
.spec-head__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}

/* Біо: вузька колонка-мітка + читабельний текст.
   НЕ .proj-about — то сітка 1fr/1fr під сторінку проєкту, вона розкидала абзаци. */
.spec-bio{display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:clamp(20px,3.5vw,48px); align-items:start}
.spec-bio__body{max-width:66ch}
.spec-bio__body p{font-size:16.5px; line-height:1.72; color:var(--ink-2); margin:0 0 15px}
.spec-bio__body p:last-child{margin-bottom:0}
/* секція біо була наполовину порожня */
/* усі секції сторінки фахівця, крім першої (їй загальносайтове правило
   .page:not([data-page="home"]) > section:first-child дає 43px/0) */
.page[data-page^="specialist-"] section.bg-white,
.page[data-page^="specialist-"] section.bg-polotno{padding:clamp(52px,6vw,76px) 0}

/* Шапку фахівця веде загальносайтове правило для першої секції
   (.page:not([data-page="home"]) > section:first-child) з padding-bottom:0.
   Для текстових сторінок це ок, а тут знизу стоїть фото 4:5 — воно впиралося
   в стик із наступною секцією. Селектор навмисно тієї ж форми (0,4,1),
   щоб виграти за порядком у файлі, а не через !important. */
.page[data-page^="specialist-"] > section.spec-hero:first-child{
  padding-bottom:clamp(40px,5vw,64px)}

/* Блок колег тієї ж локації — реальні люди, корисна навігація */
.sec-head--row{display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:clamp(20px,2.5vw,30px)}
.sec-head--row .sec-h{margin:0}
.spec-peers .team-card__photo{aspect-ratio:4/5}

@media (max-width:860px){
  .spec-head{grid-template-columns:1fr; gap:20px}
  .spec-head__media img,
  .spec-head__media .team-card__photo--initials{max-width:240px}
  .spec-bio{grid-template-columns:1fr; gap:10px}
  .spec-bio__body p{font-size:15.5px}
  .spec-head__lead{font-size:15.5px}
  .sec-head--row{flex-direction:column; align-items:flex-start}
}

/* ---- секція «З якими запитами працює» (перелік із опису клієнта) ---- */
.spec-topics{display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(20px,3.5vw,48px); align-items:start}
.spec-topics__aud{margin:12px 0 0; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.spec-topics__list{list-style:none; margin:0; padding:0;
  columns:2; column-gap:clamp(24px,3vw,44px)}
.spec-topics__list li{break-inside:avoid; -webkit-column-break-inside:avoid;
  position:relative; padding:7px 0 7px 20px; font-size:15.5px; line-height:1.5; color:var(--ink)}
.spec-topics__list li::before{content:""; position:absolute; left:0; top:16px;
  width:6px; height:6px; border-radius:50%; background:var(--lastov)}
.spec-topics__list--short{columns:1}
@media (max-width:860px){          /* той самий брейкпоінт, що й у .spec-head/.spec-bio —
                                      інакше в проміжку 761-860 шапка вже одноколонкова,
                                      а перелік ще тулиться у дві колонки по ~200px */
  .spec-topics{grid-template-columns:1fr; gap:10px}
  .spec-topics__list{columns:1}
}

/* Акцентна цитата на сторінці «Відгуки» (одинична, тому центрування лишаємо).
   Було: інлайн padding clamp(96px,12vw,160px) = 320px порожнечі на 366px контенту,
   і текст затиснутий у max-width:24ch -> куці рядки. Тепер габарити як у
   розвороту на program-single, а міру рядка задає em, а не ch. */
.testi-pull { padding: clamp(72px, 8vw, 112px) 0; }
.testi-pull .testi.testi--center .testi__quote { max-width: 17em; }

/* ============================================================
   МАЙСТЕР ПІДБОРУ ПОСЛУГ
   Додати в кінець css/style.css. Нових токенів не заводимо —
   усе на наявних змінних :root, шрифт успадковується (Inter Tight).
   Кнопки-варіанти використовують наявний клас .tab.
   ============================================================ */

/* Без JS майстер не показуємо: усі 8 карток лишаються видимими,
   сторінка працює як звичайний каталог замість мертвих кнопок. */
.wiz { display: none; }
.wiz.is-ready { display: grid; gap: clamp(18px, 2.2vw, 26px); }

/* ---------- Ваш вибір: обрані відповіді, кожну можна зняти ---------- */
.wiz__path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wiz__path-label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-right: 2px;
}
.wiz__crumb {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 13px 9px 16px;
  border: 1px solid var(--yaliv); border-radius: var(--r-pill);
  background: var(--yaliv); color: #fff;
  font-size: 13.5px; font-weight: 500; line-height: 1;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.wiz__crumb svg { width: 12px; height: 12px; opacity: 0.75; flex: none; }
/* теракота на ховері = «прибрати», не «підтвердити» */
.wiz__crumb:hover { background: var(--lastov); border-color: var(--lastov); }

/* ---------- Питання ---------- */
.wiz__step { outline: none; }
.wiz__axis {                      /* назва осі з документа клієнта */
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin: 0 0 10px;
}
.wiz__q {                         /* людське формулювання того самого */
  font-size: clamp(21px, 2.4vw, 28px); font-weight: 600;
  letter-spacing: -0.4px; line-height: 1.15;
  color: var(--ink); margin: 0 0 18px; max-width: 30ch;
}
.wiz__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tab--lg { padding: 12px 20px; font-size: 15px; }

/* ---------- Альтернативні точки входу (тільки на першому питанні) ---------- */
.wiz__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wiz__alt-label { font-size: 13.5px; color: var(--muted); margin-right: 2px; }
.wiz__alt .tab { padding: 7px 14px; font-size: 13px; }

/* ---------- Фінал ---------- */
.wiz__done { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.wiz__done-text {
  font-size: clamp(18px, 1.9vw, 22px); font-weight: 600;
  letter-spacing: -0.2px; color: var(--ink); margin: 0;
}

/* ---------- Підсумковий рядок ---------- */
.wiz__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 12px;
  padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--line);
}
.wiz__count { margin: 0; }

/* Нове питання з'являється на місці попереднього — коротка м'яка поява,
   без стрибків висоти. Питання завжди в одній точці екрана. */
@media (prefers-reduced-motion: no-preference) {
  .wiz__step, .wiz__done { animation: wizIn 300ms var(--ease-out) both; }
}
@keyframes wizIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 680px) {
  .wiz.is-ready { gap: 18px; }
  .wiz__q { font-size: 20px; margin-bottom: 14px; max-width: none; }
  .tab--lg { padding: 11px 16px; font-size: 14.5px; }
  .wiz__foot { justify-content: flex-start; }
}

/* ============================================================
   ГОЛОВНА — перший крок майстра всередині картки-прев'ю
   ============================================================ */

/* Картка стала інтерактивною: плаваюча анімація рухала б ціль під курсором. */
.serv-preview--live { animation: none; }

.sv-pick { display: grid; gap: 12px; }
.sv-pick__q {
  margin: 0; font-size: 16px; font-weight: 600;
  letter-spacing: -0.2px; color: var(--ink);
}
.sv-pick__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-pick__opts .tab { padding: 8px 14px; font-size: 13px; }

/* Число не «стрибає» при зміні: моноширинні цифри + фіксована ширина CTA. */
.serv-preview__match-num { font-variant-numeric: tabular-nums; }
.serv-banner__cta { min-width: 238px; justify-content: center; }

/* Секція .serv-banner робить фокус-кільце білим (воно на ялівці).
   Усередині світлої картки-прев'ю біле кільце невидиме — повертаємо зелене. */
.serv-preview :focus-visible { outline-color: var(--yaliv); }

@media (max-width: 680px) {
  .serv-banner__cta { min-width: 0; width: 100%; }
  .sv-pick__opts .tab { padding: 9px 14px; font-size: 13.5px; }
}


/* ================= Сторінки навчальних програм (program-*) =================
   Переписано 29.07.2026: попередня версія була набором «заголовок ліворуч /
   текст праворуч», через що права половина екрана лишалась порожньою.
   Тут — тільки повношириннi блоки. */

/* --- Зміст програми: теми як картки, а не як плоский список --- */
.prog-topics {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  /* рівна висота в межах рядка: рвані нижні краї сусідніх карток
     читаються як недороблена сітка */
  align-items: stretch;
}
/* Непарна кількість тем (у програмах їх 3 / 6 / 4) лишила б останню картку
   саму в лівій колонці. Розтягуємо її на обидві та ділимо список надвоє. */
.prog-topic:last-child:nth-child(odd) { grid-column: 1 / -1; }
.prog-topic:last-child:nth-child(odd) .prog-topic__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.5vw, 56px);
}
.prog-topic {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 16px;
}
.prog-topic__head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.prog-topic__num {
  flex: none;
  font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; line-height: 0.9;
  letter-spacing: -1.5px; color: var(--lastov); font-variant-numeric: tabular-nums;
}
.prog-topic__title {
  margin: 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600;
  letter-spacing: -0.3px; line-height: 1.25; color: var(--ink);
}
.prog-topic__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.prog-topic__list li {
  position: relative; padding-left: 18px;
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
}
.prog-topic__list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--lastov);
}

/* --- Результати: той самий checklist, але на ялівцевому фоні --- */
.checklist.checklist--2col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px) clamp(28px, 3.5vw, 56px);
  align-items: start; margin-top: 4px;
}
.checklist--2col li { font-size: 15.5px; line-height: 1.55; }
.bg-yaliv .checklist li { color: rgba(255,255,255,0.86); }
.bg-yaliv .checklist li::before { background: rgba(255,255,255,0.16); }
.bg-yaliv .checklist li::after { border-color: var(--ranok); }
.bg-yaliv .sec-h { color: var(--white); }
.bg-yaliv .sec-sub { color: rgba(255,255,255,0.72); }

/* --- Оцінювання: повний текст наказу під плитою з цифрами.
   Дві колонки, бо суцільним рядком це стіна на 750 знаків. --- */
.prog-assess {
  margin: clamp(26px, 3vw, 38px) 0 0;
  columns: 2; column-gap: clamp(32px, 4vw, 64px);
  font-size: 15px; line-height: 1.7; color: var(--ink-2);
}

/* --- Донори в блоці сертифіката --- */
.prog-donors { margin-top: clamp(26px, 3vw, 36px); padding-top: 22px; border-top: 1px solid var(--line); }
.prog-donors__label { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.prog-donors__logos { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; }
.prog-donors__logos img { height: 30px; width: auto; opacity: 0.62; }

/* --- CTA під кроками реєстрації --- */
.prog-register-cta {
  margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); flex-wrap: wrap;
}
.prog-register-cta__note { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 46ch; }

@media (max-width: 900px) {
  .prog-topics { grid-template-columns: minmax(0, 1fr); }
  .checklist.checklist--2col { grid-template-columns: minmax(0, 1fr); }
  .prog-assess { columns: 1; }
}

/* Мета програми: фото збоку замість повноекранного банера —
   групові кадри кадруються по центру, а не по верхній третині, як портрети. */
/* head-feature__photo обмежений 400px і квадратом — це під портрет голови
   організації. Тут кадр груповий, тому знімаємо стелю й робимо 5:4. */
.prog-aim__photo { max-width: none; aspect-ratio: 5 / 4; }
.prog-aim__photo img { object-position: center 45%; }
.prog-aim__text {
  margin: 0; max-width: 54ch;
  font-size: 16.5px; line-height: 1.7; color: var(--ink-2);
}

/* Порожній стан списку (вакансії): показується, коли карток не лишилось.
   Не 404-екран, а спокійне повідомлення з дією — щоб розділ не читався
   як зламаний. */
.empty-note {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); flex-wrap: wrap;
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 4vw, 52px);
  background: var(--polotno); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.empty-note__icon {
  flex: none; width: 52px; height: 52px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,77,51,0.07); color: var(--yaliv);
}
.empty-note__icon svg { width: 24px; height: 24px; }
.empty-note__body { flex: 1 1 320px; min-width: 0; }
.empty-note__title {
  margin: 0 0 6px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600;
  letter-spacing: -0.3px; color: var(--ink);
}
.empty-note__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 640px) {
  .empty-note { flex-direction: column; align-items: flex-start; }
}

/* Контраст рамки контурних кнопок на кольорових підкладках.
   Було 0.45–0.55 альфи білого: на теракоті це давало 2.2–2.6:1 при нормі 3.0
   для елемента інтерфейсу. 0.78 дає ~3.6:1, візуально рамка майже та сама. */