/* ==========================================================================
   ecomkit theme — single stylesheet, no build step.
   Layers: fonts → tokens → base → chrome (header/footer) → .ek components
   (class names kept compatible with deployed landing pages) → prose system
   (.ek-prose / .gh-content) → listings, article, utilities.
   ========================================================================== */

/* ---------- fonts (Fixel, SIL OFL — MacPaw) ---------- */
@font-face {
  font-family: "Fixel Text";
  src: url("../fonts/FixelText-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Ваги 500 тут навмисно немає. Nav, .ek-price і кнопки — це верхній екран, але
   Medium і SemiBold не були в preload: обидва знаходились лише після парсингу
   screen.css і приїжджали ~700ms, уже після першого пейнту. Preload на всі
   п’ять — це +56KB у критичному шляху, тому лишились 400/600/700/800 і preload
   на три з них. font-weight: 500 у CSS падає на Regular за правилами CSS font
   matching (для 500 браузер бере 400 раніше, ніж 600) — навмисно, різниця видна
   лише в посиланнях меню. Файл FixelText-Medium.woff2 видалено разом із
   генератором постів Instagram — єдиним, що його читав. */
@font-face {
  font-family: "Fixel Text";
  src: url("../fonts/FixelText-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fixel Display";
  src: url("../fonts/FixelDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fixel Display";
  src: url("../fonts/FixelDisplay-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
html {
  /* The header is sticky and 71px tall, so without this every in-page anchor buries its
     own heading underneath it — and so does every element Tab scrolls into view. One
     declaration fixes both. */
  scroll-padding-top: 88px;
}

:root {
  --ink: #14110F;
  --ink-soft: #3B342E;
  --muted: #6B635C;
  --accent: #E4572E;
  --accent-deep: #B23A17;
  --accent-dark: #93300F;
  --paper: #FDFBF7;
  --surface: #F5F0E9;
  --card: #FFFFFF;
  --line: #E7DED3;
  --radius: 16px;
  --radius-sm: 10px;
  --measure: 68ch;
  --wrap: 1120px;
  --narrow: 740px;
  --pad: clamp(20px, 5vw, 44px);
  --font-display: "Fixel Display", "Fixel Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "Fixel Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 720px) { body { font-size: 18px; } }
img { max-width: 100%; height: auto; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}
/* The 32px floor is measured, not a round number: it only binds below a 640px viewport,
   and it is the largest size at which «Інтернет-магазини,» / «Интернет-магазины,» — the
   longest compound word any hero headline starts with — still fits one line on a 360px
   phone. At the previous 34px it broke at its own hyphen and text-wrap:balance then made
   the Russian headline six lines instead of four. Above 640px this changes nothing (5vw
   is already larger). */
h1 { font-weight: 800; font-size: clamp(32px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: clamp(25px, 3.2vw, 36px); line-height: 1.15; }
h3 { font-size: clamp(19px, 2vw, 22px); line-height: 1.3; }

::selection { background: rgba(228, 87, 46, .22); }

/* A link standing on its own in a stack or a contact list is a control, not a word inside a
   sentence, so it needs a real tap area — these measured 19-20px tall against the 24px
   minimum. Inline links inside paragraphs are deliberately untouched: WCAG 2.5.8 exempts
   them, and padding there would break the line box. */
.ek-wrap > a:not(.ek-btn), .ek-narrow > a:not(.ek-btn),
.ek-stack > a:not(.ek-btn), .ek-stack-lg > a:not(.ek-btn),
.ek-contacts a,
.ek-narrow p > a:only-child, .ek-wrap p > a:only-child,
/* "Читати: <link>" and "Contact: <link>" — a short bold label and then the link, which is
   the whole line. WCAG's inline exception does not cover it: nothing constrains it but its
   own line-height, and it measured 19px. Every link after the label is padded, not just a
   lone one, so a line carrying two of them keeps a single rhythm. */
.ek-narrow p > strong:first-child ~ a, .ek-wrap p > strong:first-child ~ a,
.ek-narrow li > strong:first-child ~ a, .ek-wrap li > strong:first-child ~ a {
  display: inline-block; padding: 6px 0;
}

/* ---------- focus ---------- */
/* Chrome's default ring passes contrast (5.61:1 here) but is 1px, off-brand, and Safari
   draws nothing at all on links unless Full Keyboard Access is on. So state it ourselves.
   :focus-visible only, so a mouse click never shows a ring. */
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible {
  /* Ink, not accent: .ek-btn is filled with --accent-deep, so an accent ring measured
     1.00:1 against the very button it was outlining. Ink holds 16.5:1 on the cream page
     and 3.14:1 on the orange fill. */
  outline: 2.5px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Both the dark section and the footer are painted --ink, where an ink ring measures
   1.00:1 against its own backdrop. Light ring on dark ground. */
.ek-sec--ink :where(a, button, summary, [tabindex]):focus-visible,
.ek-footer :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--paper); }
.ek-sec--ink .ek-btn:focus-visible,
.ek-footer .ek-btn:focus-visible { outline-color: var(--paper); }
.ek-btn:focus-visible { outline-offset: 3px; }
.ek-tablewrap:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }

/* ---------- skip link ---------- */
/* Не display:none і не clip: посилання має лишатись у порядку Tab, просто поза
   екраном, і виїжджати на фокусі. z-index вище за липкий хедер (50). */
.ek-skip {
  position: fixed; top: 10px; left: -9999px; z-index: 100;
  padding: 11px 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 15px;
}
.ek-skip:focus { left: 10px; }

/* ---------- header ---------- */
.ek-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 251, 247, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* min-height pins the row so no future long label can grow the sticky header. It is a
   guarantee rather than a fix — .ek-nav__cta's flex:none below is what stopped the header
   being 85px in uk and ru against 71px in en — and it is what keeps the 88px in
   `scroll-padding-top` (see the comment on html, above) honest. 43px is the tallest item
   in the row (the 34px brand glyph and the 38px CTA pill both fit). */
.ek-header__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--pad);
  min-height: 43px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.ek-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.ek-brand:hover { color: var(--ink); }
.ek-brand__glyph { flex: none; display: block; }
.ek-brand__name {
  font-family: var(--font-display);
  font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1;
}
.ek-nav { display: flex; align-items: center; gap: 18px; }
.ek-nav__list {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
/* nowrap обовʼязковий: без нього довгий пункт ламається на два рядки
   всередині себе, і шапка стає вдвічі вищою замість того, щоб просто
   не вміститись. Краще керований бургер, ніж «Про мене» у два рядки. */
.ek-nav__list a {
  display: inline-block; padding: 8px 10px; border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap;
}
.ek-nav__list a:hover { background: var(--surface); color: var(--ink); }
.ek-nav__list a[aria-current="page"] { color: var(--accent-deep); font-weight: 600; }
.ek-navtoggle { display: none; }

/* The pill is the widest shrinkable item in the row, so a row that does not fit was
   resolved by breaking «Безкоштовний аудит» / «Бесплатный аудит» at the space — 38px of
   button became 56px, the sticky header grew 14px, and every page below it sat lower in
   uk and ru than in en. A one-language site never showed it, because "Free audit" is
   short enough never to be picked for shrinking. The row is allowed to stop fitting; it
   is not allowed to change height, so the burger below is the answer, not a second line. */
.ek-nav__cta { flex: none; white-space: nowrap; }

/* Бейдж на пункті меню («FREE» біля «Інструменти»): менший за карткові
   .ek-badge, бо сидить усередині рядка навігації поруч із текстом, не в
   картці. */
.ek-nav__badge {
  margin-inline-start: 6px; padding: 1px 7px; font-size: 10.5px;
  vertical-align: 2px;
}

/* What the desktop header asks for — measured in the browser, not estimated. Re-measured
   on 08.09.2026 after the language switcher moved out of this row into the footer and the
   CTA stopped shrinking: brand 131px + 20px gap + nav children + 88px of --pad comes to
   uk 1029px, ru 1002px, en 912px. The worst locale is uk, so 1100px leaves ~70px of slack;
   1024px would break it by 5px, which is why the next rung down is not available.
   ADDING A TOP-LEVEL NAV ITEM, OR A LOCALE WITH A LONGER CTA LABEL — re-measure by hand
   (narrow the window until the row stops fitting) and raise this number. Nothing in the
   row wraps any more, so the symptom is a horizontal overflow, not a taller header. */
@media (max-width: 1100px) {
  .ek-navtoggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 10px;
    background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  }
  .ek-navtoggle__bar { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
  .ek-nav-open .ek-navtoggle__bar:first-child { transform: translateY(3.5px) rotate(45deg); }
  .ek-nav-open .ek-navtoggle__bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .ek-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 10px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 10px var(--pad) 22px;
    box-shadow: 0 24px 40px -24px rgba(20, 17, 15, .25);
  }
  .ek-nav-open .ek-nav { display: flex; }
  .ek-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .ek-nav__list a { display: block; padding: 12px 14px; font-size: 17px; border-radius: 12px; }
  .ek-nav__cta { justify-content: center; }
}

/* ---------- footer ---------- */
.ek-footer { background: var(--ink); color: #CFC7BE; margin-top: 0; }
.ek-footer a { color: var(--paper); }
.ek-footer a:hover { color: #FFB99E; }
.ek-footer__in {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(48px, 7vw, 72px) var(--pad) 36px;
  display: grid; gap: 40px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 760px) { .ek-footer__in { grid-template-columns: 1fr; gap: 32px; } }
.ek-brand--footer .ek-brand__name { color: var(--paper); }
.ek-footer__tagline { margin: 14px 0 0; font-size: 16px; line-height: 1.6; max-width: 42ch; }
.ek-footer__label {
  margin: 0 0 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: #8D847B;
}
.ek-footer__nav ul, .ek-footer__contacts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* Were 17px tall — under the 24px WCAG 2.5.8 minimum and far under 44pt. inline-block plus
   vertical padding takes them to 40px without moving the layout. */
.ek-footer__nav a, .ek-footer__contacts a {
  font-size: 16px; display: inline-block; padding: 9px 0; line-height: 1.35;
}
.ek-footer__base {
  max-width: var(--wrap); margin-inline: auto;
  padding: 20px var(--pad) 28px;
  border-top: 1px solid rgba(253, 251, 247, .12);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 14px;
}
.ek-footer__base p { margin: 0; }
/* The language switcher joins the copyright on the left rather than becoming a third
   space-between child, which would centre it. */
.ek-footer__base-l { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; }
.ek-footer__top { white-space: nowrap; }

/* ---------- layout utilities (kept compatible with deployed pages) ---------- */
.ek { color: var(--ink); }
.ek-site-main { min-height: 55vh; }
.ek-sec { padding: clamp(52px, 8vw, 100px) var(--pad); }
.ek-sec--tint { background: var(--surface); }
.ek-sec--ink {
  background: var(--ink); color: var(--paper);
  /* --muted is #6B635C, which is only 3.19:1 on this background — below the 4.5:1 that
     WCAG 1.4.3 asks for body text. Re-point the token for the whole dark section rather
     than chasing every element that inherits it. #A69C93 measures 6.98:1. */
  --muted: #A69C93;
}
.ek-wrap { max-width: var(--wrap); margin-inline: auto; }
.ek-narrow { max-width: var(--narrow); margin-inline: auto; }
.ek-sec-head { max-width: var(--narrow); }

.ek p { margin: 0; max-width: var(--measure); }
.ek a:not(.ek-btn) { color: var(--accent-deep); border-bottom: 1px solid rgba(178, 58, 23, .3); }
.ek a:not(.ek-btn):hover { border-bottom-color: var(--accent-deep); color: var(--accent-dark); }
.ek-sec--ink a:not(.ek-btn) { color: #FFB99E; border-bottom-color: rgba(255, 185, 158, .35); }

.ek-lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); line-height: 1.6; }
.ek-sec--ink .ek-lead { color: #C9C1B9; }
.ek-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 14px;
}
.ek-sec--ink .ek-eyebrow { color: #FF9A72; }

.ek-stack > * + * { margin-top: 18px; }
.ek-stack-lg > * + * { margin-top: 38px; }
.ek-stack > .ek-eyebrow + *, .ek-stack-lg > .ek-eyebrow + * { margin-top: 0; }

/* ---------- buttons ---------- */
.ek-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px; border: 0;
  font-family: var(--font-text); font-weight: 600; font-size: 16px; line-height: 1.2;
  background: var(--accent-deep); color: #fff !important;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.ek-btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
.ek-btn--sm { padding: 10px 20px; font-size: 15px; }
.ek-btn--ghost {
  background: transparent; color: var(--ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.ek-btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.ek-sec--ink .ek-btn--ghost { color: var(--paper) !important; box-shadow: inset 0 0 0 1.5px rgba(253, 251, 247, .3); }
.ek-sec--ink .ek-btn--ghost:hover { background: rgba(253, 251, 247, .1); }
.ek-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ek-note { font-size: 16px; color: var(--muted); }
.ek-sec--ink .ek-note { color: #A69C93; }

/* ---------- hero ---------- */
.ek-hero { padding-top: clamp(44px, 7vw, 88px); }
/* 18ch and 60ch are measured, not chosen for looks: at the previous 17ch/54ch the Russian
   headline broke to four lines against three in uk and en, and its lead to five against
   four, which put everything below the hero ~92px lower in ru than in uk. These two widths
   are where all three locales agree, uk unchanged at 3 and 4 lines. Editing hero copy can
   undo it, and nothing can check that without a browser — re-measure by hand. What IS
   checked is the wiring below: scripts/selfcheck.mjs fails the build if a body.page-<key>
   selector here stops matching a page that was built. */
.ek-hero h1 { max-width: 18ch; }
.ek-hero .ek-lead { max-width: 60ch; font-size: clamp(18px, 2.2vw, 21px); }
/* Reserved headline and lead boxes, so the fold sits at the same height in every
   language. The same sentence needs one line more in Ukrainian and Russian than in
   English — Cyrillic words are simply longer — which put the CTA row, and everything
   under it, up to 92px higher on the English pages. The alternative was padding seven
   English headlines with filler to match a pixel count; reserving the box costs the
   shorter language one line of white space instead and leaves the copy alone.
   The numbers are the Ukrainian line count at >=834px, measured. `lh` is one line box, so
   a reservation can only ever add space: a locale that needs MORE lines than reserved
   overflows it normally, and a browser without `lh` drops the declaration and gets
   today's behaviour. body.page-<key> is locale-invariant (see bodyClassFor in
   src/lib/data.mjs), so one rule covers all three locales of a page.
   EDITING A HERO HEADLINE OR LEAD — re-measure that page's line count and update it here,
   or the reservation silently stops matching. */
body.page-audyt .ek-hero h1 { min-height: 3lh; }
body.page-audyt .ek-hero .ek-lead { min-height: 3lh; }
body.page-audyt-pryklad .ek-hero h1 { min-height: 4lh; }
body.page-audyt-pryklad .ek-hero .ek-lead { min-height: 3lh; }
body.page-audyt-pryklad-povnyi .ek-hero h1 { min-height: 4lh; }
body.page-audyt-pryklad-povnyi .ek-hero .ek-lead { min-height: 3lh; }
body.page-dyakuyu .ek-hero h1 { min-height: 2lh; }
/* The paragraph under the lead, not a lead itself: same sentence, one line in English and
   two in Ukrainian and Russian. Positional selector because that paragraph carries no
   class — if the block order on this page changes, move this rule with it. */
body.page-dyakuyu .ek-hero .ek-lead + p { min-height: 2lh; }
body.page-pro-mene .ek-hero .ek-lead { min-height: 4lh; }
body.page-instrumenty .ek-hero h1 { min-height: 2lh; }
body.page-instrumenty .ek-hero .ek-lead { min-height: 5lh; }
body.page-pryvatnist-instrumenty .ek-hero h1 { min-height: 2lh; }
body.page-pryvatnist-instrumenty .ek-hero .ek-lead { min-height: 5lh; }
body.page-start .ek-hero h1 { min-height: 2lh; }
/* The listings, whose h1 comes from `listings` in content/i18n/<locale>.mjs rather than a
   content file. Here Ukrainian is the SHORT one — «Що це дає на практиці» is one line
   where both translations need two — so the reservation goes the other way. */
body.cases-template .ek-listing-hero h1 { min-height: 2lh; }

.ek-listing-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.ek-listing-hero h1 { max-width: 20ch; }
.ek-listing-hero .ek-lead { max-width: 60ch; }

/* ---------- proof strip ---------- */
.ek-strip { border-block: 1px solid var(--line); padding: 28px var(--pad); background: var(--paper); }
.ek-strip-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; font-weight: 600; }
.ek-logos { display: flex; flex-wrap: wrap; gap: 12px 36px; align-items: center; list-style: none; padding: 0; margin: 0; }
.ek-logos li { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.9vw, 19px); letter-spacing: -.02em; color: #4A423B; }

/* ---------- cards ---------- */
/* 260px tracks meant two columns already at 768px, which squeezed body copy down to ~33
   characters a line. 330px holds one column through tablet portrait and splits from ~840px,
   where the line has room to reach a readable 45-90. */
.ek-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.ek-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ek-card:hover { border-color: #D5C9BA; box-shadow: 0 14px 34px -22px rgba(20, 17, 15, .25); }
.ek-sec--tint .ek-card { background: #fff; }
.ek-card h3 { margin: 0; }
.ek-card p { font-size: 16px; color: var(--muted); line-height: 1.6; }
.ek-card ul { margin: 0; padding-left: 18px; font-size: 16px; color: var(--muted); line-height: 1.6; }
.ek-card ul li + li { margin-top: 7px; }
.ek-price { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); font-weight: 600; font-size: 17px; color: var(--ink); }
.ek-price span { font-weight: 400; color: var(--muted); font-size: 14px; }

/* ---------- numbered steps ---------- */
.ek-steps { counter-reset: s; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
.ek-steps li { counter-increment: s; padding-top: 18px; border-top: 2px solid var(--accent); }
.ek-steps li::before {
  content: "0" counter(s);
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--accent-deep); margin-bottom: 8px; letter-spacing: .06em;
}
.ek-steps strong { display: block; margin-bottom: 6px; font-size: 16.5px; font-weight: 600; }
.ek-steps span { font-size: 16px; color: var(--muted); line-height: 1.6; display: block; }

/* ---------- stats ---------- */
.ek-stats { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.ek-stat b {
  display: block; font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
}
.ek-stat span { display: block; margin-top: 9px; font-size: 16px; color: var(--muted); line-height: 1.55; }
.ek-sec--ink .ek-stat span { color: #A69C93; }

/* ---------- case teaser rows ---------- */
.ek-case {
  display: grid; gap: 8px 28px; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.ek-case:last-child { border-bottom: 1px solid var(--line); }
.ek-case h3 { grid-column: 1; }
.ek-case p { grid-column: 1; font-size: 16px; color: var(--muted); line-height: 1.6; }
.ek-case .ek-case-link { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; font-weight: 600; }
@media (max-width: 640px) {
  .ek-case { grid-template-columns: 1fr; }
  .ek-case .ek-case-link { grid-column: 1; grid-row: auto; }
}

/* ---------- tables ---------- */
.ek-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
/* min-width lives on wrapped tables only. On a bare table it forced 560px and dragged the
   whole page sideways at 320-430px; main.js now wraps Ghost-content tables in .ek-tablewrap,
   and without JS they simply squeeze instead of breaking the page. */
.ek table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.55; }
.ek-tablewrap table { min-width: 560px; }
.ek th, .ek td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ek tr:last-child td { border-bottom: 0; }
.ek th { font-weight: 600; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
.ek td strong { font-weight: 600; }
.ek-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.ek-badge--hi { background: #FDE6DE; color: var(--accent-dark); }
.ek-badge--mid { background: #FBF0D9; color: #7A5A12; }
.ek-badge--lo { background: #E9EDE8; color: #4B5A48; }

/* ---------- FAQ ---------- */
.ek-faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.ek-faq summary {
  cursor: pointer; font-weight: 600; font-size: 17px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  min-height: 44px; align-content: center; padding: 6px 0;
}
.ek-faq summary::-webkit-details-marker { display: none; }
.ek-faq summary::after { content: "+"; font-weight: 400; font-size: 24px; line-height: 1; color: var(--accent-deep); flex: none; }
.ek-faq details[open] summary::after { content: "\2013"; }
.ek-faq p { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.65; }

/* ---------- callout ---------- */
.ek-callout {
  background: var(--surface); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 22px 26px;
}
.ek-callout p { font-size: 16px; line-height: 1.65; }
.ek-callout p + p { margin-top: 10px; }

/* ---------- form embed ---------- */
.ek-embed { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.ek-embed iframe { width: 100%; border: 0; display: block; }

/* ---------- hostcheck widget ---------- */
/* The site's first native form control — every other CTA is a Tally iframe embed
   (.ek-embed above), styled entirely by Tally itself. This is a plain <input>/<select>,
   so it needs its own focus/border treatment; nothing else in the file to reuse. */
.ek-hostcheck {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px); margin-top: 28px; max-width: 560px;
}
.ek-hostcheck__form { display: grid; gap: 14px; }
.ek-hostcheck__field { display: grid; gap: 6px; }
.ek-hostcheck__field label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.ek-hostcheck__field input, .ek-hostcheck__field select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
}
.ek-hostcheck__field input:focus-visible, .ek-hostcheck__field select:focus-visible {
  outline: 2px solid var(--accent-deep); outline-offset: 1px;
}
.ek-hostcheck__submit { margin-top: 4px; width: 100%; text-align: center; border: 0; cursor: pointer; }
.ek-hostcheck__submit:disabled { opacity: .6; cursor: default; }

.ek-hostcheck__result { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.ek-hostcheck__result[hidden] { display: none; }
/* Three verdict states, same traffic-light the plan's copy uses everywhere else —
   never a bare pass/fail, always a level or a named reason. */
.ek-hostcheck__result--loading { color: var(--muted); font-size: 15px; }
.ek-hostcheck__result--red { border-top-color: #E4572E; }
.ek-hostcheck__result--red .ek-hostcheck__headline { color: var(--accent-deep); }
.ek-hostcheck__result--amber .ek-hostcheck__headline { color: #9A6A00; }
.ek-hostcheck__result--green .ek-hostcheck__headline { color: #1E7A3D; }
.ek-hostcheck__result--error .ek-hostcheck__headline { color: var(--muted); }
.ek-hostcheck__headline { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.ek-hostcheck__body { font-size: 15px; color: var(--muted); line-height: 1.6; }
.ek-hostcheck__result .ek-btn { margin-top: 14px; display: inline-block; }

/* ---------- contacts ---------- */
.ek-contacts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ek-contacts a { font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; }

/* ==========================================================================
   PROSE — the readability system. Applied to long-form landing content
   (.ek-prose) and native Ghost post content (.gh-content).
   ========================================================================== */
.ek-prose, .gh-content { font-size: 17px; line-height: 1.75; }
@media (min-width: 720px) { .ek-prose, .gh-content { font-size: 18px; } }

.ek-prose > *, .gh-content > * { margin-top: 0; margin-bottom: 1.15em; }
.ek-prose > :first-child, .gh-content > :first-child { margin-top: 0; }
.ek-prose > :last-child, .gh-content > :last-child { margin-bottom: 0; }

.ek-prose p, .gh-content p { max-width: var(--measure); margin: 0 0 1.15em; }

.ek-prose h2, .gh-content h2 {
  max-width: none;
  margin: 2.4em 0 .7em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
}
.ek-prose > h2:first-child, .gh-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ek-prose h3, .gh-content h3 { margin: 1.9em 0 .55em; }
.ek-prose h2 + h3, .gh-content h2 + h3 { margin-top: 1em; }

.ek-prose ul, .ek-prose ol, .gh-content ul, .gh-content ol {
  margin: 0 0 1.15em; padding-left: 26px; max-width: var(--measure);
}
.ek-prose li, .gh-content li { margin-bottom: .45em; }
.ek-prose li:last-child, .gh-content li:last-child { margin-bottom: 0; }

.ek-prose .ek-tablewrap, .ek-prose table { margin-bottom: 1.4em; }
.ek-prose .ek-tablewrap table { margin-bottom: 0; }
.ek-prose .ek-callout { margin: 1.6em 0; }
.ek-prose .ek-btns { margin-top: 1.4em; }

.ek-prose code, .gh-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em; background: var(--surface);
  padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line);
}
.ek-prose pre, .gh-content pre {
  background: var(--ink); color: var(--paper);
  padding: 20px 24px; border-radius: var(--radius-sm);
  overflow-x: auto; font-size: 14.5px; line-height: 1.6;
  margin: 0 0 1.4em;
}
.ek-prose pre code, .gh-content pre code { background: none; border: 0; padding: 0; color: inherit; }

.ek-prose blockquote, .gh-content blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft); font-size: 1.02em;
}
.ek-prose hr, .gh-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.ek-prose img, .gh-content img { border-radius: var(--radius-sm); }

/* native Ghost post content: tables & cards */
.gh-content table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.55; margin: 0 0 1.4em; }
.ek-tablewrap { margin: 0 0 1.4em; }
.gh-content table th, .gh-content table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.gh-content table th { font-weight: 600; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
.gh-content .kg-card { margin: 1.6em 0; }
/* Підстраховка під card_assets: false (theme/ecomkit/package.json): Ghost більше
   не підключає /public/cards.min.css, бо жоден пост карток Koenig не використовує —
   усе заливається як HTML. Але Сергій редагує пости руками в адмінці, і найімовірніша
   майбутня вставка — картинка з підписом. Ці три правила лишають її пристойною:
   без них figure бере дефолт браузера, а figcaption виглядає як звичайний абзац. */
.gh-content figure.kg-card img { display: block; width: 100%; border-radius: 10px; }
.gh-content figure.kg-card figcaption {
  margin-top: 10px; font-size: 15px; line-height: 1.5;
  color: var(--muted); text-align: center;
}
.gh-content .kg-callout-card { border-radius: var(--radius-sm); }
.gh-content .kg-callout-card-grey { background: var(--surface); }
.gh-content .kg-button-card .kg-btn { border-radius: 999px; font-weight: 600; }

/* Koenig width variants */
.gh-content .kg-width-wide { position: relative; width: min(1120px, calc(100vw - 2 * var(--pad))); margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full { position: relative; width: calc(100vw - 2 * var(--pad)); margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full img { border-radius: var(--radius-sm); }

/* Koenig gallery */
.kg-gallery-container { display: flex; flex-direction: column; max-width: 1120px; width: 100%; }
.kg-gallery-row { display: flex; flex-direction: row; justify-content: center; }
.kg-gallery-image img { display: block; margin: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.kg-gallery-row:not(:first-of-type) { margin: 4px 0 0; }
.kg-gallery-image:not(:first-of-type) { margin: 0 0 0 4px; }

/* Koenig bookmark */
.kg-bookmark-card { width: 100%; }
.kg-bookmark-container {
  display: flex; min-height: 148px; color: var(--ink) !important; text-decoration: none;
  border: 1px solid var(--line) !important; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--card);
}
.kg-bookmark-container:hover { border-color: #D5C9BA !important; }
.kg-bookmark-content { display: flex; flex-direction: column; flex-grow: 1; padding: 20px; }
.kg-bookmark-title { font-weight: 600; font-size: 16px; line-height: 1.4; }
.kg-bookmark-description {
  margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--muted);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kg-bookmark-metadata { display: flex; align-items: center; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: var(--muted); }
.kg-bookmark-icon { width: 18px; height: 18px; margin-right: 8px; }
.kg-bookmark-author { display: inline; }
.kg-bookmark-publisher { display: inline; }
.kg-bookmark-publisher::before { content: "·"; margin: 0 6px; }
.kg-bookmark-thumbnail { position: relative; flex-grow: 1; min-width: 33%; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; border-radius: 0; }

/* CTA card appended to posts */
.ek-cta {
  margin: 3em 0 .5em; padding: 30px 32px; border-radius: var(--radius);
  background: var(--surface); border-left: 3px solid var(--accent);
}
.ek-cta h3 { margin: 0 0 10px; font-size: 22px; }
.ek-cta p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 56ch; }
.ek-cta a.b {
  display: inline-flex; padding: 13px 22px; border-radius: 999px; background: var(--accent-deep);
  color: #fff !important; font-weight: 600; font-size: 15.5px; text-decoration: none; border-bottom: 0;
}
.ek-cta a.b:hover { background: var(--accent-dark); }
.ek-cta small { display: block; margin-top: 14px; font-size: 14px; color: var(--muted); }
.ek-cta small a { color: var(--accent-deep); }

/* ==========================================================================
   Listings (blog / cases / tag / author)
   ========================================================================== */
.ek-listing { padding: 0 var(--pad) clamp(56px, 8vw, 96px); }

/* Topic nav above the blog grid. Nothing on the site linked to /tag/ before this, so all
   four tag pages were orphans reachable only from the sitemap. Chips are >=40px tall to
   keep the touch-target rule that the rest of the nav already follows. */
.ek-taglist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(24px, 3vw, 34px); list-style: none; padding: 0; }
.ek-taglist__item {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--card);
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  border-bottom: 1px solid var(--line) !important; text-decoration: none;
}
.ek-taglist__item:hover { border-color: var(--accent); color: var(--accent-deep); }

/* The article eyebrow doubles as the link to its topic page. */
.ek-eyebrow a { color: inherit; border-bottom: 1px solid rgba(178, 58, 23, .35); }
.ek-eyebrow a:hover { color: var(--accent); border-bottom-color: currentColor; }
.ek-listing__grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ek-postcard {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ek-postcard:hover {
  border-color: #D5C9BA;
  box-shadow: 0 18px 40px -24px rgba(20, 17, 15, .3);
  transform: translateY(-2px);
}
.ek-postcard__imglink { display: block; border-bottom: 0 !important; }
.ek-postcard__img, .ek-postcard__placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1200 / 630; object-fit: cover;
  background: var(--surface);
}
.ek-postcard__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.ek-postcard__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0; font-size: 13.5px; color: var(--muted);
}
.ek-postcard__tag { font-weight: 600; color: var(--accent-deep); }
.ek-postcard__title { font-size: 20px; line-height: 1.28; margin: 0; }
.ek-postcard__title a { color: var(--ink); border-bottom: 0 !important; }
.ek-postcard__title a:hover { color: var(--accent-deep); }
.ek-postcard__excerpt { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.ek-postcard__more { margin: auto 0 0; padding-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--accent-deep); }

.ek-empty {
  grid-column: 1 / -1;
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: clamp(36px, 6vw, 64px); text-align: center;
}
.ek-empty__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0 0 10px !important; }
.ek-empty p { margin: 0 auto; max-width: 52ch; color: var(--muted); }

.ek-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 44px;
}
.ek-pagination__page { font-size: 14.5px; color: var(--muted); }

/* ==========================================================================
   Article (post.hbs / titled page.hbs)
   ========================================================================== */
.ek-article-hero { padding-bottom: clamp(24px, 4vw, 40px); }
.ek-article-hero h1 { font-size: clamp(30px, 4.2vw, 46px); }
.ek-article-meta { font-size: 14.5px; color: var(--muted); }
.ek-article-cover { padding: 0 var(--pad); }
.ek-article-cover img {
  display: block; width: 100%; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.ek-sec--article { padding-top: clamp(32px, 5vw, 56px); }
.ek-related .ek-listing__grid { padding: 0; }

/* ---------- error pages ---------- */
.ek-error { min-height: 46vh; display: flex; align-items: center; }
.ek-error .ek-narrow { width: 100%; }

/* ---------- misc ---------- */
.ek-fullbleed { display: block; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ek-btn, .ek-card, .ek-postcard { transition: none; }
}

/* ==========================================================================
   V2 — depth & proof layer (2026-08 redesign)
   Hero texture, service icons, metric-first case cards, testimonial,
   chips, Telegram nav, mobile CTA bar, scroll reveal, ink texture.
   ========================================================================== */

/* ---------- language switcher ---------- */
/* A native <details> disclosure (see src/components/LangPicker.astro): summary is the
   current language, the menu the three options. It replaced a flat row of UK/EN/RU pills
   in the header, which cost ~120px of a row that had none to give.
   Two placements, one component: --footer is the primary one, --nav is display:none until
   the burger breakpoint turns .ek-nav into the drawer, so the desktop row never pays for
   it. Both are styled from these base rules; only colour and open direction differ. */
.ek-langs { position: relative; }
.ek-langs > summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer;
  /* Both spellings are needed: Safari draws the marker via ::-webkit-details-marker and
     ignores list-style, Chrome and Firefox do the opposite. Left in, the triangle sits
     between the padding and the flag and cannot be moved to the right of the label. */
  list-style: none;
}
.ek-langs > summary::-webkit-details-marker { display: none; }
.ek-langs > summary:hover { background: var(--surface); color: var(--ink); }
/* Chevron, drawn rather than a glyph so it inherits colour and rotates on open. */
.ek-langs > summary::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.ek-langs[open] > summary::after { transform: translateY(1px) rotate(225deg); }
/* The flag is decoration with a text fallback: Windows has no regional-indicator glyphs
   and renders the pair as the letters "UA"/"GB"/"RU", so the name always sits beside it
   (see the LOCALES comment in lib/i18n.mjs). Sized in its own rule because the letter
   fallback is wider than a flag and must not push the label around. */
.ek-langs__flag { font-size: 15px; line-height: 1; flex: none; }

.ek-langs__menu {
  position: absolute; z-index: 70; left: 0; min-width: 100%;
  margin: 6px 0 0; padding: 6px;
  list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 36px -18px rgba(20, 17, 15, .3);
}
.ek-langs__menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap;
}
.ek-langs__menu a:hover { background: var(--surface); color: var(--ink); }
.ek-langs__menu a[aria-current="page"] { color: var(--accent-deep); font-weight: 600; }

/* Header copy: exists only for the burger drawer. */
.ek-langs--nav { display: none; }
@media (max-width: 1100px) {
  .ek-langs--nav { display: block; }
  /* .ek-nav is align-items:stretch in the drawer, so the summary matches the nav links
     around it rather than sitting as a short pill in a full-width row. `display: flex`
     rather than the base inline-flex: an inline-flex summary is shrink-to-fit, which
     leaves no free space for the chevron to be pushed into and clusters all three parts
     on the left. */
  .ek-langs--nav > summary { display: flex; padding: 12px 14px; font-size: 17px; border-radius: 12px; }
  .ek-langs--nav > summary .ek-langs__name { margin-right: auto; }
}

/* Footer copy: opens upward, because it sits on the last line of the page. */
.ek-langs--footer > summary { color: #CFC7BE; }
.ek-langs--footer > summary:hover { background: rgba(253, 251, 247, .1); color: var(--paper); }
.ek-langs--footer .ek-langs__menu {
  top: auto; bottom: 100%; margin: 0 0 6px;
  background: #241F1C; border-color: rgba(253, 251, 247, .18);
}
/* .ek-footer a is var(--paper) — the menu re-states its own colours rather than letting
   the dark-section rule paint white text on the hover surface. */
.ek-langs--footer .ek-langs__menu a { color: #CFC7BE; }
.ek-langs--footer .ek-langs__menu a:hover { background: rgba(253, 251, 247, .1); color: var(--paper); }
.ek-langs--footer .ek-langs__menu a[aria-current="page"] { color: #FFB99E; }

/* ---------- header: telegram link ---------- */
.ek-nav__tg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; color: var(--ink-soft);
}
.ek-nav__tg:hover { background: var(--surface); color: var(--ink); }
.ek-nav__tg svg { color: var(--accent-deep); flex: none; }
@media (max-width: 1000px) {
  .ek-nav__tg { padding: 12px 14px; font-size: 17px; border-radius: 12px; }
}

/* ---------- hero: wash + watermark ---------- */
.ek-hero {
  position: relative;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23E4572E' stroke-width='9.5' stroke-linecap='round' fill='none' opacity='.055'%3E%3Cpath d='M36 27 V73'/%3E%3Cpath d='M36 55 L62 33'/%3E%3Cpath d='M36 55 L64 73'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(900px 420px at 88% -12%, rgba(228, 87, 46, .08), transparent 62%);
  background-repeat: no-repeat, no-repeat;
  background-position: calc(100% + 120px) -70px, 0 0;
  background-size: 520px 520px, auto;
}
@media (max-width: 720px) {
  .ek-hero { background-position: calc(100% + 80px) -40px, 0 0; background-size: 300px 300px, auto; }
}

/* ---------- inline highlight in headings ---------- */
.ek-hl {
  font-style: normal; color: inherit;
  background: linear-gradient(180deg, transparent 76%, rgba(228, 87, 46, .32) 76%);
}

/* ---------- fact chips (hero) ---------- */
/* Deliberately quieter than the buttons above them: tinted, borderless,
   smaller — supporting facts, not a third row of CTAs. */
.ek-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.ek-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border-radius: 999px;
  padding: 7px 13px;
}
.ek-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
/* One chip per row on a phone, because how many fit per row is a fact about the length of
   the words in each language: at 390px the three Ukrainian and Russian chips each took a
   row while the shorter English ones packed 2+1, which made the English hero 44px shorter
   than the other two for no reason a reader could see. Full-width rows make the block
   three rows tall in every locale. Above this width all three chips share one row anyway,
   so the rule is scoped to where the wrap actually bites. */
@media (max-width: 640px) {
  .ek-chips li { flex: 1 1 100%; }
}
.ek-hero .ek-note { margin-top: 14px; }

/* ---------- 2×2 grid for content-heavy cards ---------- */
/* Four ~250px columns squeeze Ukrainian copy into one-word lines;
   two wide columns keep list items on a single line. */
.ek-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ek-grid--2 .ek-card { padding: 30px; gap: 14px; }
.ek-grid--2 .ek-card h3 { font-size: 19px; }
.ek-grid--2 .ek-card p, .ek-grid--2 .ek-card ul { font-size: 16px; }
/* 680px left two 330px columns on an iPad; 860 keeps it one column until the text fits. */
@media (max-width: 860px) { .ek-grid--2 { grid-template-columns: 1fr; } }

/* ---------- numbered document rows ---------- */
/* Five blocks of a written report, not five product cards: hairline rows in the
   .ek-case idiom, so Ukrainian bullets get the full measure instead of a 250px
   column. Numerals come from a counter — never typed into the heading. */
.ek-rows { counter-reset: r; list-style: none; margin: 0; padding: 0; }
.ek-rows > li {
  counter-increment: r;
  display: grid; align-items: start; gap: 10px 40px;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  padding: 28px 0; border-top: 1px solid var(--line);
}
.ek-rows > li:last-child { border-bottom: 1px solid var(--line); }
.ek-rows h3 { margin: 0; font-size: 20px; }
.ek-rows h3::before {
  content: "0" counter(r);
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; color: var(--accent-deep);
}
/* 16px, not 15.5: this is body copy, and below 16 it trips rule C1 of our own UX audit.
   The other 15.5px sizes in this file are labels and buttons, which that rule excludes. */
.ek-rows ul { margin: 0; padding-left: 20px; font-size: 16px; color: var(--muted); line-height: 1.6; }
.ek-rows ul li + li { margin-top: 9px; }
/* Below ~900px the fixed left column starves the checks column: stack instead. */
@media (max-width: 900px) {
  .ek-rows > li { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
}

/* ---------- service card icons ---------- */
.ek-card__icon {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: var(--accent-deep);
  background: linear-gradient(135deg, #FCE7DD, #F7EFE4);
  border: 1px solid #F3DCCB;
}
.ek-card__icon svg { width: 24px; height: 24px; display: block; }

/* ---------- richer card hover ---------- */
.ek-card {
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ek-card:hover {
  border-color: #E4B49E;
  box-shadow: 0 18px 40px -24px rgba(147, 48, 15, .3);
  transform: translateY(-2px);
}

/* ---------- metric-first case cards ---------- */
.ek-cases-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { .ek-cases-grid { grid-template-columns: 1fr; } }
.ek-metric-case {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ek-metric-case:hover {
  border-color: #E4B49E;
  box-shadow: 0 18px 40px -24px rgba(147, 48, 15, .3);
  transform: translateY(-2px);
}
.ek-metric {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.03em; line-height: 1.05;
  color: var(--accent-deep);
}
.ek-metric span {
  display: block; font-family: var(--font-text); font-weight: 500;
  font-size: 16px; letter-spacing: .01em; color: var(--muted); margin-top: 7px;
}
.ek-metric-case h3 { font-size: 17.5px; }
.ek-metric-case p { font-size: 16px; color: var(--muted); line-height: 1.6; }
.ek-metric-case .ek-case-link { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 15px; }
.ek-metric-case .ek-case-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }

/* ---------- testimonial ---------- */
.ek-quote { position: relative; max-width: var(--narrow); margin-inline: auto; padding-top: 10px; }
.ek-quote::before {
  content: "«"; position: absolute; top: -38px; left: -12px;
  font-family: var(--font-display); font-weight: 800; font-size: 110px; line-height: 1;
  color: var(--accent); opacity: .22; pointer-events: none;
}
.ek-quote blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.4; letter-spacing: -.015em;
  text-wrap: balance;
}
.ek-quote figcaption { margin-top: 20px; font-size: 15px; color: var(--muted); }
.ek-quote figcaption b { display: block; color: var(--ink); font-weight: 600; }
.ek-sec--ink .ek-quote figcaption b { color: var(--paper); }

/* ---------- dark section texture ---------- */
.ek-sec--ink {
  background-image: radial-gradient(rgba(253, 251, 247, .05) 1.2px, transparent 1.7px);
  background-size: 26px 26px;
}

/* ---------- mobile sticky CTA ---------- */
.ek-mobile-cta { display: none; }
/* The sticky CTA follows the page: /start/ asks for a launch, everywhere else for an audit. */
.ek-mobile-cta__start { display: none; }
body.page-start .ek-mobile-cta__default { display: none; }
body.page-start .ek-mobile-cta__start { display: inline-flex; }
@media (max-width: 640px) {
  body { padding-bottom: 86px; }
  .ek-mobile-cta {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 60; display: flex; gap: 10px; align-items: stretch;
    padding: 10px;
    background: rgba(20, 17, 15, .94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    box-shadow: 0 16px 40px -12px rgba(20, 17, 15, .5);
  }
  .ek-mobile-cta .ek-btn { flex: 1; padding: 13px 16px; font-size: 15.5px; }
  .ek-mobile-cta__tg {
    flex: none; width: 48px; display: grid; place-items: center;
    border-radius: 12px; background: rgba(253, 251, 247, .12);
    color: var(--paper);
  }
  /* With the drawer open the bar showed a second "Безкоштовний аудит" alongside the one
     inside the menu — two identical primary actions on one screen. */
  .ek-nav-open .ek-mobile-cta { display: none; }
  /* pages where the bar duplicates on-page contact/forms */
  body.page-audyt { padding-bottom: 0; }
  body.page-audyt .ek-mobile-cta,
  body.page-kontakty .ek-mobile-cta,
  body.page-dyakuyu .ek-mobile-cta,
  body.page-hosting-za-dolar .ek-mobile-cta,
  body.page-hosting-za-dolar-dali .ek-mobile-cta { display: none; }
  body.page-kontakty { padding-bottom: 0; }
  body.page-dyakuyu { padding-bottom: 0; }
  body.page-hosting-za-dolar { padding-bottom: 0; }
  body.page-hosting-za-dolar-dali { padding-bottom: 0; }
}

/* ---------- scroll reveal (JS-gated: no JS → everything visible) ---------- */
.ek-js .ek-reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.2, .6, .2, 1), transform .55s cubic-bezier(.2, .6, .2, 1);
}
.ek-js .ek-reveal--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ek-js .ek-reveal { opacity: 1; transform: none; transition: none; }
}