/* ============================================
   ЦПД «Конфіденс» — 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) */
a.soft-card { color: inherit; text-decoration: none; }
.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; }
.btn--arrow svg {
  flex: none;
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn--arrow:hover svg { transform: translateX(3px); }
}

/* ---------- AJAX listing controls ---------- */
.ajax-load-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 52px);
}
.ajax-load-button-wrapper .more-btn:disabled {
  opacity: 0.62;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.ajax-load__pagination {
  display: flex;
  justify-content: center;
  margin-top: clamp(18px, 2.4vw, 30px);
}
.ajax-load__pagination ul.page-numbers {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.ajax-load__pagination li {
  margin: 0;
  padding: 0;
}
.ajax-load__pagination a.page-numbers,
.ajax-load__pagination span.page-numbers {
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--white), oklch(98% 0.006 150));
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition:
    transform 200ms var(--ease-out),
    color 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    background-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}
.ajax-load__pagination span.page-numbers.current {
  border-color: var(--yaliv);
  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 10px 22px -12px rgba(0,77,51,0.55);
}
.ajax-load__pagination span.page-numbers.dots {
  min-width: 24px;
  padding: 0 2px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .ajax-load__pagination a.page-numbers:hover {
    color: var(--yaliv);
    border-color: rgba(0,77,51,0.24);
    background: var(--white);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
  }
}
.ajax-load__pagination a.page-numbers:focus-visible {
  outline: 2px solid var(--yaliv);
  outline-offset: 3px;
}
.pagination-arrow {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination-arrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.pagination-arrow-prev::before { transform: rotate(-135deg); margin-left: 3px; }
.pagination-arrow-next::before { transform: rotate(45deg); margin-right: 3px; }

/* ---------- 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: 10px;
  height: 76px;
}
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 36px; width: auto; }
.nav__menu {
  display: flex; justify-content: center; gap: 4px; flex: 1;
}
.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; flex: 0 0 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.is-active {
  color: var(--yaliv);
  background: rgba(0,77,51,0.08);
}
.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.is-active > summary {
  color: var(--yaliv);
  background: rgba(0,77,51,0.08);
}
.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 > a.is-active {
  color: var(--yaliv);
  background: rgba(0,77,51,0.08);
}
.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);
}
.front-page .hero__grid {
  min-height: 0;
}
.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 */
  position: relative;
  display: inline-block;
}
.hero__title em::before {
  content: "";
  position: absolute;
  left: -2%;
  bottom: -14px;
  width: 104%;
  height: 14px;
  background: var(--ranok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 18' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M3 12.5C50 5 130 4 180 8.5C218 12 260 13 297 5.5' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 18' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M3 12.5C50 5 130 4 180 8.5C218 12 260 13 297 5.5' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  animation: drawUnderline 1.2s 600ms var(--ease-out) forwards;
  pointer-events: none;
}
.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; }
/* Інлайн-стилі бейджа з верстки (01-home.html) втрачені при переносі —
   компенсуємо в CSS: <strong> у свій рядок і 600 (не дефолтні 700),
   <span> — приглушений. */
.hero__badge strong { display: block; font-weight: 600; }
.hero__badge span { color: var(--muted); }

/* ---------- 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-banner__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow:
    0 40px 70px -45px rgba(0,0,0,0.40),
    0 18px 40px -28px rgba(0,0,0,0.22);
}
.training-bot-card {
  margin-top: clamp(28px, 3.5vw, 48px);
}
.training-certificate {
  margin-bottom: clamp(48px, 6vw, 80px);
}
.training-results-head {
  margin-bottom: clamp(36px, 4vw, 52px);
  max-width: 560px;
}
.training-card__register-link {
  margin-top: 6px;
}
.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);
}
.serv-preview--live { animation: none; }
.sv-pick { display: grid; gap: 12px; }
.sv-pick__q {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.sv-pick__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-pick__opts .tab { padding: 8px 14px; font-size: 13px; }
.serv-preview__match-num { font-variant-numeric: tabular-nums; }
.serv-banner__cta { min-width: 238px; justify-content: center; }
.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; }
}

/* ---------- 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; flex-shrink: 0; 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: clamp(58px, 5vw, 76px); width: auto;
  max-width: 260px;
  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;
  object-fit: contain;
}
@media (hover: hover) and (pointer: fine) {
  .partner-logo:hover { filter: grayscale(0%) brightness(1); opacity: 1; transform: scale(1.05); }
}
/* Білі лого (напр. «Рух Єдність») на світлому фоні: без інверсії вони
   зникають, а на :hover brightness(1) робить їх зовсім білими. Тому окремий
   фільтр з invert + власне hover-правило (щоб загальний :hover не переб'яв). */
.partner-logo--invert { filter: invert(0.4) brightness(0.6); }
@media (hover: hover) and (pointer: fine) {
  .partner-logo--invert:hover { filter: invert(1) brightness(0.9); 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); }
/* Рядки «Формат:»/«Тривалість:» без іконки — окремий клас без flex/gap
   .event__date (той gap під іконку зсував текст ~22px). Аудит #48. */
.event__meta {
  font-size: 14px; color: var(--ink-2);
  margin-bottom: 6px;
}
.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);
  /* Однакова стартова висота карток у ряду. Раскрытие (align-items:start)
     збільшує картку ВНИЗ понад min-height, не чіпаючи сусідів. На мобілці
     (1 колонка) скидається — див. media ≤680px. */
  min-height: 380px;
  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 — текст заповнює доступну висоту картки, тож кнопка «Читати
     повністю» й футер завжди лишаються ВСЕРЕДИНІ (не вилазять). Довгий текст
     ріже клемп (6 рядків), тож блок не росте вище потрібного. Однакову
     стартову висоту карток у ряду тримає .testimon{min-height}. */
  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;
  /* max-height = 6 рядків: стеля для клемпу (щоб -webkit-box не ріс на всю
     висоту flex-картки). Саму рівну висоту карток дає .testimon{min-height}. */
  max-height: calc(1.55em * 6);
}
.testimon.is-expanded .testimon__text {
  -webkit-line-clamp: unset;
  overflow: visible;
  max-height: none;
}
.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;
  /* Футер (дата + імʼя) завжди притиснутий донизу картки, незалежно від
     довжини тексту й наявності кнопки «Читати повністю». */
  margin-top: auto;
}
.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; }
/* Відгуки виводяться в різних контейнерах-сітках: хаб — .grid--3[data-ajax-items],
   single-фахівця — .grid--2, головна — .test__grid. Grid за замовчуванням
   розтягує картки по висоті найвищої (align-items:stretch) → без обмеження текст
   заповнює цю висоту і клемп не працює. Тому сітки з картками відгуків (крім хаба)
   не розтягуємо; текст тримає max-height. */
:has(> .testimon) { align-items: start; }
/* Фолбек для браузерів без :has() — відомі контейнери відгуків. */
.ajax-load[data-card-template="testimonial-card"] [data-ajax-items],
.test__grid { align-items: start; }
/* На мобілці (≤680px, де grid переходить в 1 колонку — responsive.css) картки
   йдуть по одній у ряд, вирівнювати нема з ким. Фіксована висота тексту лише
   лишала б порожній хвіст у коротких відгуків — тому скидаємо в auto. */
@media (max-width: 680px) {
  .testimon { min-height: 0; }
}

/* ---------- 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__title { margin-bottom: 48px; }
.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,
.footer__socials img { width: 18px; height: 18px; display: block; }
.footer__socials img { filter: brightness(0) invert(1); }
.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; flex-wrap: wrap; gap: 12px 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 {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}
.breadcrumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.crumb a,
.breadcrumbs__link {
  color: var(--muted);
  transition: color 180ms var(--ease-out);
}
.crumb a:hover,
.breadcrumbs__link: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,
.page-banner .breadcrumbs__link { color: rgba(255,255,255,0.72); }
.page-banner .crumb a:hover,
.page-banner .breadcrumbs__link: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,
.soft-card__icon img {
  width: 23px;
  height: 23px;
}
.soft-card__icon img {
  display: block;
  object-fit: contain;
}
.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;
}
.soft-card__body {
  color: var(--ink-2);
  line-height: 1.6;
}
.soft-card__body p { margin: 0 0 12px; }
.soft-card__body p:last-child { margin-bottom: 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-crumbs {
  padding-top: 40px;
}
.media-head {
  margin-bottom: clamp(28px, 3vw, 40px);
}
.media-head__text {
  margin-bottom: 0;
}
.media-band {
  margin-top: clamp(40px, 5vw, 64px);
}
.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: 0 0 clamp(280px, 31%, 400px); scroll-snap-align: start; }
.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-hero { padding-bottom: 0; }
.legal-hero .page-hero { padding-bottom: clamp(24px, 3vw, 40px); }
.legal-section { padding-top: 0; }
.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; }
@media (max-width: 920px) {
  .legal-section .article-aside { order: -1; }
}
.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: rgba(255,255,255,0.7); }
.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. */
.js-anim .fade-in--photo {
  transform: scale(1.09) translateY(16px);
  filter: blur(11px);
  transition:
    opacity 950ms var(--ease-calm) var(--stagger-delay, 0ms),
    transform 950ms var(--ease-calm) var(--stagger-delay, 0ms),
    filter 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); filter: blur(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 — успадковано з single-page прототипу (design-source),
 * де .page/.page.is-active перемикали "віртуальні сторінки" через JS.
 * У WordPress-темі кожна сторінка вантажиться окремо, .page-обгортки
 * ніде не використовуються — але WP body_class() сам додає клас "page"
 * для типу запису page, і він випадково збігався з цим селектором,
 * ховаючи всю сторінку (.page { display: none; }). Закоментовано повністю. */
/*
.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; }
}

/* ============================================
   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;
  flex: 0 0 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.is-active .nav-dropdown__trigger {
  color: var(--yaliv);
  background: rgba(0,77,51,0.06);
}
.nav-dropdown__item.is-active {
  background: rgba(0,77,51,0.06);
}
.nav-dropdown__item.is-active .nav-dropdown__item-title {
  color: var(--yaliv);
}
.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;
  flex: 0 0 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); }
}
@keyframes drawUnderline {
  to { transform: scaleX(1); }
}
.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);
}
.events__featured-wrap {
  margin-bottom: clamp(32px, 4vw, 48px);
}
@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);
}
@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__title em::before { animation: none; transform: scaleX(1); }
  .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. */
div.page:not([data-page="home"]) section.bg-white,
div.page:not([data-page="home"]) section.bg-polotno,
div.page:not([data-page="home"]) section.bg-warm,
div.page:not([data-page="home"]) section.bg-yaliv {
  padding: clamp(72px, 8vw, 104px) 0;
}
div.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). */
div.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 */
div.page:not([data-page="home"]) section.section--filters {
  padding-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(28px, 3vw, 40px);
}
/* У темі немає обгортки .page (лише <main>), тому донорські правила вище
   (завʼязані на .page[data-page]) не спрацьовували — секція фільтрів і перший
   екран отримували повний --section-y. Дублюємо ті самі відступи верстки для
   нашої структури <main>. */
section.section--filters {
  padding-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(28px, 3vw, 40px);
}
/* Той самий щедрий відступ секцій внутрішніх сторінок, що донор давав через
   div.page:not([data-page=home]) — дублюємо для нашої структури main#main
   (головна має власний page-home.php і сюди не входить). Аудит #14.
   ВИКЛЮЧАЄМО .section--filters (мають власні тісні відступи нижче) і ПЕРШУ
   секцію (її верхній відступ керується first-of-type/blog/faq правилами) —
   інакше це широке правило перебивало б уже налаштовані відступи. */
body:not(.home) main#main > section.bg-white:not(.section--filters):not(:first-of-type),
body:not(.home) main#main > section.bg-polotno:not(.section--filters):not(:first-of-type),
body:not(.home) main#main > section.bg-warm:not(.section--filters):not(:first-of-type),
body:not(.home) main#main > section.bg-yaliv:not(.section--filters):not(:first-of-type) {
  padding: clamp(72px, 8vw, 104px) 0;
}
body:not(.home) main#main > section.section--tight {
  padding: clamp(32px, 4vw, 52px) 0;
}
/* Перший екран single-сторінок (specialist тощо): менший верхній відступ,
   як у верстці. Не чіпаємо page-banner (він має власні відступи). */
main#main > section:first-of-type:not(.page-banner) {
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: 0;
}

body.blog-page main > section.bg-white:first-child {
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: 0;
}
body.faq-page main > section.bg-white:first-child {
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: 0;
}

.about-mission-intro__grid {
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}
.about-mission-intro__text {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.3px;
  max-width: 36ch;
}
.about-mission-section-head {
  margin-bottom: clamp(36px, 4.5vw, 56px);
  max-width: 640px;
}
.about-mission-history-head {
  margin-bottom: clamp(48px, 6vw, 72px);
}
.about-mission-stats-head {
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 640px;
}
.about-mission-stats-head .sec-sub {
  margin-bottom: 0;
}
.about-mission-leader-head {
  margin-bottom: clamp(40px, 5vw, 56px);
  max-width: 560px;
}
.about-mission-leader {
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.about-mission-leader__photo {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.about-mission-leader__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-mission-leader__content {
  padding-top: clamp(8px, 1vw, 16px);
}
.about-mission-leader__name {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0 0 12px;
}
.about-mission-leader__role {
  font-size: 15px;
  color: var(--yaliv);
  margin: 0 0 24px;
  font-weight: 500;
}
.about-mission-leader__text {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 48ch;
}


/* 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);
}
.team-card[data-go]: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[data-go]: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; }
.faq-body .faq__list { margin-bottom: clamp(36px, 4vw, 56px); }
.faq-body .faq__list:last-child { margin-bottom: 0; }

/* 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 {
  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; }
.cert-card--image {
  padding: 0;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  background: #fff;
}
.cert-card--image::before { display: none; }
.cert-card--image img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* ===== 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; }

/* ===== 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,
.faq-aside__contact img { width: 18px; height: 18px; color: var(--yaliv); flex: none; object-fit: contain; }
.faq-aside__button { width: 100%; justify-content: center; }
@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,
.info-cell__icon img {
  width: 22px;
  height: 22px;
}
.info-cell__icon img {
  display: block;
  object-fit: contain;
}
.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; }

/* About «Що ми робимо і як» — WYSIWYG-текст правої колонки.
   Абзаци --ink-2, останній — акцентний (темніший, medium). */
.about-work__prose { margin-top: 18px; }
.about-work__prose > :first-child { margin-top: 0; }
.about-work__prose p {
  margin: 0 0 14px;
  color: var(--ink-2);
  line-height: 1.65;
}
.about-work__prose p:last-child {
  margin-bottom: 0;
  color: var(--ink);
  font-weight: 500;
}
.about-work__prose a { color: var(--accent, currentColor); text-decoration: underline; }
.about-work__prose strong, .about-work__prose b { font-weight: 600; color: var(--ink); }
.about-work__prose em, .about-work__prose i { font-style: italic; }
.about-work__prose ul,
.about-work__prose ol { margin: 0 0 14px; padding-left: 1.2em; color: var(--ink-2); }
.about-work__prose li { margin: 0 0 6px; }
.about-work__prose h3,
.about-work__prose h4 { margin: 18px 0 8px; color: var(--ink); }
.about-work__note {
  margin: 18px 0 0;
  color: var(--ink-2);
  font-size: 14.5px;
}

/* 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; }
.form-panel .hidden-fields-container {
  border: 0;
  margin: 0;
  padding: 0;
}
/* 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; }

.contacts-section-head {
  margin-bottom: clamp(32px,4vw,44px);
  max-width: 560px;
}
.contacts-link-strong {
  color: var(--ink);
  font-weight: 600;
}
.contacts-request-grid {
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.contacts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contacts-list li p {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 4px;
  font-weight: 500;
}
.contacts-list li a {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.contacts-socials {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.contacts-socials a {
  color: var(--ink-2);
  font-size: 15px;
}
.contacts-list__note {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.contacts-list__note span {
  display: block;
  font-size: 15px;
  color: var(--ink-2);
}
/* =========================================================================
   CF7 — ЄДИНИЙ ВИГЛЯД УСІХ ФОРМ. Стилі навішані глобально на контейнер
   `.wpcf7`, який CF7 додає до БУДЬ-ЯКОЇ форми автоматично. Тому нова форма,
   вставлена лише шорткодом, одразу отримує рівні відступи, коректний чекбокс
   і кнопку — без класів-обгорток у шаблоні.
   Специфіка окремих сторінок лишається на своїх класах (.contacts-cf7__*).
   ========================================================================= */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: none;
}
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
}
/* intl-tel-input: контейнер на всю ширину, щоб поле телефону не звужувалось */
.wpcf7 .iti {
  display: block;
  width: 100%;
}
.wpcf7 .iti .form-field {
  width: 100%;
}
/* Приховані службові поля (hidden/flamingo) не займають місця у flex-колонці */
.wpcf7 .is-hidden,
.wpcf7 .field.is-hidden {
  display: none;
}
.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 12.5px;
}
.wpcf7 form .wpcf7-response-output,
.wpcf7 .wpcf7-response-output {
  margin: 4px 0 0 !important;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
}
/* Чекбокс-згода: CF7 обгортає [acceptance] у .wpcf7-list-item > label.
   Вирівнюємо чекбокс і текст в один ряд, прибираємо зайвий відступ обгортки. */
.wpcf7 .form-check .wpcf7-list-item {
  margin: 0;
}
.wpcf7 .form-check label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
}
/* Кнопка сабміту — на всю ширину форми (єдиний вигляд для всіх форм) */
.wpcf7 .form > .btn,
.wpcf7 .wpcf7-submit {
  width: 100%;
  justify-content: center;
}
/* Спінер CF7 (додається JS після кнопки) НЕ повинен займати місце й лишати
   порожній пробіл. Позиціонуємо його абсолютом поверх кнопки, праворуч.
   Батько — обгортка сабміту (.form-actions або <p> із кнопкою). */
.wpcf7 .form-actions,
.wpcf7 p:has(> .wpcf7-submit) {
  position: relative;
}
.wpcf7 .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 18px;
  margin: 0;
  transform: translateY(-50%);
  pointer-events: none;
}
.contacts-cf7__secure {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin: -2px 0 0;
  line-height: 1.45;
}
/* Іконка-замок перед secure-текстом — через ::before (SVG у content),
   щоб не чіпати саму CF7-форму в БД. */
.contacts-cf7__secure::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004D33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.contacts-privacy-note {
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 14px 0 0;
  line-height: 1.45;
}
.contacts-privacy-note a {
  color: var(--yaliv);
  text-decoration: underline;
}
/* «або напишіть у Telegram» під кнопкою форми — центровано */
.contacts-cf7__telegram {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
}
.contacts-cf7__telegram a {
  color: var(--yaliv);
  text-decoration: underline;
  font-weight: 600;
}
.contacts-formats .checklist b {
  color: var(--ink);
  font-weight: 600;
}
.contacts-map {
  aspect-ratio: 16 / 10;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px,2.5vw,36px);
}
.contacts-map img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== 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); }
@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) {
  div.page:not([data-page="home"]) .btn--primary:hover,
  div.page:not([data-page="home"]) .btn--white:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0,77,51,0.4); }
  div.page:not([data-page="home"]) .btn svg { transition: transform 0.3s var(--ease-calm); }
  div.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) */
div.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) {
  div.page:not([data-page="home"]) .service-card:is([data-go], :has(a)):hover,
  div.page:not([data-page="home"]) .soft-card:is([data-go], :has(a)):hover,
  div.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 */
div.page:not([data-page="home"]) .cta-dark,
div.page:not([data-page="home"]) .bg-yaliv { position: relative; overflow: hidden; }
div.page:not([data-page="home"]) .cta-dark::before,
div.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;
}
div.page:not([data-page="home"]) .cta-dark > *,
div.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; }

/* Формати заходів (архів подій): info-cell на білій картці за версткою
   (.evt-format). Клас додається поруч із .info-cell — розмітка не міняється,
   іконка/заголовок/текст лишаються .info-cell__*. */
.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); }
}

/* 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; }

/* Cooperation page */
.cooperation-head {
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 640px;
}
.cooperation-head__text,
.tenders-head__text {
  margin-bottom: 0;
}
.tenders-head {
  margin-bottom: 28px;
}
.tenders-filterbar {
  margin-bottom: clamp(24px, 3vw, 32px);
}

/* Parents materials page */
.parents-handbook {
  align-items: center;
}
.parents-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.parents-handbook__media {
  aspect-ratio: 3 / 4;
  max-width: 320px;
  margin: 0 auto;
}
.parents-section-head {
  margin-bottom: 32px;
}
.parents-blog-action {
  text-align: center;
  margin-top: clamp(32px, 4vw, 48px);
}
.parents-routes-head {
  margin-bottom: clamp(32px, 4vw, 44px);
  max-width: 640px;
}
.parents-routes-head .sec-sub {
  margin-bottom: 0;
}

/* Parents handbook page */
.handbook-value-title {
  max-width: 20ch;
}
.handbook-lead-text {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0;
}
.handbook-section-head {
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 560px;
}
.handbook-section-sub {
  margin-bottom: 0;
}
.handbook-context {
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.handbook-context__title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin: 0 0 12px;
  max-width: 20ch;
}
.handbook-context__text {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0;
  max-width: 48ch;
}
.handbook-form-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(24px, 2.5vw, 32px);
}
.handbook-form-head .sec-h {
  max-width: none;
}
.handbook-form-head .sec-sub {
  margin: 0 auto;
  max-width: 54ch;
}
.checklist.checklist--inline.handbook-form-checks {
  margin-bottom: clamp(44px, 5vw, 64px);
}
.handbook-sendpulse-panel {
  max-width: 760px;
  margin: 0 auto;
}
.handbook-form-note {
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
  margin: clamp(24px, 3vw, 32px) auto 0;
  max-width: 60ch;
}
.handbook-form-note a {
  color: var(--yaliv);
  font-weight: 600;
}
.sendpulse-handbook-embed .sp-force-hide {
  display: block;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-form-fields-wrapper {
  width: 100%;
  margin: 0;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-element-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-field {
  margin: 0;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-control-label {
  display: block;
  margin: 0 0 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-control-label strong {
  color: var(--lastov);
  margin-left: 3px;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-form-control {
  appearance: none;
  width: 100%;
  height: 48px;
  border: 1px solid oklch(20% 0.012 150 / 0.13);
  border-radius: var(--r-md);
  background: var(--polotno);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  padding: 0 14px;
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-form-control:hover {
  border-color: oklch(20% 0.012 150 / 0.26);
  background: oklch(97.4% 0.005 150);
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] select.sp-form-control {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-form-control::placeholder {
  color: oklch(38% 0.01 145 / 0.52);
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--polotno) inset;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-form-control:focus {
  outline: none;
  background: var(--white);
  border-color: var(--yaliv);
  box-shadow: 0 0 0 4px rgba(0,77,51,0.1);
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-field-error,
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-tip {
  display: block;
  margin-top: 6px;
  color: var(--lastov);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-form-control.sp-field-error,
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-form-control.error {
  border-color: var(--lastov);
  box-shadow: 0 0 0 3px oklch(55% 0.14 28 / 0.12);
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-message {
  grid-column: 1 / -1;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-checkbox-option,
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-button-container {
  grid-column: 1 / -1;
}
/* Грід-елемент — це .sp-field; поле з чекбоксом теж має бути на всю ширину
   (сам .sp-checkbox-option лежить усередині звичайного .sp-field). */
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-field:has(.sp-checkbox-option) {
  grid-column: 1 / -1;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-checkbox-option label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--yaliv);
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-button {
  min-height: 52px;
  width: 100%;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--yaliv);
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
/* Кнопка-контейнер на всю ширину (кнопка теж width:100%) */
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-button-container {
  display: block;
}
/* Чекбокс-згода: чекбокс + текст + зірочка* в один ряд, без переносу.
   Зірочка йде одразу за текстом (не вилітає праворуч). */
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-checkbox-option label {
  flex-wrap: nowrap;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-checkbox-option label > span:first-of-type {
  flex: 0 1 auto;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-checkbox-option label > span:last-of-type {
  flex: none;
  margin-left: -6px;
}
.sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-checkbox-option label strong {
  color: var(--lastov);
}
@media (hover: hover) and (pointer: fine) {
  .sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-button:hover {
    background: var(--yaliv-deep);
  }
}
@media (max-width: 680px) {
  .sendpulse-handbook-embed .sp-form[sp-id="248168"] .sp-element-container {
    grid-template-columns: 1fr;
  }
}

/* Document rows — downloadable reports / files */
.reports-head {
  margin-bottom: clamp(28px, 3vw, 40px);
}
.reports-head--narrow {
  max-width: 640px;
}
.reports-head__text {
  margin-bottom: 0;
}
.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; }
}

/* 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; }

/* ---------- Пошук (search.php) — список рядів, не грід ---------- */
/* Сторінка пошуку/архіву — власні відступи секції (перша секція main
   виключена із загального щедрого правила #14, тож задаємо явно). */
.section--search { padding: clamp(40px, 5vw, 72px) 0; }
.section--search .search-head { max-width: 720px; margin-bottom: clamp(28px, 3vw, 40px); }
/* Поле пошуку на сторінці пошуку */
.search-form {
  display: flex;
  gap: 10px;
  margin-top: clamp(18px, 2.4vw, 26px);
  max-width: 560px;
}
.search-form__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 15px;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.search-form__input:focus-visible {
  outline: 2px solid var(--yaliv);
  outline-offset: 2px;
  border-color: var(--yaliv);
}
.search-form__btn { flex: none; height: 48px; }
@media (max-width: 480px) {
  .search-form { flex-wrap: wrap; }
  .search-form__btn { width: 100%; }
}
.ajax-load__pagination .navigation.pagination,
.ajax-load__pagination .nav-links { margin: 0; }
.ajax-load__pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search-head__title em { font-style: normal; color: var(--yaliv); }
.search-head__count { margin-top: 10px; }
.search-list { list-style: none; margin: 0; padding: 0; }
/* Ряд пошуку: заголовок+опис зліва, тип запису справа. Спрощена версія
   .list-row (там 4-колонковий грід під звіти/події). */
.list-row--search {
  grid-template-columns: 1fr auto;
  align-items: start;
}
.list-row--search__body { min-width: 0; }
.list-row--search .list-row__title { margin: 0; font-size: 18px; }
.list-row--search__desc {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.list-row--search .list-row__meta { padding-top: 4px; }
.search-empty { text-align: center; padding: clamp(40px, 6vw, 80px) 0; }
.search-empty__actions { margin-top: 28px; }
@media (max-width: 560px) {
  .list-row--search { grid-template-columns: 1fr; }
  .list-row--search .list-row__meta { padding-top: 0; }
}

/* Поле «Які дні цікавлять?» (CF7 [confidence_event_days]) для одноденних
   заходів не рендериться — ховаємо порожню обгортку .field, щоб не було
   зайвого відступу. */
.field[data-event-days]:not(:has(select)) { display: none; }

/* ============================================================
   Team single specialist layout (from prototype specialist-*).
   Scoped to spec-* classes only; no global page-hero overrides.
   ============================================================ */
.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;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  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;
  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;
}
.spec-hero {
  padding-bottom: clamp(64px, 7vw, 96px);
}
body.single-team main#main > section.bg-white.spec-hero:first-of-type {
  padding-bottom: clamp(28px, 3vw, 44px);
}
.spec-hero + section,
.spec-bio,
.spec-topics,
.spec-peers {
  position: relative;
}
.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;
}
.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;
}
.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,
  .spec-topics {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .spec-bio__body p,
  .spec-head__lead {
    font-size: 15.5px;
  }
  .spec-topics__list {
    columns: 1;
  }
  .sec-head--row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Services wizard filter */
.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; }
}

.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;
}
.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--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); }
.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; }
.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; }
}
.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);
}
.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; }
}

/* Default rich-text lists: applied only to unclassed content lists, not component UI. */
main :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ul:not([class]),
main :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ol:not([class]) {
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
main :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ul:not([class]) li,
main :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ol:not([class]) li {
  position: relative;
  min-height: 24px;
  padding-left: 34px;
  font-size: inherit;
  line-height: 1.55;
  color: inherit;
}
main :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0,77,51,0.10);
}
main :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ul:not([class]) li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(0.18em + 4px);
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--yaliv);
  border-bottom: 2px solid var(--yaliv);
  transform: rotate(45deg);
}
main :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ol:not([class]) {
  counter-reset: richstep;
}
main :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ol:not([class]) li::before {
  counter-increment: richstep;
  content: counter(richstep);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--yaliv);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bg-yaliv :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ul:not([class]) li::before {
  background: rgba(255,255,255,0.16);
}
.bg-yaliv :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ul:not([class]) li::after {
  border-color: var(--ranok);
}
.bg-yaliv :where(.prose, .text-block, .rich-text, .wysiwyg, .article-body, .event-content, .program-content, .project-content, .head-feature__body, .soft-card, .info-cell) ol:not([class]) li::before {
  background: var(--white);
  color: var(--yaliv);
}