/* KOMS: спільна основа для всіх мокапів.
   Кольори зняті з лого й карток послуг:
   беж #F5EDD8 (фон лого), зелений #70A046 (листок), синьо-сірий #27383F (контур),
   оливковий #3E5924 (стрічки на картках послуг).
   Зелений #70A046 на бежі дає лише ~2.9:1, тому для тексту й кнопок
   береться оливковий, а яскравий зелений лишається декором. */

:root {
  --beige: #F5EDD8;
  --paper: #FBF7EC;
  --sand: #EADFC3;
  --ink: #27383F;
  --leaf: #70A046;
  --olive: #3E5924;
  --warn: #B4531A;

  --bg: var(--beige);
  --surface: var(--paper);
  --surface-2: var(--sand);
  --text: var(--ink);
  --muted: #4B5B61;          /* 6.3:1 на бежі */
  --line: rgba(39, 56, 63, .16);
  --accent: var(--olive);    /* кнопки й акцентний текст */
  --on-accent: #FBF7EC;
  --accent-text: var(--olive);
  --shadow: 0 1px 2px rgba(39,56,63,.06), 0 12px 32px -12px rgba(39,56,63,.18);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #18252A;
    --surface: #1F2F35;
    --surface-2: #273A41;
    --text: #F2EAD6;
    --muted: #C3BCA8;
    --line: rgba(242, 234, 214, .14);
    --accent: #8DBE5E;
    --on-accent: #16220E;
    --accent-text: #A6D07A;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #18252A;
  --surface: #1F2F35;
  --surface-2: #273A41;
  --text: #F2EAD6;
  --muted: #C3BCA8;
  --line: rgba(242, 234, 214, .14);
  --accent: #8DBE5E;
  --on-accent: #16220E;
  --accent-text: #A6D07A;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--beige); padding: 12px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* Поява при прокрутці: JS ставить .in, коли блок у полі зору. Без JS
   (або при reduced motion) усе видно одразу. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Заглушка для фото команди: поки немає справжніх. */
.photo-ph {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--surface) 10px 20px);
  color: var(--muted); font-size: 13px; line-height: 1.35; padding: 12px;
}
.photo-ph img { width: 44%; opacity: .55; margin: 0 auto 8px; }

/* Мітка «мокап»: щоб ніхто не прийняв заглушку за справжній контакт. */
.todo { background: #FFE9A8; color: #3A2A00; border-radius: 4px; padding: 0 4px; font-size: .85em; }