/*!
 * Koval Legal Group — «Пастель» design system
 * Mobile-first: base styles = 360–599px, then min-width queries
 * (600 / 768 / 1024 / 1240 / 1280). Tokens only — no raw colours below :root.
 * This file becomes theme/klg/assets/css/klg.css in Stage 3.
 *
 * Contents
 *  1. Fonts            9. Chips + service picker   17. Breadcrumbs, author line
 *  2. Tokens          10. Pills / badges            18. FAQ
 *  3. Reset + base    11. Cards + bento             19. Price table
 *  4. Typography      12. Home hero + portrait      20. Forms
 *  5. Layout          13. Media strip               21. Footer + disclaimer
 *  6. A11y helpers    14. Founder block             22. Contact dock (mobile)
 *  7. Header + drawer 15. Steps / abroad            23. Social column (desktop)
 *  8. Category bar    16. Reviews, posts, prose     24. Binotel spots, Viber hint
 *                                                    25. Binotel, 26. Notice + check list, 27. Motion, print
 */

/* ============ 1. Fonts (self-hosted, variable wght 100–900) ============ */
@font-face{
  font-family:"Geologica";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/geologica-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Geologica";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/geologica-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============ 2. Tokens ============ */
:root{
  /* text */
  --ink:#16232A;
  --ink-2:#2C3A41;
  --ink-3:#3C4B52;      /* body text on category tints */
  --muted:#4B5A61;
  --muted-2:#6A777D;
  --on-dark:#FFFFFF;
  /* surfaces */
  --bg:#FFFFFF;
  --surface:#F1F4F5;
  --surface-2:#F7F8F9;
  --line:#E3E8EB;
  --line-2:#D5DDE0;     /* input borders */
  /* action */
  --teal:#0E5C5A;
  --teal-hover:#09403F;
  --teal-tint:#CFE6E4;  /* secondary text on teal */
  /* category tints (order = category bar) */
  --c-ratss:#EDF0F3;
  --c-shliub:#F2ECEA;
  --c-pasport:#F1EEE7;
  --c-apostyl:#ECEBF0;
  --c-kordon:#E9EEEA;
  --c-vodii:#F3EDE6;
  --c-biznes:#ECEDE6;
  /* category marks: darker shades of the tints for dots/bars that must be visible on white (≥3:1 non-text contrast) */
  --d-ratss:#6F8499;
  --d-shliub:#A9776C;
  --d-pasport:#9A8758;
  --d-apostyl:#7C74A0;
  --d-kordon:#5F8A6C;
  --d-vodii:#B07A50;
  --d-biznes:#828656;
  /* accents */
  --mist:#DCE3E8; --taupe:#E6DCD3; --sage:#DCE5E0;
  --sage-ink:#0F3B2C;
  --clay-ink:#7A3F18;   /* eyebrow on warm tints */
  --clay-ink-2:#4B3A2E; /* body on warm tints */
  /* feedback */
  --danger:#9B2C2C;
  --danger-bg:#FBEFEF;
  --success-bg:#E6F0EC;
  /* messenger brand glyph colours (icons only, never backgrounds) */
  --tg:#229ED9; --vb:#7360F2; --wa:#1DA851; --fb:#0866FF; --ig:#D62976;
  /* radius */
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px; --r-btn:14px;
  /* spacing (4-based) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px;
  /* layout */
  --container:1280px; --gutter:16px;
  --header-h:64px;
  --dock-h:76px;        /* contact dock height without the safe-area inset */
  /* elevation */
  --shadow-1:0 6px 18px rgba(22,35,42,.08);
  --shadow-2:0 16px 40px rgba(22,35,42,.12);
  --shadow-dock:0 -8px 24px rgba(22,35,42,.08);
  --focus:0 0 0 3px var(--bg),0 0 0 5px var(--teal);
  /* type */
  --font:"Geologica",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-h1:clamp(2.125rem,1.4rem + 3.2vw,4.25rem);
  --fs-h2:clamp(1.625rem,1.2rem + 1.9vw,3rem);
  --fs-h3:clamp(1.1875rem,1.1rem + .35vw,1.5rem);
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.1875rem);
}
@media (min-width:768px){:root{--gutter:24px}}
/* from 1024 the right-edge social column (62px wide + 8px from the edge = 70px) needs clear space beside content: gutter 80 → ≥10px gap */
@media (min-width:1024px){:root{--gutter:80px;--header-h:76px}}

/* ============ 3. Reset + base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* room for the fixed contact dock so the footer is never hidden under it */
  padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px));
  overflow-wrap:break-word;
}
@media (min-width:1024px){body{padding-bottom:0}}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--teal-hover)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
/* zero specificity: any component class (.cat-bar__list, .blog-filter__list…) can set its own padding */
:where(ul[class],ol[class]){list-style:none;padding:0}
[hidden]{display:none!important}
:target,[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
::selection{background:var(--sage);color:var(--sage-ink)}

/* ============ 4. Typography ============ */
.h1,h1{font-size:var(--fs-h1);font-weight:600;line-height:1.05;letter-spacing:-.035em}
.h2,h2{font-size:var(--fs-h2);font-weight:600;line-height:1.12;letter-spacing:-.025em}
.h3,h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--muted);max-width:36em}
.small,.meta{font-size:14px;line-height:1.5;color:var(--muted)}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);align-self:flex-start;
  background:var(--sage);color:var(--sage-ink);border-radius:var(--r-pill);
  padding:7px 14px;font-size:14px;font-weight:500;line-height:1.4;
}
.eyebrow--plain{background:none;padding:0;color:var(--clay-ink)}
.placeholder{color:var(--muted-2);font-style:normal}
.nowrap{white-space:nowrap}

/* ============ 5. Layout ============ */
.container{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:calc(920px + 2 * var(--gutter))}
.section{padding-block:var(--s7)}
.section--tight{padding-block:var(--s6)}
.section--surface{background:var(--surface)}
.section--flush{margin-bottom:var(--s7)}
@media (min-width:1024px){.section--flush{margin-bottom:var(--s9)}}
@media (min-width:768px){.section{padding-block:var(--s8)}}
@media (min-width:1024px){.section{padding-block:var(--s9)}}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s4);margin-bottom:var(--s5)}
.section-head__lead{flex-basis:100%;margin-top:calc(-1 * var(--s1))}
.section-head--center{justify-content:center;text-align:center}
.link-more{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:500;text-decoration:none;
}
.link-more:hover{text-decoration:underline}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.split{display:grid;gap:var(--s6)}
@media (min-width:1024px){.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);align-items:center}}

/* ============ 6. A11y helpers ============ */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--s4);top:-100px;z-index:1000;background:var(--ink);color:var(--on-dark);padding:12px 16px;border-radius:var(--r-sm);text-decoration:none}
.skip-link:focus{top:var(--s2);color:var(--on-dark)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}

/* ============ 7. Header + drawer ============ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);border-bottom:1px solid transparent;transition:border-color .2s}
@supports (backdrop-filter:blur(1px)){.site-header{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--header-h)}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;flex-shrink:0}
.logo:hover{color:var(--ink)}
.logo__mark{display:grid;grid-template-columns:repeat(2,12px);gap:3px}
.logo__mark span{height:12px;border-radius:4px}
.logo__mark span:nth-child(1){background:var(--mist)}
.logo__mark span:nth-child(2){background:var(--taupe)}
.logo__mark span:nth-child(3){background:var(--sage)}
.logo__mark span:nth-child(4){background:var(--teal)}
.logo__text{font-weight:600;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.main-nav{display:none}
.main-nav__list{display:flex;gap:var(--s1)}
.main-nav__link{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:15px;white-space:nowrap}
.main-nav__link:hover{background:var(--surface);color:var(--ink)}
.main-nav__link[aria-current="page"]{font-weight:600}
.header-actions{display:flex;align-items:center;gap:var(--s2)}
.header-actions .header-actions__lang,.header-actions .header-actions__phone,.header-actions .header-actions__cta{display:none}
.header-actions__lang{align-items:center;min-height:44px;min-width:44px;padding:0 8px;color:var(--muted);font-size:14px;text-decoration:none}
.header-actions__phone{align-items:center;gap:8px;min-height:44px;padding:0 8px;color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
.header-actions__phone:hover{color:var(--teal)}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:44px;height:44px;border-radius:var(--r-btn);border:0;background:var(--surface);color:var(--ink);text-decoration:none;
}
.icon-btn:hover{background:var(--mist);color:var(--ink)}
.icon-btn svg{width:22px;height:22px}
@media (min-width:600px){.header-actions .header-actions__cta{display:inline-flex}}
@media (min-width:1024px){
  .main-nav{display:block}
  .burger,.header-actions__call{display:none}
  .logo__text{font-size:18px}
  .logo__mark{grid-template-columns:repeat(2,14px)}
  .logo__mark span{height:14px;border-radius:5px}
}
@media (min-width:1280px){.header-actions .header-actions__lang,.header-actions .header-actions__phone{display:inline-flex}}
/* 1024–1239: gutter is 80px (social column), so nav links are a bit tighter to fit logo + 6 links + CTA */
@media (min-width:1024px){.main-nav__link{padding:0 9px}}
@media (min-width:1240px){.main-nav__link{padding:0 12px}}

.drawer{position:fixed;inset:0;z-index:200}
.drawer__backdrop{position:absolute;inset:0;background:rgba(22,35,42,.42);opacity:0;transition:opacity .25s}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(92vw,420px);background:var(--bg);
  display:flex;flex-direction:column;gap:var(--s5);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s3) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom,0px));
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:var(--shadow-2);
}
.drawer.is-open .drawer__backdrop{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:52px}
.drawer__title{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.drawer__nav ul{list-style:none;padding:0;margin:0}
.drawer__nav a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 4px;border-bottom:1px solid var(--line);color:var(--ink);font-size:19px;font-weight:500;text-decoration:none}
.drawer__nav a:hover{color:var(--teal)}
.drawer__group{display:flex;flex-direction:column;gap:var(--s3)}
.drawer__cats{display:grid;gap:var(--s2)}
.drawer__cats a{display:flex;align-items:center;min-height:48px;padding:10px 14px;border-radius:var(--r-md);color:var(--ink);font-size:16px;font-weight:500;text-decoration:none}
.drawer__contacts{display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s2)}
.drawer__phone{font-size:24px;font-weight:600;color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.drawer__messengers{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ============ 8. Category bar ============ */
.cat-bar{padding-block:var(--s2) var(--s3)}
.cat-bar__list{
  display:flex;gap:var(--s2);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* bleed to the screen edges on mobile so the swipe feels native */
  margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
}
.cat-bar__list::-webkit-scrollbar{display:none}
.cat-bar__item{flex-shrink:0;scroll-snap-align:start}
.cat-bar__item:last-child{padding-right:var(--s5)}
.cat-bar__link{
  display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 16px;
  border-radius:var(--r-md);color:var(--ink);font-size:15px;font-weight:500;line-height:1.25;
  text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .15s;
}
.cat-bar__link:hover{color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.cat-bar__link[aria-current="page"]{background:var(--ink)!important;color:var(--on-dark)}
/* child page (article in a category, country/sub-page): the parent hub pill is aria-current="true" — outlined, not filled */
.cat-bar__link[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--ink);font-weight:600}
/* ≥ 1024: one row of equal pills across the full container, whatever the number of categories
   (columns = items; no scroller, nothing under the right-edge social column) */
@media (min-width:1024px){
  .cat-bar__list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);overflow:visible;margin-inline:0;padding-inline:0;scroll-padding-inline:0;-webkit-mask-image:none;mask-image:none}
  .cat-bar__item:last-child{padding-right:0}
  .cat-bar__link{height:100%;white-space:normal;text-align:center;padding:12px 14px}
}
/* 1024–1279: pills sized by their label (one line each) and stretched to fill the row */
@media (min-width:1024px) and (max-width:1279px){.cat-bar__list{display:flex;gap:6px}.cat-bar__item{flex:1 1 auto}.cat-bar__link{white-space:nowrap;padding:12px 10px;font-size:14px}}
/* the page's own category: body[data-cat] → --hub-tint (surface) + --hub-dot (mark). Hub/landing/article templates set data-cat. */
body[data-cat="ratss"]{--hub-tint:var(--c-ratss);--hub-dot:var(--d-ratss)}
body[data-cat="shliub"]{--hub-tint:var(--c-shliub);--hub-dot:var(--d-shliub)}
body[data-cat="pasport"]{--hub-tint:var(--c-pasport);--hub-dot:var(--d-pasport)}
body[data-cat="apostyl"]{--hub-tint:var(--c-apostyl);--hub-dot:var(--d-apostyl)}
body[data-cat="kordon"]{--hub-tint:var(--c-kordon);--hub-dot:var(--d-kordon)}
body[data-cat="vodii"]{--hub-tint:var(--c-vodii);--hub-dot:var(--d-vodii)}
body[data-cat="biznes"]{--hub-tint:var(--c-biznes);--hub-dot:var(--d-biznes)}
/* category tints — same order everywhere */
.t-ratss{background:var(--c-ratss)} .t-shliub{background:var(--c-shliub)} .t-pasport{background:var(--c-pasport)}
.t-apostyl{background:var(--c-apostyl)} .t-kordon{background:var(--c-kordon)} .t-vodii{background:var(--c-vodii)} .t-biznes{background:var(--c-biznes)}
/* category dot: <span class="cat-dot t-ratss"> — uses the darker --d-* shade (the pale tint is invisible on white) */
.cat-dot{display:inline-block;width:12px;height:12px;flex-shrink:0;border-radius:50%}
.cat-dot.t-ratss{background:var(--d-ratss)} .cat-dot.t-shliub{background:var(--d-shliub)} .cat-dot.t-pasport{background:var(--d-pasport)}
.cat-dot.t-apostyl{background:var(--d-apostyl)} .cat-dot.t-kordon{background:var(--d-kordon)} .cat-dot.t-vodii{background:var(--d-vodii)} .cat-dot.t-biznes{background:var(--d-biznes)}

/* ============ 9. Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;border-radius:var(--r-btn);border:1px solid transparent;
  font-size:16px;font-weight:500;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s,transform .15s;
}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn--primary{background:var(--teal);color:var(--on-dark)}
.btn--primary:hover{background:var(--teal-hover);color:var(--on-dark)}
.btn--secondary{background:var(--bg);color:var(--ink);border-color:var(--line)}
.btn--secondary:hover{background:var(--surface);color:var(--ink)}
.btn--soft{background:var(--surface);color:var(--ink)}
.btn--soft:hover{background:var(--mist);color:var(--ink)}
.btn--on-dark{background:var(--bg);color:var(--teal)}
.btn--on-dark:hover{background:var(--surface);color:var(--teal-hover)}
.btn--lg{min-height:54px;padding:14px 26px;font-size:17px;font-weight:600}
.btn--sm{min-height:44px;padding:10px 16px;font-size:15px}
.btn--block{width:100%}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btn-row--stack-sm>.btn{flex:1 1 100%}
@media (min-width:600px){.btn-row--stack-sm>.btn{flex:0 1 auto}}

/* ============ 10. Chips + service picker ============ */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.25;text-align:left;
  text-decoration:none;transition:background-color .15s,color .15s,border-color .15s;
}
.chip:hover{border-color:var(--teal);color:var(--ink)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--teal);border-color:var(--teal);color:var(--on-dark);font-weight:500}
.picker{background:var(--surface);border-radius:var(--r-lg);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.picker__title{font-size:17px;font-weight:600;line-height:1.3;padding-inline:var(--s1)}
.picker__chips .chip{border-color:transparent}
.picker__result{background:var(--bg);border-radius:var(--r-md);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.picker__sum{display:flex;flex-direction:column;gap:2px}
.picker__price{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.picker__meta{font-size:14px;color:var(--muted);line-height:1.45}
.picker__note{font-size:14px;color:var(--muted);padding-inline:var(--s1)}
@media (min-width:600px){
  .picker{padding:18px}
  .picker__result{flex-direction:row;align-items:center;justify-content:space-between}
}

/* ============ 11. Pills / badges ============ */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:7px 14px;background:var(--bg);font-size:15px;font-weight:600;line-height:1.3}
.pill--muted{font-weight:500;color:var(--ink-2)}
.pill--teal{background:var(--teal);color:var(--on-dark);font-size:14px;font-weight:500}
.pill--sage{background:var(--sage);color:var(--sage-ink)}

/* ============ 12. Cards + bento ============ */
.card{
  position:relative;display:flex;flex-direction:column;gap:var(--s3);
  border-radius:var(--r-lg);padding:var(--s5);background:var(--surface);color:var(--ink);text-decoration:none;
}
.card--line{background:var(--bg);border:1px solid var(--line)}
/* category tints on cards (must beat .card{background}) */
.card.t-ratss{background:var(--c-ratss)} .card.t-shliub{background:var(--c-shliub)} .card.t-pasport{background:var(--c-pasport)}
.card.t-apostyl{background:var(--c-apostyl)} .card.t-kordon{background:var(--c-kordon)} .card.t-vodii{background:var(--c-vodii)} .card.t-biznes{background:var(--c-biznes)}
a.card{transition:transform .15s,box-shadow .15s}
a.card:hover{color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow-1)}
.card__title{font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.015em}
.card__text{font-size:15px;line-height:1.55;color:var(--ink-3)}
.card>.pill{align-self:flex-start}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s2)}
.card__arrow{width:44px;height:44px;flex-shrink:0;border-radius:var(--r-pill);background:var(--ink);color:var(--on-dark);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.card__arrow svg{width:20px;height:20px}
a.card:hover .card__arrow{transform:translateX(3px)}

.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.bento .card{border-radius:28px}
.bento__wide .card__title{font-size:clamp(21px,1.2rem + .6vw,26px)}
.bento__wide .card__text{max-width:30em}
.card--cta{background:var(--teal);color:var(--on-dark)}
.card--cta .card__text{color:var(--teal-tint)}
a.card--cta:hover{color:var(--on-dark)}
.card--cta .btn{align-self:flex-start;margin-top:auto}
.bento-note{margin-top:var(--s4);font-size:14px;color:var(--muted)}
@media (min-width:600px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento__wide{grid-column:span 2}
  .bento .card{min-height:220px;padding:26px}
}
@media (min-width:1024px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .bento__full{grid-column:1 / -1}
  .bento .card{min-height:250px;padding:28px}
}

/* ============ 13. Home hero + founder portrait ============ */
.hero{padding-block:var(--s4) var(--s6)}
.hero__grid{display:grid;gap:var(--s6)}
.hero__text{display:flex;flex-direction:column;gap:var(--s3);min-width:0} /* 12px on phones: CTA stays above the dock on 360×640 */
@media (min-width:600px){.hero__text{gap:var(--s4)}}
.hero__title{max-width:12em}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hero__actions .btn{flex:1 1 100%}
@media (min-width:600px){.hero__actions .btn{flex:0 1 auto}}
@media (min-width:768px){
  .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"text portrait" "picker picker";gap:var(--s5) var(--s5);align-items:center}
  .hero__text{grid-area:text}
  .hero__picker{grid-area:picker}
  .hero .portrait{grid-area:portrait}
}
@media (min-width:1024px){
  .hero{padding-block:var(--s6) var(--s7)}
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"text portrait" "picker portrait";gap:var(--s5) var(--s7);align-items:end}
  .hero__text{grid-area:text}
  .hero__picker{grid-area:picker;align-self:start}
  .hero .portrait{grid-area:portrait;align-self:stretch}
  .hero__text{gap:22px}
}

.portrait{position:relative;display:flex;flex-direction:column;gap:var(--s3)}
.portrait__frame{
  position:relative;overflow:hidden;border-radius:28px;background:var(--mist);
  height:clamp(340px,100vw,420px);
}
.portrait__frame::before{ /* soft taupe disc, as in the prototype */
  content:"";position:absolute;right:-56px;top:-56px;width:200px;height:200px;border-radius:50%;background:var(--taupe);
}
.portrait__img{
  position:absolute;left:16px;right:16px;top:28px;bottom:0;width:calc(100% - 32px);height:calc(100% - 28px);
  object-fit:cover;object-position:42% 0%;border-radius:22px 22px 0 0;
}
.portrait__name{
  position:absolute;left:12px;bottom:12px;right:auto;max-width:calc(100% - 24px);
  background:var(--bg);border-radius:20px;padding:12px 16px;box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;gap:2px;
}
.portrait__name strong{font-size:19px;font-weight:600;letter-spacing:-.01em}
.portrait__name span{font-size:14px;color:var(--muted);line-height:1.4}
.portrait__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.stat{background:var(--surface);border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.stat__num{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1}
.stat__label{font-size:14px;color:var(--muted);line-height:1.35}
.stat--sage{background:var(--sage);color:var(--sage-ink)}
.stat--sage .stat__label{color:var(--sage-ink)}
@media (min-width:600px){.portrait__frame{height:460px}}
@media (min-width:768px){.portrait__frame{height:440px}}
@media (min-width:1024px){
  .portrait{display:block;min-height:620px}
  .portrait__frame{position:absolute;inset:0 0 0 30px;height:auto;border-radius:36px}
  .portrait__frame::before{right:-60px;top:-60px;width:260px;height:260px}
  .portrait__img{left:24px;right:24px;top:40px;width:calc(100% - 48px);height:calc(100% - 40px);border-radius:28px 28px 0 0;object-position:40% 0%}
  .portrait__name{left:0;bottom:40px;max-width:300px;padding:18px 22px;border-radius:22px}
  .portrait__name strong{font-size:22px}
  .portrait__stats{display:contents}
  .portrait__stats .stat{position:absolute;right:24px;box-shadow:var(--shadow-1);padding:14px 18px}
  .portrait__stats .stat:first-child{bottom:220px;background:var(--bg)}
  .portrait__stats .stat:last-child{bottom:120px}
  .stat__num{font-size:30px}
}

/* ============ 14. Media strip ============ */
.media-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s3) var(--s5);border-block:1px solid var(--line);padding-block:18px;text-align:center}
.media-strip__label{flex-basis:100%;font-size:14px;color:var(--muted)}
.media-strip__logo{font-size:15px;font-weight:600;color:var(--muted-2)}
@media (min-width:768px){.media-strip__label{flex-basis:auto}}

/* ============ 15. Founder block ============ */
.founder{background:var(--c-vodii);border-radius:var(--r-xl);padding:var(--s4);display:grid;gap:var(--s5);overflow:hidden}
.founder__media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--taupe);aspect-ratio:520/604;max-height:520px}
.founder__img{width:100%;height:100%;object-fit:cover;object-position:52% 10%}
.founder__video{
  position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:12px;min-height:44px;
  background:var(--bg);border-radius:var(--r-md);padding:6px 16px 6px 6px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;
}
.founder__video:hover{color:var(--ink);box-shadow:var(--shadow-1)}
.founder__video-icon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--teal);color:var(--on-dark);display:flex;align-items:center;justify-content:center}
.founder__video-icon svg{width:18px;height:18px}
.founder__body{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s2) var(--s1) var(--s3)}
.founder__name{font-size:clamp(2.25rem,1.6rem + 2.6vw,4.25rem);letter-spacing:-.04em;line-height:1}
.founder__quote{font-size:clamp(1.1875rem,1.05rem + .6vw,1.625rem);line-height:1.4}
.founder__bio{color:var(--clay-ink-2);line-height:1.7}
.founder__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* phones: 2 columns; an odd last card spans the row instead of sitting at half width */
.founder__stats>.stat:last-child:nth-child(odd){grid-column:1 / -1}
@media (min-width:600px){.founder__stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.founder__stats>.stat:last-child:nth-child(odd){grid-column:auto}}
.founder__stats .stat{background:var(--bg)}
@media (min-width:768px){.founder{padding:var(--s6)}}
@media (min-width:1024px){
  .founder{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s7);padding:var(--s7);align-items:center}
  .founder__media{aspect-ratio:auto;height:100%;min-height:560px;max-height:none}
}

/* ============ 16. Steps / abroad ============ */
.steps{display:flex;flex-direction:column;gap:10px;counter-reset:step}
.step{background:var(--bg);border-radius:20px;padding:var(--s4);display:flex;gap:var(--s4);align-items:flex-start}
.step__num{width:44px;height:44px;flex-shrink:0;border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;font-weight:600;background:var(--mist)}
.step:nth-child(2) .step__num{background:var(--taupe)}
.step:nth-child(3) .step__num{background:var(--sage)}
.step:nth-child(4) .step__num{background:var(--c-apostyl)}
.step__body{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.step__title{font-size:17px;font-weight:600;line-height:1.35}
.step__text{font-size:15px;color:var(--muted);line-height:1.55}
.section--surface .step{background:var(--bg)}
.how-grid{display:grid;gap:var(--s3);counter-reset:how}
.how-grid .step{background:var(--surface)}
.section--surface .how-grid .step{background:var(--bg)}
@media (min-width:600px){.how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.how-grid .step{flex-direction:column;gap:var(--s3)}}
@media (min-width:1024px){.how-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.how-grid .step{padding:var(--s5)}}
.abroad{display:grid;gap:var(--s5)}
@media (min-width:1024px){.abroad{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:center}}

/* ============ 17. Reviews, post cards, prose ============ */
.reviews{display:grid;gap:var(--s3)}
.review{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);margin:0}
.review__stars{display:flex;gap:2px;color:var(--teal)}
.review__stars svg{width:18px;height:18px}
.review__text{font-size:16px;line-height:1.6;color:var(--ink-2)}
.review__author{font-size:14px;color:var(--muted)}
.rating{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
@media (min-width:768px){.reviews{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* phones: swipeable rail instead of a tall stack */
.reviews--rail{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);padding-bottom:4px}
.reviews--rail::-webkit-scrollbar{display:none}
.reviews--rail>*{scroll-snap-align:start}
@media (min-width:768px){.reviews--rail{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin-inline:0;padding-inline:0}}
.rating__score{color:var(--ink);font-weight:600}
/* 4 reviews (home): 2×2 on tablets/laptops, one row of 4 from 1280 */
@media (min-width:768px){.reviews--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.reviews--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.posts{display:grid;gap:var(--s3)}
.post-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--ink);text-decoration:none;min-height:200px;transition:box-shadow .15s,transform .15s}
.post-card:hover{color:var(--ink);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.post-card__tag{align-self:flex-start;font-size:14px;color:var(--muted);background:var(--surface);border-radius:var(--r-pill);padding:4px 12px}
/* category tint on the tag (must beat .post-card__tag{background}) */
.post-card__tag.t-ratss{background:var(--c-ratss)} .post-card__tag.t-shliub{background:var(--c-shliub)} .post-card__tag.t-pasport{background:var(--c-pasport)}
.post-card__tag.t-apostyl{background:var(--c-apostyl)} .post-card__tag.t-kordon{background:var(--c-kordon)} .post-card__tag.t-vodii{background:var(--c-vodii)} .post-card__tag.t-biznes{background:var(--c-biznes)}
.post-card__tag[class*="t-"]{color:var(--ink-3)}
.post-card__title{font-size:19px;font-weight:600;line-height:1.3}
.post-card__meta{margin-top:auto;font-size:14px;color:var(--muted)}
@media (min-width:768px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}

.prose{color:var(--ink-2);font-size:16px;line-height:1.75;max-width:72ch}
.prose>*+*{margin-top:1em}
.prose h2{margin-top:1.6em;color:var(--ink)}
.prose h3{margin-top:1.4em;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose a{font-weight:500}
@media (min-width:1024px){.prose{font-size:17px}}
.seo-block{display:grid;gap:var(--s5)}
@media (min-width:1024px){.seo-block{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7)}}

/* ============ 18. Breadcrumbs + author line ============ */
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.breadcrumbs li{display:inline-flex;align-items:center;gap:6px}
/* separator after the item (not before the next one) so a wrapped line never starts with «/» */
.breadcrumbs li:not(:last-child)::after{content:"/";color:var(--muted-2)}
.breadcrumbs a{color:var(--muted);display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.breadcrumbs a:hover{color:var(--teal)}
.breadcrumbs [aria-current]{color:var(--ink)}
.author-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5);font-size:14px;color:var(--muted);padding-block:var(--s3);border-bottom:1px solid var(--line)}
.author-line__who{display:flex;align-items:center;gap:10px}
.author-line__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--mist)}
.author-line a{font-weight:500;display:inline-flex;align-items:center;min-height:44px}

/* ============ 19. FAQ (<details>) ============ */
.faq{display:flex;flex-direction:column;gap:10px}
.faq__item{background:var(--surface);border-radius:20px}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:56px;
  padding:var(--s4) var(--s4) var(--s4) 20px;cursor:pointer;list-style:none;font-size:17px;font-weight:500;line-height:1.4;border-radius:20px;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--teal)}
.faq__icon{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.faq__icon svg{width:16px;height:16px}
.faq__item[open] .faq__icon{transform:rotate(45deg)}
.faq__a{padding:0 20px 20px;font-size:16px;line-height:1.65;color:var(--muted)}
.faq__a p+p{margin-top:.6em}
@media (min-width:768px){.faq__q{padding:20px 24px}.faq__a{padding:0 24px 22px}}

/* ============ 20. Price table (stacked rows on phones, real table from 600) ============ */
.price-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;font-size:16px}
.price-table caption{caption-side:bottom;text-align:left;padding:var(--s3) 0 0;font-size:14px;color:var(--muted)}
.price-table a{color:var(--ink);text-decoration:none;font-weight:500}
/* service-name links: ≥44px tall tap area without changing the row layout */
.price-table__name a{display:inline-block;padding-block:12px;margin-block:-12px}
.price-table a:hover{color:var(--teal);text-decoration:underline}
.price-table__price{font-weight:600;white-space:nowrap;text-align:right}
.price-table__term{color:var(--muted)}
/* phones: each row = name + price on line 1, term on line 2 */
.price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.price-table{display:flex;flex-direction:column}
.price-table tbody{display:block}
.price-table caption{order:2}
.price-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s3);padding:14px 16px;border-top:1px solid var(--line)}
.price-table tbody tr:first-child{border-top:0}
.price-table tbody tr:nth-child(even){background:var(--surface-2)}
.price-table td{display:block;padding:0}
.price-table__name{grid-column:1;grid-row:1}
.price-table__price{grid-column:2;grid-row:1}
.price-table__term{grid-column:1 / -1;grid-row:2;font-size:14px}
.price-table caption{display:block;padding:var(--s3) 16px;border-top:1px solid var(--line);background:var(--surface-2)}
@media (min-width:600px){
  .price-table{display:table}
  .price-table thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:table-header-group}
  .price-table tbody{display:table-row-group}
  .price-table tr{display:table-row;padding:0}
  .price-table tbody tr:nth-child(even){background:none}
  .price-table th,.price-table td{display:table-cell;padding:14px 20px;text-align:left;vertical-align:top}
  .price-table th{background:var(--surface);font-size:14px;font-weight:500;color:var(--muted);padding-block:12px}
  .price-table td{border-top:1px solid var(--line)}
  .price-table tbody tr:nth-child(even) td{background:var(--surface-2)}
  .price-table th:last-child,.price-table td.price-table__price{text-align:right}
  .price-table__term{font-size:16px;white-space:nowrap}
  .price-table caption{display:table-caption;border-top:0;background:none;padding:var(--s3) 4px 0}
}

/* Unknown price → «Розрахувати вартість» link to the form (inc/price-cta.php; klg.js [data-picker-cta]
   preselects the category). Compact pill that fits a price cell at 360px; ≥44px tap area. */
a.price-cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:8px 14px;
  border:1px solid var(--teal);border-radius:var(--r-pill);background:var(--bg);color:var(--teal);
  font-size:14px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;
  transition:background-color .15s,color .15s;
}
a.price-cta:hover{background:var(--teal);color:var(--on-dark);text-decoration:none}
/* inside a mixed price («…; перше отримання — розрахувати вартість»): a text link with a 44px tall hit area */
a.price-cta--inline{
  display:inline;min-height:0;padding:13px 0;margin:0;border:0;border-radius:0;background:none;
  font:inherit;color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:normal;text-align:inherit;
}
a.price-cta--inline:hover{background:none;color:var(--teal-hover)}
/* phones: a row whose price is (or contains) the CTA → name and term full width, the price on its own line under them
   (grid placement is ignored from 600px, where rows are real table rows) */
.price-table tr:has(a.price-cta) .price-table__name,
.price-table tr:has(a.price-cta) .price-table__term{grid-column:1 / -1}
.price-table tr:has(a.price-cta) .price-table__term{grid-row:2;align-self:start}
.price-table tr:has(a.price-cta) .price-table__price{grid-column:1 / -1;grid-row:3;justify-self:start;align-self:start;text-align:left;margin-top:var(--s2)}
.price-table .price-table__price a.price-cta:not(.price-cta--inline){display:inline-flex;padding:8px 14px;margin:0}
@media (min-width:600px){
  .price-table tr:has(a.price-cta) .price-table__price{margin-top:0;text-align:right}
  .price-table .price-table__price a.price-cta:not(.price-cta--inline){margin-block:-8px}
}
/* unknown term: «строк — після консультації»; the «строк —» prefix only where the table has no «Строк» header */
/* no term («—»): hidden on phones (a lone dash under the name), kept as a table cell from 600px */
.price-table td.price-table__term--none{display:none}
@media (min-width:600px){.term-tbd__k{display:none}.price-table td.price-table__term--none{display:table-cell}}

/* ============ 21. Forms ============ */
.form-block{background:var(--sage);border-radius:var(--r-xl);padding:var(--s5) var(--s4);display:grid;gap:var(--s5);color:var(--sage-ink)}
.form-block__text{display:flex;flex-direction:column;gap:var(--s4)}
.form-block__text .lead{color:var(--sage-ink)}
.form-block__phone{font-size:clamp(24px,1.2rem + 1vw,30px);font-weight:600;color:var(--sage-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;align-self:flex-start}
.form-block__phone:hover{color:var(--teal-hover)}
.form-block__hours{font-size:15px}
@media (min-width:768px){.form-block{padding:var(--s7) var(--s6)}}
@media (min-width:1024px){.form-block{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);padding:56px;align-items:center}}

.form{background:var(--bg);border-radius:var(--r-lg);padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s4);color:var(--ink)}
@media (min-width:600px){.form{padding:var(--s5)}}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:15px;font-weight:500;color:var(--ink-2)}
.field__label .opt{font-weight:400;color:var(--muted)}
.field__input{
  width:100%;min-height:52px;border-radius:var(--r-btn);border:1px solid var(--line-2);background:var(--bg);
  padding:12px 16px;font-size:16px;line-height:1.4;color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
textarea.field__input{min-height:104px;resize:vertical}
select.field__input{appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234B5A61' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.field__input::placeholder{color:var(--muted-2)}
.field__input:hover{border-color:var(--muted-2)}
.field__input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--sage)}
.field__hint{font-size:14px;color:var(--muted)}
.field__error{display:none;font-size:14px;color:var(--danger)}
.field.is-invalid .field__input{border-color:var(--danger);background:var(--danger-bg)}
.field.is-invalid .field__error{display:block}
.form__hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.form__hp *{width:0!important;height:0!important;padding:0!important;border:0!important}
.form{position:relative}
.form__consent{font-size:14px;line-height:1.5;color:var(--muted)}
.form__consent a{color:var(--muted)}
.form__success{display:flex;flex-direction:column;gap:var(--s3);background:var(--success-bg);border-radius:var(--r-md);padding:var(--s5);color:var(--sage-ink)}
.form__success-title{font-size:20px;font-weight:600}
.form.is-sent .form__fields{display:none}

/* ============ 22. Footer + disclaimer ============ */
.site-footer{background:var(--surface-2);border-top:1px solid var(--line);margin-top:var(--s7);padding-block:var(--s7) calc(var(--s6) + 64px);font-size:15px;color:var(--muted)}
/* + 64px: the last lines scroll clear of the Binotel buttons above the dock; from 1024 Binotel sits in the right gutter */
@media (min-width:1024px){.site-footer{padding-bottom:var(--s6)}}
.site-footer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s4)}
.site-footer__brand{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--s2)}
.site-footer__col{display:flex;flex-direction:column;gap:2px;min-width:0}
.site-footer__col--wide{grid-column:1 / -1}
.site-footer__title{font-size:14px;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s2)}
.site-footer__col a{display:flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none;line-height:1.35}
.site-footer__col a:hover{color:var(--teal);text-decoration:underline}
.site-footer__nap{display:flex;flex-direction:column;gap:4px;font-style:normal;line-height:1.5}
.site-footer__phone{font-size:22px;font-weight:600;color:var(--ink)!important}
.site-footer__messengers{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.site-footer__col .site-footer__email{gap:var(--s2);color:var(--ink-2);overflow-wrap:anywhere}
.site-footer__email svg{width:20px;height:20px;flex-shrink:0;color:var(--muted)}
.site-footer__sub{font-size:14px;font-weight:600;color:var(--ink);margin-top:var(--s4)}
/* social profiles (footer, drawer): outline icons, 44px targets */
.socials{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.socials .socials__link{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;flex-shrink:0;
  border-radius:50%;background:var(--bg);border:1px solid var(--line);color:var(--ink-2);text-decoration:none;
  transition:color .15s,border-color .15s,transform .15s;
}
.socials .socials__link:hover{color:var(--teal);border-color:var(--teal);text-decoration:none;transform:translateY(-2px)}
.socials__link svg{width:22px;height:22px}
.site-footer__bottom{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s3);font-size:14px}
.disclaimer{font-size:14px;line-height:1.6;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
/* 768–1279: brand row, 3 link columns, then the contacts as a full-width band in two halves
   (phone + email | messengers + socials) — a narrow 5th column made the icon rows wrap 3 + 1 */
@media (min-width:768px){
  .site-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer__brand{grid-column:1 / -1}
  .site-footer__col--wide{grid-column:auto}
  .site-footer__col--contact{
    grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);
    grid-auto-flow:column;align-content:start;column-gap:var(--s4);padding-top:var(--s5);border-top:1px solid var(--line)
  }
  .site-footer__col--contact .site-footer__messengers{margin-top:0}
  .site-footer__col--contact .site-footer__sub{margin-top:var(--s3)}
}
@media (min-width:1280px){
  .site-footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr}
  .site-footer__brand{grid-column:auto}
  .site-footer__col--contact{grid-column:auto;display:flex;padding-top:0;border-top:0}
  .site-footer__col--contact .site-footer__messengers{margin-top:var(--s2)}
  .site-footer__col--contact .site-footer__sub{margin-top:var(--s4)}
}

/* round messenger buttons (dock, drawer, footer, social column, form block) */
.msg-btn{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);text-decoration:none;transition:transform .15s,box-shadow .15s,background-color .15s;
}
.msg-btn svg{width:24px;height:24px}
.msg-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.msg-btn--tg{color:var(--tg)} .msg-btn--vb{color:var(--vb)} .msg-btn--wa{color:var(--wa)} .msg-btn--fb{color:var(--fb)} .msg-btn--ig{color:var(--ig)}
.msg-btn--tg svg{width:28px;height:28px}
.msg-btn--phone{background:var(--teal);border-color:var(--teal);color:var(--on-dark)}
.msg-btn--phone:hover{background:var(--teal-hover);color:var(--on-dark)}
.msg-btn--phone svg{width:22px;height:22px}
.msg-pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px 8px 10px;border-radius:var(--r-btn);background:var(--bg);color:var(--ink);text-decoration:none;font-weight:500}
.msg-pill svg{width:24px;height:24px}
.msg-pill:hover{color:var(--ink);box-shadow:var(--shadow-1)}
.msg-pill--tg svg{color:var(--tg)} .msg-pill--vb svg{color:var(--vb)} .msg-pill--wa svg{color:var(--wa)} .msg-pill--fb svg{color:var(--fb)} .msg-pill--ig svg{color:var(--ig)}

/* ============ 23. Contact dock (phones & tablets, < 1024) ============ */
.contact-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:var(--s2);
  min-height:calc(var(--dock-h) + env(safe-area-inset-bottom,0px));
  padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:var(--shadow-dock);
}
@supports (backdrop-filter:blur(1px)){.contact-dock{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.contact-dock__call{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:6px 14px;border-radius:var(--r-btn);background:var(--teal);color:var(--on-dark);text-decoration:none;font-weight:600;font-size:16px;white-space:nowrap;
}
.contact-dock__call:hover{background:var(--teal-hover);color:var(--on-dark)}
.contact-dock__call svg{width:20px;height:20px;flex-shrink:0}
.contact-dock .msg-btn{width:52px;height:52px;background:var(--surface);border-color:transparent}
/* 4 messengers + call (Instagram added 2026-10-06): narrower buttons on phones so «Подзвонити» keeps its label */
@media (max-width:429px){.contact-dock{gap:6px;padding-inline:10px}.contact-dock .msg-btn{width:46px;height:46px}.contact-dock__call{gap:8px;padding-inline:10px}}
@media (max-width:374px){.contact-dock .msg-btn{width:44px;height:44px}.contact-dock .msg-btn svg{width:22px;height:22px}.contact-dock__call{gap:6px;padding-inline:8px;font-size:15px}.contact-dock__call svg{width:18px;height:18px}}
@media (min-width:600px){
  .contact-dock{left:50%;right:auto;transform:translateX(-50%);width:min(520px,calc(100% - 32px));bottom:12px;border:1px solid var(--line);border-radius:22px;min-height:var(--dock-h);padding-bottom:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:calc(var(--dock-h) + 24px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:1024px){.contact-dock{display:none}body{padding-bottom:0}}

/* ============ 24. Social column (desktop ≥ 1024) ============ */
.social-col{display:none}
@media (min-width:1024px){
  .social-col{
    position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:90;
    display:flex;flex-direction:column;gap:8px;padding:6px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:var(--shadow-1);
  }
  .social-col .msg-btn{border-color:transparent;background:var(--surface)}
  .social-col .msg-btn--phone{background:var(--teal)}
  /* name tooltip to the left (mouse only) */
  .social-col .msg-btn{position:relative}
  .social-col .msg-btn::after{
    content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;transform:translate(4px,-50%);
    padding:6px 12px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-dark);font-size:14px;font-weight:500;white-space:nowrap;
    pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;
  }
}
@media (min-width:1024px) and (hover:hover){.social-col .msg-btn:hover::after,.social-col .msg-btn:focus-visible::after{opacity:1;transform:translate(0,-50%)}}
/* short desktop windows: pin the column under the header so it never meets Binotel (bottom-right) */
@media (min-width:1024px) and (max-height:620px){.social-col{top:calc(var(--header-h) + 12px);transform:none}}

/* ============ 24a. Back to top ============
   Bottom-left on every width — the right edge belongs to the contacts (social column, Binotel).
   Frosted round button like the social column, teal arrow; the ring fills with the scroll progress
   (--p, 0–100, set by klg.js). Hidden until the visitor has scrolled ~1.5 screens. */
.to-top{
  position:fixed;z-index:85;left:12px;bottom:calc(var(--dock-h) + 12px + env(safe-area-inset-bottom,0px));
  width:48px;height:48px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--teal);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s,visibility 0s linear .2s,background-color .15s,color .15s,border-color .15s;
}
@supports (backdrop-filter:blur(1px)){.to-top{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s,visibility 0s,background-color .15s,color .15s,border-color .15s}
.to-top>svg:not(.to-top__ring){position:relative;width:22px;height:22px;transition:transform .2s}
.to-top:hover{background:var(--teal);border-color:var(--teal);color:var(--on-dark)}
.to-top:hover>svg:not(.to-top__ring){transform:translateY(-2px)}
.to-top:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.to-top__ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);pointer-events:none}
.to-top__track,.to-top__bar{fill:none;stroke-width:2}
.to-top__track{stroke:transparent}
.to-top__bar{stroke:var(--teal);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0));transition:stroke-dashoffset .1s linear}
.to-top:hover .to-top__bar{stroke:var(--on-dark)}
body.no-dock .to-top{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
/* ≥ 768 the dock is a floating pill in the middle — the button sits beside it, on its centre line */
@media (min-width:768px){.to-top{left:16px;bottom:calc(12px + (var(--dock-h) - 48px) / 2 + env(safe-area-inset-bottom,0px))}}
@media (min-width:1024px){.to-top{left:20px;bottom:24px;width:52px;height:52px}}
@media print{.to-top{display:none!important}}
/* CookieYes (injected by GTM / Cloudflare on the real domain): its floating «revisit consent» badge sits in the
   same bottom-left corner (15px, z 999999, off-brand blue) and on phones covers the dock's call button.
   Consent stays reachable through the «Налаштування cookie» link in the footer (.cky-banner-element). */
.cky-btn-revisit-wrapper{display:none!important}

/* ============ 25. Binotel reserved spots + Viber hint ============
   Binotel GetCall + chat buttons are injected by third-party scripts
   (footer, async). Their place is reserved so nothing of ours sits there:
   phones — a row just above the dock, right side; desktop — bottom-right
   corner, below the social column. In the theme the real widget offsets are
   set through Binotel's variables on <html> (see below); the .binotel-spot
   outlines are design-only placeholders.
   Binotel (GetCall + chat, injected by the GTM container) writes its own
   --bwc-* variables inline on <html> (offset 20–30px, green) — inline beats
   normal declarations, so ours are !important (an !important custom property
   wins over a non-important inline one); the buttons are lifted above the dock. */
html{
  --bwc-chat-mob-offset-vertical:calc(var(--dock-h) + 12px + env(safe-area-inset-bottom,0px))!important;
  --bwc-chat-web-offset-vertical:calc(var(--dock-h) + 12px + env(safe-area-inset-bottom,0px))!important;
  --bwc-chat-mob-offset-horizontal:12px!important;
  --bwc-chat-web-offset-horizontal:12px!important;
  --bwc-chat-gc-offset-horizontal:12px!important;
  --bwc-widget-main-color:var(--teal)!important;
  --bwc-widget-secondary-color:var(--teal-hover)!important;
  --bwc-widget-submit-buttons-color:var(--teal)!important;
  --bwc-widget-editor-buttons-color:var(--teal)!important;
  --bwc-widget-text-color:var(--on-dark,#fff)!important;
}
#bwc-widget-action{bottom:calc(var(--dock-h) + 12px + env(safe-area-inset-bottom,0px))!important;right:12px!important}
#bingc-phone-button{bottom:calc(var(--dock-h) + 80px + env(safe-area-inset-bottom,0px))!important;right:12px!important}
@media (min-width:1024px){
  html{
    --bwc-chat-web-offset-vertical:24px!important;
    --bwc-chat-web-offset-horizontal:16px!important;
    --bwc-chat-gc-offset-horizontal:16px!important;
  }
  #bwc-widget-action{bottom:24px!important;right:16px!important}
  #bingc-phone-button{bottom:96px!important;right:16px!important}
}
#bwc-widget-action .bwc-invitations,#bwc-chat-cloud-message{display:none!important} /* auto-popups cover CTAs (sister-project lesson) */
.binotel-spot{position:fixed;z-index:80;display:flex;gap:10px;right:12px;bottom:calc(var(--dock-h) + 12px + env(safe-area-inset-bottom,0px));pointer-events:none}
.binotel-spot__btn{width:48px;height:48px;border-radius:50%;border:2px dashed var(--muted-2);background:rgba(255,255,255,.75)}
@media (min-width:600px){.binotel-spot{bottom:calc(var(--dock-h) + 28px + env(safe-area-inset-bottom,0px))}}
@media (min-width:1024px){
  .binotel-spot{right:16px;bottom:24px;flex-direction:column-reverse;gap:12px}
  .binotel-spot__btn{width:56px;height:56px}
}
.binotel-spot--off{display:none}
/* page previews show the phone spot only in components.html; on pages it is shown from 1024 (right gutter, no overlap) */
.binotel-spot--desk{display:none}
@media (min-width:1024px){.binotel-spot--desk{display:flex}}

.viber-hint{
  position:fixed;left:12px;right:12px;z-index:300;bottom:calc(var(--dock-h) + 16px + env(safe-area-inset-bottom,0px));
  padding:16px 44px 16px 16px;border-radius:var(--r-md);background:var(--ink);color:var(--on-dark);box-shadow:var(--shadow-2);
  font-size:15px;line-height:1.45;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;
}
.viber-hint.is-visible{opacity:1;visibility:visible;transform:none}
.viber-hint p{margin:0 0 10px}
.viber-hint__copy{min-height:44px;border:0;border-radius:var(--r-sm);padding:10px 16px;background:var(--bg);color:var(--ink);font-weight:600}
.viber-hint__close{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;background:none;color:var(--on-dark);font-size:24px;line-height:1}
@media (min-width:1024px){.viber-hint{left:auto;right:88px;bottom:auto;top:50%;max-width:320px}}

/* ============ 26. Notice + check list (shared: hubs, info pages, landings) ============ */
.notice{
  display:flex;gap:var(--s3);align-items:flex-start;max-width:52em;
  background:var(--sage);color:var(--sage-ink);border-radius:var(--r-md);
  padding:var(--s4);font-size:15px;line-height:1.55;
}
.notice svg{width:22px;height:22px;flex-shrink:0;margin-top:1px}
.notice strong{font-weight:600}
.check-list{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.check-list>li{position:relative;padding-left:28px}
.check-list>li::before{
  content:"";position:absolute;left:3px;top:6px;width:13px;height:7px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);
}
.check-list--cols{gap:12px;font-size:16px}
@media (min-width:768px){.check-list--cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--s5)}}

/* ============ 27. Motion + print ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media print{
  .site-header,.cat-bar,.contact-dock,.social-col,.binotel-spot,.drawer,.form-block{display:none!important}
  body{padding:0}
}
body.no-dock{padding-bottom:0}

/* ============ Messenger pill groups (form block, «Дякуємо», 404, landings, «За кордоном») ============
   An even grid sized by its own width (container query), so the 5th messenger never hangs alone:
   narrow boxes — 2 per row (an odd last one takes the row); ≥ 480px — rows of 3, the leftover pair shares its row (5 → 3 + 2). */
.btn-row:has(>.msg-pills){display:block;container-type:inline-size}
.msg-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.msg-pills>.msg-pill{min-width:0}
.msg-pills>.msg-pill svg{flex-shrink:0}
.msg-pills>.msg-pill:last-child:nth-child(odd){grid-column:1 / -1}
@container (min-width:480px){
  .msg-pills{grid-template-columns:repeat(6,minmax(0,1fr))}
  .msg-pills>.msg-pill,.msg-pills>.msg-pill:last-child:nth-child(odd){grid-column:span 2}
  .msg-pills>.msg-pill:nth-last-child(2):nth-child(3n+1),.msg-pills>.msg-pill:last-child:nth-child(3n+2){grid-column:span 3}
  .msg-pills>.msg-pill:last-child:nth-child(3n+1){grid-column:1 / -1}
}