:root{
  /* брендбук GCG 2026 (Alina Synytska) */
  --cream:#FFFFF4; --maroon:#390400; --butter:#FFF09A; --sky:#B7DBF1;
  --moss:#38491D; --meadow:#6E792F; --sapphire:#26449E;

  --bg:var(--cream);
  --surface:#FBF9E9;
  --band:var(--maroon);
  --band-ink:#FFFFF4;
  --band-muted:#C6A9A2;
  --ink:var(--maroon);
  --ink-soft:#6B3A32;
  --muted:#7A5750;
  --rule:rgba(57,4,0,.22);
  --rule-soft:rgba(57,4,0,.11);
  --accent:var(--sky);
  --accent-ink:var(--maroon);
  --shadow:0 24px 60px -40px rgba(57,4,0,.55);
  --step-num:rgba(57,4,0,.17);
  --hl-bg:rgba(183,219,241,.85); --hl-h:.28em;

  --wm:var(--wm-dark);
  /* IvyPresto Headline і Codec Pro підхопляться, щойно підключимо Adobe Fonts */
  /* IvyPresto не має кирилиці — тому вмикається лише на англійській версії,
     де весь текст латиницею. Українська лишається на Prata. */
  --f-display:'Prata', 'Times New Roman', serif;
  --f-body:'Codec Pro', 'Manrope', -apple-system, 'Segoe UI', sans-serif;

  /* типографічна шкала — вісім ступенів на весь сайт.
     Новий елемент бере ступінь звідси, а не вигадує свій clamp. */
  --t-hero:clamp(38px,6.9vw,94px);   /* заголовок героя */
  --t-mega:clamp(46px,7.4vw,108px);  /* цифри результатів */
  --t-h2:clamp(27px,3.8vw,50px);     /* заголовки секцій, теза */
  --t-h3:clamp(21px,2.4vw,29px);     /* назви послуг, людей, кейсів */
  --t-h4:clamp(17px,1.8vw,21px);     /* дрібні заголовки */
  --t-lede:clamp(15px,1.5vw,17.5px); /* підводки */
  --t-body:15px;                     /* основний текст */
  --t-small:12.5px;                  /* підписи, кнопки */
  --t-micro:11px;                    /* кікери, лейбли */
  --pad:clamp(20px, 5vw, 64px);
  --gap:clamp(28px, 4vw, 56px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1C0402; --surface:#2A0603; --band:#390400; --band-ink:#FFFFF4; --band-muted:#C6A9A2;
    --ink:#FFFFF4; --ink-soft:#EADFD9; --muted:#BFA49C;
    --rule:rgba(255,255,244,.24); --rule-soft:rgba(255,255,244,.12);
    --shadow:0 24px 60px -40px rgba(0,0,0,.9);
    --step-num:rgba(183,219,241,.55);
    --hl-bg:rgba(183,219,241,.95); --hl-h:.09em;
    --wm:var(--wm-light);
  }
}
:root[data-theme="dark"]{
  --bg:#1C0402; --surface:#2A0603; --band:#390400; --band-ink:#FFFFF4; --band-muted:#C6A9A2;
  --ink:#FFFFF4; --ink-soft:#EADFD9; --muted:#BFA49C;
  --rule:rgba(255,255,244,.24); --rule-soft:rgba(255,255,244,.12);
  --shadow:0 24px 60px -40px rgba(0,0,0,.9);
  --step-num:rgba(183,219,241,.55);
  --hl-bg:rgba(183,219,241,.95); --hl-h:.09em;
  --wm:var(--wm-light);
}

html[data-lang="en"]{--f-display:'ivypresto-headline', 'Prata', 'Times New Roman', serif}
html[data-lang="en"] h1, html[data-lang="en"] h2{font-weight:300}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:300; font-size:var(--t-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); font-weight:400; text-wrap:balance; margin:0; line-height:1.05}
p{margin:0}

.wrap{width:min(1240px,100%); margin-inline:auto; padding-inline:var(--pad)}
section{padding-block:clamp(48px,6.4vw,96px)}

.eyebrow{
  font-size:var(--t-micro); letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40; background:var(--maroon); color:var(--cream);
}
.nav .brand img{content:var(--wm-light)}
.nav .nav-links a:not(.btn):not(.lang a){color:#D9C2BB}
.nav .nav-links a:not(.btn):not(.lang a):hover{border-bottom-color:var(--cream)}
.nav .lang{border-color:rgba(255,255,244,.3)}
.nav .lang button{color:#CDB3AC}
.nav .lang button[aria-pressed="true"]{background:var(--sky); color:var(--maroon)}
.nav .btn{background:var(--sky); border-color:var(--sky); color:var(--maroon)}
.nav-in{display:flex; align-items:center; gap:clamp(16px,3vw,40px); padding-block:14px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto}
.brand img{height:26px; width:auto; content:var(--wm)}
.nav-links{display:flex; gap:clamp(14px,2vw,30px); margin-inline-start:auto; align-items:center}
.nav-links > a:not(.btn){
  text-decoration:none; font-size:var(--t-small); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); padding-block:6px; border-bottom:1px solid transparent;
}
.nav-links a:not(.btn):hover{border-bottom-color:var(--ink)}
.lang{display:flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden}
.lang button, .lang a{
  font:inherit; font-size:var(--t-micro); letter-spacing:.12em; padding:6px 11px; border:0; cursor:pointer;
  /* перемикач завжди лежить на маруновій шапці, тому колір фіксований,
     а не з токена теми: інакше в темній він втрачає контраст */
  background:transparent; color:#E4D6D0; text-decoration:none; line-height:1.4;
}
.lang{border-color:rgba(255,255,244,.34)}
.lang button[aria-pressed="true"], .lang a[aria-current="page"]{background:var(--cream); color:var(--maroon)}
.lang a:hover{color:var(--cream)}
.lang a[aria-current="page"]:hover{color:var(--maroon)}
.nav .btn{padding:10px 18px; font-size:var(--t-micro)}
@media(max-width:980px){ .nav-links .navlink{display:none} }

/* мобільне меню: бургер у шапці, панель на весь екран */
.burger{display:none; width:44px; height:44px; border:0; background:none; padding:0;
  cursor:pointer; position:relative; flex:none; margin-inline-start:-10px; order:-1}
.burger span{position:absolute; left:10px; right:10px; top:21px; height:1.6px;
  background:var(--cream); border-radius:2px}
.burger span::before, .burger span::after{content:""; position:absolute; left:0; right:0;
  height:1.6px; background:var(--cream); border-radius:2px}
.burger span::before{top:-7px} .burger span::after{top:7px}
@media(max-width:980px){ .burger{display:block} }
.mnav{position:fixed; inset:0; z-index:60; background:var(--maroon); color:var(--cream);
  display:flex; flex-direction:column; padding:max(18px, env(safe-area-inset-top)) 24px 40px;
  opacity:0; pointer-events:none; transition:opacity .28s ease}
body.menu-open .mnav{opacity:1; pointer-events:auto}
.mnav-top{display:flex; justify-content:space-between; align-items:center; min-height:44px}
.mnav-close{width:44px; height:44px; border:0; background:none; padding:0; margin-inline-start:-10px;
  color:var(--cream); font-size:19px; line-height:1; cursor:pointer}
.mnav-wm{height:22px; width:auto; opacity:.9}
.mnav-links{display:grid; gap:4px; margin-top:8vh}
.mnav-links a{font-family:var(--f-display); font-size:clamp(26px,7.2vw,34px); color:var(--cream);
  text-decoration:none; padding-block:10px; border-bottom:1px solid rgba(255,255,244,.12);
  opacity:0; transform:translateY(12px)}
body.menu-open .mnav-links a{opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease}
body.menu-open .mnav-links a:nth-child(1){transition-delay:.05s}
body.menu-open .mnav-links a:nth-child(2){transition-delay:.09s}
body.menu-open .mnav-links a:nth-child(3){transition-delay:.13s}
body.menu-open .mnav-links a:nth-child(4){transition-delay:.17s}
body.menu-open .mnav-links a:nth-child(5){transition-delay:.21s}
body.menu-open .mnav-links a:nth-child(6){transition-delay:.25s}
body.menu-open .mnav-links a:nth-child(7){transition-delay:.29s}
.mnav-foot{margin-top:auto; display:grid; gap:14px}
.mnav-foot .btn{background:var(--sky); border-color:var(--sky); color:var(--maroon); justify-self:start}
.mnav-foot a.tel{color:#E4D6D0; text-decoration:none; font-size:15px}
@media (prefers-reduced-motion: reduce){
  .mnav, .mnav-links a{transition:none}
}

/* свіжі статті на головній: три останні, щоб зі старту було видно глибину */
.fresh .wrap{padding-block:clamp(56px,7vw,96px)}
.fresh-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(20px,2.6vw,36px); border-top:1px solid var(--rule)}
@media(max-width:860px){.fresh-grid{grid-template-columns:1fr}}
.fresh-grid a{display:grid; align-content:start; gap:10px; padding-block:clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--rule-soft); text-decoration:none; color:inherit}
.fresh-grid .cat{font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.fresh-grid h3{font-family:var(--f-display); font-weight:400; font-size:var(--t-h4); margin:0; line-height:1.22}
.fresh-grid p{color:var(--ink-soft); font-size:var(--t-small); margin:0}
.fresh-grid a:hover h3{opacity:.72}
.fresh .link-cta{margin-top:clamp(22px,3vw,34px); display:inline-block}

/* Telegram у шапці — лише літачок, без рамки; на телефоні замість нього нижня плашка */
.nav-tg{display:none; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
  color:var(--sky); text-decoration:none; transition:color .2s ease, transform .2s ease}
.nav-tg svg{width:20px; height:20px; fill:var(--sky)}   /* колір самому знаку, бо посиланням шапки задано бежевий */
.nav-tg:hover{transform:translateY(-1px)} .nav-tg:hover svg{fill:var(--cream)}
@media(min-width:901px){ .nav-tg{display:inline-flex} }

/* кнопка «написати в Telegram» — лише на телефоні, ховається над формою */
.tg-fab{position:fixed; right:16px; bottom:16px; z-index:50; display:none; align-items:center; gap:9px;
  padding:12px 18px 12px 14px; border-radius:999px; background:var(--maroon); color:var(--cream);
  text-decoration:none; font-size:var(--t-small); font-weight:500; letter-spacing:.02em;
  box-shadow:0 12px 30px -10px rgba(57,4,0,.6); transition:opacity .3s ease, transform .3s ease}
.tg-fab svg{width:18px; height:18px; flex:none; fill:var(--sky)}
@media(max-width:900px){ .tg-fab{display:inline-flex} .to-top{bottom:72px} }
.tg-fab.off, body.menu-open .tg-fab{opacity:0; pointer-events:none; transform:translateY(8px)}

/* чек-ліст у статті: масляний блок із сапфіровим текстом — пара з брендбуку.
   Кольори — літерами, а не токенами: блок однаковий у світлій і темній темі,
   і стилі статті (.art p тощо) його не перефарбовують */
.magnet{margin-top:clamp(36px,4vw,54px); padding:clamp(22px,2.8vw,32px); background:#FFF09A; color:#26449E;
  display:grid; gap:8px; justify-items:start}
.magnet .mg-eyebrow, .art .magnet .mg-eyebrow{margin:0; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:#26449E; opacity:.85}
.magnet b, .art .magnet b{font-family:var(--f-display); font-weight:400; font-size:var(--t-h3); line-height:1.2; color:#26449E}
.magnet p, .art .magnet p, .art-body .magnet p{margin:0; font-size:var(--t-small); line-height:1.6; max-width:56ch; color:#26449E}
.magnet .btn, .art .magnet .btn{margin-top:10px; background:#26449E; border-color:#26449E; color:#FFF09A}
.magnet .btn::before{background:#390400}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-body); font-size:var(--t-small); font-weight:500; letter-spacing:.06em;
  padding:15px 26px; border-radius:999px; text-decoration:none; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--bg)}
.btn-accent{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* ---------- hero ---------- */
.hero{
  background:var(--maroon); color:var(--cream); overflow:hidden; position:relative;
  padding-block:0; --hl-bg:rgba(183,219,241,.95); --hl-h:.1em;
}
/* живий фон: рідкі кремові порошинки, що повільно дрейфують і розступаються
   біля курсора. Малюємо самі, без бібліотеки — це 60 рядків і жодного запиту. */
.dust{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.hero-grid{position:relative; z-index:1}
.hero-grid{
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,5vw,70px); align-items:stretch;
  min-height:min(86vh, 900px);
}
.hero-copy{display:flex; flex-direction:column; justify-content:center; padding-block:clamp(64px,8vw,110px)}
.hero .eyebrow{color:#C6A9A2}
.hero .lede{color:#E4D6D0}
.hero .btn{background:var(--sky); border-color:var(--sky); color:var(--maroon)}
.hero .link-cta{
  color:var(--cream); border:1px solid rgba(255,255,244,.42); border-radius:999px;
  padding:15px 26px; align-self:center; transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.hero .link-cta:hover{background:var(--cream); color:var(--maroon); border-color:var(--cream)}
@media (prefers-reduced-motion: reduce){ .hero .link-cta{transition:none} }
.hero-photo{position:relative; margin-inline-end:calc(-1 * (50vw - 50%)); margin-block:0}
.hero-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:52% 24%}
/* рядок вихідних даних під героєм — прийом Porto */
.hero h1{font-size:var(--t-hero); font-weight:400; letter-spacing:-.025em; line-height:1; margin-block:26px 0; text-wrap:pretty}
.hero h1 em{font-style:normal; position:relative; white-space:nowrap}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em; height:var(--hl-h);
  background:var(--hl-bg); z-index:-1;
}
.hero h1 em{z-index:0; isolation:isolate}
.lede{max-width:46ch; margin-top:26px; color:var(--ink-soft); font-size:clamp(15px,1.5vw,17.5px)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.frame{position:relative}
.frame img{width:100%; aspect-ratio:3/4; object-fit:cover; filter:saturate(.94)}
.frame::before{
  content:""; position:absolute; inset:-14px -14px 14px 14px; border:1px solid var(--rule); pointer-events:none;
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; min-height:0}
  /* на телефоні заголовок іде першим: перший екран має казати, хто ми,
     а не показувати фото без підпису */
  .hero-photo{margin-inline:calc(-1 * var(--pad)); height:46vh; min-height:280px}
  .hero-photo img{object-position:50% 12%}
  .hero-copy{padding-block:clamp(40px,8vw,60px) clamp(28px,5vw,44px)}
}


/* ---------- stats strip ---------- */
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); padding-block:clamp(56px,7vw,96px)}
.strip .n{font-family:var(--f-display); font-size:clamp(32px,4vw,52px); line-height:1; font-variant-numeric:tabular-nums}
.strip .c{font-size:var(--t-small); color:var(--muted); margin-top:10px; max-width:22ch}
@media(max-width:760px){.strip{grid-template-columns:repeat(2,1fr); gap:32px}}

/* Стрічка клієнтів. Логотип — не картинка, а маска: колір бере у теми, тому
   однаково працює на кремовому і на темному. Ширину рахуємо з пропорції (--ar),
   бо маска сама свого розміру не знає. */
.clients{--cl-h:clamp(22px,2.6vw,34px); margin-top:calc(-1 * clamp(12px,1.8vw,26px));
  padding-top:0; padding-bottom:clamp(52px,6.5vw,88px); overflow:hidden}
.cl-lead{font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:clamp(18px,2.2vw,28px)}
.mq{display:flex; width:max-content; animation:mq 42s linear infinite}
.mq.still{width:auto; animation:none; flex-wrap:wrap; align-items:center; gap:clamp(38px,6vw,92px)}
.clients:hover .mq, .clients:focus-within .mq{animation-play-state:paused}
.mq-row{display:flex; align-items:center; gap:clamp(38px,6vw,92px); padding-right:clamp(38px,6vw,92px)}
@keyframes mq{to{transform:translateX(-50%)}}
.cl{display:inline-flex; align-items:center; text-decoration:none; border:0}
.cl span{display:block; height:calc(var(--cl-h) * var(--k,1)); width:calc(var(--cl-h) * var(--k,1) * var(--ar));
  background:var(--ink); opacity:.46; transition:opacity .35s ease, transform .35s ease;
  -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat}
.cl:hover span, .cl:focus-visible span{opacity:1; transform:translateY(-2px)}
.cl i{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%)}
@media(prefers-reduced-motion:reduce){.mq{animation:none}}


/* ---------- section head ---------- */
.head{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:end; margin-bottom:clamp(28px,3.6vw,48px)}
.head h2{font-size:var(--t-h2); font-weight:400; letter-spacing:-.01em; margin-top:16px}
.head p{color:var(--ink-soft); max-width:44ch}
@media(max-width:860px){.head{grid-template-columns:1fr}}

/* ---------- pains ---------- */
.pains{display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:0}
.pain{padding:22px 20px 24px; border-top:1px solid var(--rule); border-inline-start:1px solid var(--rule-soft)}
.pain:first-child{border-inline-start:0}
.pain h3{font-size:var(--t-h4); margin-bottom:9px; line-height:1.25}
.pain p{font-size:var(--t-small); line-height:1.55; color:var(--ink-soft)}
@media(max-width:640px){.pain{border-inline-start:0}}

/* ---------- services ---------- */
.svc{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,26px)}
.card{
  background:var(--surface); border:1px solid var(--rule-soft); padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column; min-height:100%;
}
.card.dark{background:var(--band); color:var(--band-ink); border-color:transparent; box-shadow:var(--shadow)}
.card.dark .eyebrow, .card.dark .card-for{color:var(--band-muted)}
.card.dark li::before{background:var(--accent)}
.card h3{font-size:var(--t-h3); margin-top:14px}
.card .tag{color:inherit; opacity:.85; margin-top:12px; font-family:var(--f-display); font-size:var(--t-h4)}
.price{
  display:flex; align-items:baseline; gap:8px; margin-top:22px; padding-top:20px; border-top:1px solid var(--rule-soft);
  font-family:var(--f-display); font-variant-numeric:tabular-nums;
}
.price b{font-size:clamp(28px,3vw,38px); font-weight:400}
.price span{font-family:var(--f-body); font-size:var(--t-small); letter-spacing:.06em; color:var(--muted)}
.card.dark .price span{color:var(--band-muted)}
/* картка без фіксованої ціни: замість числа — рядок про те, як її рахуємо */
.price-note{margin-top:22px; padding-top:20px; border-top:1px solid var(--rule-soft);
  font-size:var(--t-small); color:var(--muted); max-width:32ch; line-height:1.5}
.card ul{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px}
.card li{position:relative; padding-inline-start:18px; font-size:var(--t-body); line-height:1.55}
.card li::before{content:""; position:absolute; inset-inline-start:0; top:.62em; width:7px; height:1px; background:var(--ink)}
.card-for{margin-top:auto; padding-top:24px; font-size:var(--t-small); color:var(--muted)}
.card-link{margin-top:auto; padding-top:26px; align-self:flex-start}
.card-actions{margin-top:auto; padding-top:26px; display:flex; gap:clamp(16px,2vw,28px); flex-wrap:wrap}
.card.dark .card-link{color:var(--band-ink); border-bottom-color:rgba(255,255,244,.4)}
.card.dark .card-link:hover{border-bottom-color:var(--band-ink)}
@media(max-width:860px){.svc{grid-template-columns:1fr}}

/* ---------- add-ons ---------- */
.addons{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:0 clamp(20px,3vw,44px)}
.addon{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding-block:15px; border-bottom:1px solid var(--rule-soft)}
.addon span{font-size:var(--t-body)}
.addon b{font-family:var(--f-display); font-size:19px; font-weight:400; white-space:nowrap; font-variant-numeric:tabular-nums}
.addon-note{margin-top:26px; font-size:var(--t-small); color:var(--muted)}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.step .k{font-family:var(--f-display); font-size:clamp(34px,3.6vw,50px); line-height:.9; color:var(--step-num)}
.band .step .k{color:var(--band-accent)}
.band .step p{color:var(--band-muted)}
.band .pain{border-color:var(--band-rule)}
.band .pain p{color:var(--band-muted)}
.step h3{font-size:var(--t-h4); margin-block:10px 8px}
.step p{font-size:var(--t-body); color:var(--ink-soft); max-width:32ch}
@media(max-width:800px){.steps{grid-template-columns:1fr; gap:34px}}

/* ---------- results band ---------- */
.band .res{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:44px}
.band .res .n{font-family:var(--f-display); font-size:var(--t-mega); line-height:.86; font-weight:400; font-variant-numeric:tabular-nums}
.band .res .n u{text-decoration:none; color:var(--band-accent)}
.band .res p{margin-top:14px; font-size:var(--t-body); color:var(--band-muted); max-width:26ch}
.bar{height:7px; margin-top:20px; background:var(--band-rule); position:relative; overflow:hidden}
.bar::after{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:0;
  background:var(--band-accent); transition:width 1.1s cubic-bezier(.2,.7,.2,1) .15s;
}
.rv.in .bar::after{width:var(--v)}
@media (prefers-reduced-motion: reduce){ .bar::after{transition:none; width:var(--v)} }
.band .fine{margin-top:44px; font-size:var(--t-micro); color:var(--band-muted)}
@media(max-width:800px){.band .res{grid-template-columns:1fr; gap:34px}}

/* ---------- quote ---------- */
.quote{position:relative; overflow:hidden; background:#1B0402; padding-block:0;
  margin-block:clamp(36px,5vw,80px)}   /* власні відступи дає .in — інакше смуга виростає вдвічі */
.quote-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 45%; opacity:.66}
.quote::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(57,4,0,.92) 0%, rgba(57,4,0,.7) 44%, rgba(57,4,0,.12) 100%);
  z-index:1;
}
.quote .in{position:relative; z-index:2; padding-block:clamp(36px,4.2vw,58px)}

/* Відгуки, кейси й команда — картки, що листаються вбік. Прокрутка нативна зі snap:
   працює пальцем, трекпадом і стрілками, без жодної бібліотеки. */
.slider{position:relative}
.slider-track{display:flex; gap:clamp(16px,2.2vw,28px); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; padding-bottom:4px}
.slider-track::-webkit-scrollbar{display:none}
.slider-track > *{scroll-snap-align:start; flex:0 0 auto}
.slider-nav{display:flex; gap:10px; margin-top:clamp(18px,2.2vw,26px)}
.slider-nav button{
  width:42px; height:42px; border-radius:50%; cursor:pointer; background:transparent;
  border:1px solid var(--nav-rule, var(--rule)); color:inherit; font-size:15px; line-height:1;
  display:grid; place-items:center; transition:background .25s ease, opacity .25s ease;
}
.slider-nav button:hover{background:var(--nav-hover, rgba(57,4,0,.07))}
.slider-nav button[disabled]{opacity:.28; cursor:default}
.slider-nav.hide{display:none}
.faq-cta{margin-top:clamp(30px,4vw,50px)}
.to-top{position:fixed; right:18px; bottom:18px; z-index:50; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--rule); background:var(--bg); color:var(--ink);
  font-size:16px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s ease;
  box-shadow:0 8px 24px -12px rgba(57,4,0,.4)}
.to-top.on{opacity:1; pointer-events:auto}

/* підказка під полем: зʼявляється тільки коли номер не проходить перевірку */
.field-err{display:none; font-style:normal; margin-top:8px; font-size:var(--t-micro);
  letter-spacing:.04em; color:#B4401F}
label.bad .field-err{display:block}
label.bad input[name="contact"]{border-bottom-color:#B4401F}
.tel-row{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:end}
.tel-row select{width:auto; min-width:104px; font-variant-numeric:tabular-nums}
/* дві компактні смуги: болі й кроки не потребують повного відступу секції */
#pains, #how, #situations{padding-block:clamp(44px,5.6vw,84px)}
#pains .head, #how .head, #situations .head{margin-bottom:clamp(18px,2.2vw,28px)}
#pains h2, #how h2{font-size:clamp(24px,3vw,40px)}

.quote blockquote{
  margin:0; font-family:var(--f-display); font-weight:400;
  font-size:clamp(20px,2.3vw,30px); line-height:1.3; color:#EDE5DC;
}
.quote-brand{margin-bottom:16px}
.rev{flex-basis:min(84vw, 520px); display:flex; flex-direction:column; gap:8px; margin:0}
.rev .client-logo{height:24px; width:auto}
.quote .slider-nav{--nav-rule:rgba(255,255,244,.32); --nav-hover:rgba(255,255,244,.1); color:var(--cream)}
.client-logo{width:clamp(190px,20vw,268px); height:auto; display:block; opacity:.92}
.quote .mark{font-family:var(--f-display); font-size:clamp(34px,4vw,54px); line-height:.6; color:var(--accent); display:block; margin-bottom:2px}
.quote cite{display:block; margin-top:16px; font-family:var(--f-body); font-style:normal; font-size:var(--t-small); letter-spacing:.1em; text-transform:uppercase; color:#CDBBAE}

/* ---------- magnets ---------- */
.mag{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,26px)}
.mag .m{border:1px solid var(--rule); padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:12px}
.mag .m.sky{background:var(--sky); border-color:transparent}
.mag .m.butter{background:var(--butter); border-color:transparent}
.mag .m.sky *, .mag .m.butter *{color:var(--maroon)}
.mag-photo{margin-top:auto; padding-top:20px}
.mag-photo img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 34%}
.mag .m h3{font-size:var(--t-h3)}
.mag .m p{font-size:var(--t-body); color:var(--ink-soft)}
.word{
  align-self:flex-start; margin-top:8px; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-ink); padding:7px 14px; border-radius:999px; font-weight:500;
}
.m.sky .word, .m.butter .word{background:var(--cream)}
@media(max-width:800px){.mag{grid-template-columns:1fr}}

/* ---------- contact / form ---------- */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,72px); align-items:start}
.contacts{display:grid; gap:20px; margin-top:32px}
.contacts a{display:flex; align-items:baseline; gap:14px; text-decoration:none; padding-bottom:14px; border-bottom:1px solid var(--rule-soft)}
.contacts .l{font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); min-width:88px}
.contacts .v{font-family:var(--f-display); font-size:22px}
form{display:grid; gap:16px; grid-template-columns:1fr 1fr}
form .full{grid-column:1/-1}
label{display:grid; gap:7px; font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
input,select,textarea{
  font:inherit; font-size:var(--t-body); color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--rule); padding:11px 2px; border-radius:0;
}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.35em, calc(100% - 7px) 1.35em; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
select option{background:var(--bg); color:var(--ink)}
textarea{resize:vertical; min-height:92px}
input:focus,select:focus,textarea:focus{outline:0; border-bottom-color:var(--ink)}
.sent{grid-column:1/-1; border:1px solid var(--rule); padding:22px; display:none; gap:14px; flex-direction:column}
.sent.on{display:flex}
.hide{display:none !important}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

.sent-lead{margin-top:12px; font-size:var(--t-body); color:var(--ink-soft); max-width:46ch}
#sent-ok .btn{margin-top:18px}
.sent pre{
  white-space:pre-wrap; font-family:var(--f-body); font-size:var(--t-small); color:var(--ink-soft);
  background:var(--surface); padding:16px; margin:0; max-height:190px; overflow:auto;
}
.sent-actions{display:flex; flex-wrap:wrap; gap:10px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr} form{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--band); color:var(--band-ink); padding-block:clamp(34px,4vw,56px)}
footer .f-top{display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between}
footer img.wm{height:24px; width:auto; content:var(--wm-light)}
footer .f-links{display:flex; flex-wrap:wrap; gap:22px; font-size:var(--t-small)}
footer a{text-decoration:none; opacity:.85} footer a:hover{opacity:1}
footer .f-map{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:clamp(20px,2.4vw,30px); margin-top:clamp(22px,2.6vw,32px); padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid rgba(255,255,244,.16)}
footer .f-map div{display:grid; gap:7px; align-content:start}
footer .f-map-t{font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--band-muted); margin-bottom:4px}
footer .f-map a{font-size:var(--t-small); text-decoration:none; opacity:.8; width:fit-content;
  border-bottom:1px solid transparent}
footer .f-map a:hover{opacity:1; border-bottom-color:rgba(255,255,244,.5)}
footer .f-sign{display:flex; align-items:center; justify-content:center; gap:clamp(20px,3vw,40px);
  margin-top:clamp(22px,2.6vw,32px); padding-top:clamp(20px,2.6vw,28px); border-top:1px solid rgba(255,255,244,.16)}
footer .fine{margin-top:16px; font-size:var(--t-micro); color:var(--band-muted); text-align:center}


/* ---------- кольорові смуги брендбуку (контрастні блоки) ---------- */
.band{background:var(--band); color:var(--band-ink)}
.band .eyebrow{color:var(--band-muted)}
.band .head p{color:var(--band-muted)}
.band-sapphire{--band:#FBF9E9; --band-ink:#390400; --band-muted:#6B3A32; --band-accent:#26449E; --band-rule:rgba(57,4,0,.16)}
.band-butter{--band:#FFFFF4; --band-ink:#390400; --band-muted:#6B3A32; --band-accent:#26449E; --band-rule:rgba(57,4,0,.16)}
.band-moss{--band:#FBF9E9; --band-ink:#390400; --band-muted:#6B3A32; --band-accent:#38491D; --band-rule:rgba(57,4,0,.16)}
.band-maroon{--band:#390400; --band-ink:#FFFFF4; --band-muted:#C6A9A2; --band-accent:#B7DBF1; --band-rule:rgba(255,255,244,.22)}

/* ---------- посилання-дія поруч із головною кнопкою ---------- */
.link-cta{
  align-self:center; text-decoration:none; font-size:var(--t-small); font-weight:500; letter-spacing:.06em;
  border-bottom:1px solid var(--rule); padding-bottom:3px;
}
.link-cta:hover{border-bottom-color:var(--ink)}

/* ---------- липка кнопка на мобільному ---------- */
.sticky-cta{
  opacity:0; visibility:hidden; transform:translateY(100%);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
  position:fixed; inset-inline:0; bottom:0; z-index:60; display:none;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--rule-soft);
}
.sticky-cta .btn{width:100%}
.sticky-cta.two{gap:10px; align-items:center}
.sticky-cta.two .btn{flex:1; width:auto}
.sticky-cta .tg-bar{flex:none; width:50px; height:50px; border-radius:50%; background:var(--maroon);
  display:inline-flex; align-items:center; justify-content:center}
.sticky-cta .tg-bar svg{width:20px; height:20px; fill:var(--sky)}
@media(max-width:760px){ .sticky-cta{display:block} .sticky-cta.two{display:flex} body{padding-bottom:78px} }
.sticky-cta.on{opacity:1; visibility:visible; transform:none}
@media (prefers-reduced-motion: reduce){ .sticky-cta{transition:none} }

/* ---------- якір до ціни ---------- */
.anchor{margin-top:12px; font-size:var(--t-small); line-height:1.5; color:var(--muted)}
.card.dark .anchor{color:var(--band-muted)}

/* ---------- кейси ---------- */
.cases{margin-top:clamp(30px,4vw,46px)}
.cases .case{flex-basis:min(86vw, 440px)}
.band .slider-nav{--nav-rule:var(--band-rule); --nav-hover:rgba(255,255,244,.1)}
.case{border:1px solid var(--band-rule); padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; gap:16px}
.case .tag{font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--band-accent)}
.case h3{font-size:var(--t-h3)}
.case-i{font-family:var(--f-display); font-size:var(--t-body); color:var(--band-accent); letter-spacing:.1em}
.case .tag{display:flex; align-items:baseline; gap:12px}
.case dl{margin:0; display:grid; gap:12px}
.case dt{font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--band-muted)}
.case dd{margin:4px 0 0; font-size:14px; line-height:1.55}
@media(max-width:860px){ .cases{grid-template-columns:1fr} }

/* ---------- галузі ---------- */
.fields{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.field{font-size:var(--t-small); padding:8px 14px; border:1px solid var(--band-rule); border-radius:999px}

/* ---------- питання ---------- */
.faq{margin-top:clamp(26px,3vw,40px); border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{
  cursor:pointer; list-style:none; padding-block:19px; display:flex; gap:18px; align-items:baseline;
  font-family:var(--f-display); font-size:var(--t-h3);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-inline-start:auto; font-size:21px; color:var(--muted); transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:22px; max-width:64ch; color:var(--ink-soft); font-size:var(--t-body)}

/* ---------- конфіденційність ---------- */
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); margin-top:clamp(26px,3vw,38px)}
.trust div{border-top:1px solid var(--rule); padding-top:16px}
.trust h3{font-size:var(--t-h4); margin-bottom:8px}
.trust p{font-size:var(--t-small); color:var(--ink-soft)}
@media(max-width:760px){ .trust{grid-template-columns:1fr} }


/* ---------- секція з фото під напівпрозорим фоном ---------- */
.photo-band{position:relative; overflow:hidden; background:var(--maroon); color:var(--cream)}
.photo-band .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.photo-band::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none}
.photo-band > .wrap{position:relative; z-index:2}
#results.photo-band::after{background:linear-gradient(180deg, rgba(57,4,0,.93) 0%, rgba(57,4,0,.88) 100%)}
#results.photo-band .bg{object-position:50% 40%}
#contact.photo-band::after{background:linear-gradient(180deg, rgba(57,4,0,.95) 0%, rgba(57,4,0,.9) 100%)}
#contact.photo-band .bg{object-position:50% 45%}

/* ---------- стрічка команди ---------- */
.team-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.team-strip img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; filter:saturate(.96)}
@media(max-width:760px){ .team-strip{grid-template-columns:repeat(2,1fr)} }

/* ---------- контакти ---------- */
.contact-band{background:var(--maroon); color:var(--cream)}
.contact-band .eyebrow{color:#C6A9A2}
.contact-in{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(32px,5vw,76px); align-items:start}
.contact-band h2{font-size:clamp(26px,3.1vw,42px); font-weight:400; margin-top:14px; letter-spacing:-.015em; max-width:14ch}
.contact-band .sub{margin-top:14px; color:#E0D0CA; max-width:44ch; font-size:var(--t-small); line-height:1.6}
.people{display:grid; gap:0; margin-top:clamp(20px,2.6vw,30px)}
.person{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 18px;
  text-decoration:none; padding-block:13px; border-top:1px solid rgba(255,255,244,.22);
}
.person:last-of-type{border-bottom:1px solid rgba(255,255,244,.22)}
.person:hover .person-num{color:var(--sky)}
.person-name{font-family:var(--f-display); font-size:var(--t-h4)}
.person-role{grid-column:1; font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:#C6A9A2}
.person-num{grid-column:2; grid-row:1/3; font-size:clamp(15px,1.6vw,18px); font-variant-numeric:tabular-nums; transition:color .2s}
.socials{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.social{
  text-decoration:none; font-size:var(--t-micro); letter-spacing:.06em; padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,244,.3); color:var(--cream);
}
.social:hover{background:var(--cream); color:var(--maroon); border-color:var(--cream)}

.form-card{background:var(--cream); color:var(--maroon); padding:clamp(26px,3.4vw,44px); display:grid; gap:18px}
.form-card label span, .form-card .eyebrow{color:#7A5750}
.form-card input, .form-card select, .form-card textarea{color:var(--maroon); border-bottom-color:rgba(57,4,0,.24)}
.form-card input:focus, .form-card select:focus{border-bottom-color:var(--maroon)}
.form-card option{background:var(--cream); color:var(--maroon)}
.form-card .btn-accent{background:var(--maroon); border-color:var(--maroon); color:var(--cream)}
.form-card .sent{border-color:rgba(57,4,0,.22)}
.form-card 
.sent-lead{margin-top:12px; font-size:var(--t-body); color:var(--ink-soft); max-width:46ch}
#sent-ok .btn{margin-top:18px}
.sent pre{background:#F3EFDD; color:#5A3129}
.form-card .btn{border-color:var(--maroon)}
.form-card .btn-ghost{color:var(--maroon)}
.after{display:grid; gap:12px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,244,.22)}
.after div{display:flex; gap:14px; font-size:var(--t-small); color:#E0D0CA}
.after b{font-family:var(--f-display); font-size:var(--t-body); color:var(--sky); font-weight:400; min-width:1.4ch}
@media(max-width:900px){ .contact-in{grid-template-columns:1fr} }


/* ---------- фірмові елементи з брендбуку ---------- */
/* монограма-водяний знак на темних смугах */
.mono-wm{
  position:absolute; z-index:1; pointer-events:none; opacity:.07;
  width:clamp(220px,26vw,420px); height:auto;
  inset-block-start:50%; inset-inline-end:clamp(-60px,-4vw,-20px); translate:0 -50%;
}
@media (prefers-reduced-motion: no-preference){
  .mono-wm{animation:mono-drift 90s linear infinite}
  @keyframes mono-drift{ to{ rotate:360deg } }
}

/* стрічка, що біжить — прийом із брендбуку (повторюваний текст) */
.ribbon{background:var(--maroon); color:var(--cream); overflow:hidden; padding-block:14px}
.ribbon-track{display:flex; width:max-content; gap:0}
@media (prefers-reduced-motion: no-preference){
  .ribbon-track{animation:ribbon 46s linear infinite}
  @keyframes ribbon{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
}
.ribbon span{
  font-size:var(--t-micro); letter-spacing:.34em; text-transform:uppercase; white-space:nowrap;
  padding-inline:clamp(18px,2.4vw,34px);
}
.ribbon i{align-self:center; width:5px; height:5px; border-radius:50%; background:var(--sky); flex:0 0 auto}

/* підпис-слоган рукописним шрифтом бренду */
.sig{width:clamp(170px,18vw,240px); height:auto; display:block}

/* лого-локап EST · 2025 з брендбуку */
.lockup{display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,26px)}
.lockup span{font-family:var(--f-display); font-size:var(--t-small); letter-spacing:.3em; color:var(--band-muted, #C6A9A2)}
.lockup img{width:clamp(30px,3vw,40px); height:auto}

/* ---------- поява героя ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero-copy > *{opacity:0; transform:translateY(16px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-copy > *:nth-child(1){animation-delay:.05s}
  .hero-copy > *:nth-child(2){animation-delay:.16s}
  .hero-copy > *:nth-child(3){animation-delay:.27s}
  .hero-copy > *:nth-child(4){animation-delay:.36s}
  .hero-copy > *:nth-child(5){animation-delay:.45s}
  .hero-photo img{clip-path:inset(0 0 0 100%); animation:reveal 1.1s cubic-bezier(.2,.7,.2,1) .2s forwards}
    @keyframes rise{ to{opacity:1; transform:none} }
  @keyframes reveal{ to{clip-path:inset(0 0 0 0)} }
}


/* ---------- дрібна моторика ---------- */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* кнопка: заливка вибігає знизу, а не міняється стрибком */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; transform:translateY(101%);
  background:var(--accent); transition:transform .38s cubic-bezier(.2,.7,.2,1);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--accent-ink)}
.hero .btn::before{background:var(--cream)}
.hero .btn:hover{color:var(--maroon)}
.form-card .btn-accent::before{background:var(--sky)}
.form-card .btn-accent:hover{color:var(--maroon)}

/* посилання в навігації: підкреслення виїжджає зліва */
.nav .nav-links a:not(.btn):not(.lang a){position:relative; border-bottom-color:transparent}
.nav .nav-links a:not(.btn)::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.nav .nav-links a:not(.btn):hover::after{transform:scaleX(1)}

/* картки послуг ледь підіймаються */
.card{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.card:hover{transform:translateY(-4px)}

/* питання розкриваються плавно */
.faq details summary{transition:color .25s}
.faq details[open] summary{color:var(--ink)}

/* рядки кейсів підсвічуються при наведенні */
.case{transition:border-color .3s}
.case:hover{border-color:var(--band-accent)}

@media (prefers-reduced-motion: reduce){
  .btn::before, .nav .nav-links a::after, .card{transition:none}
  .card:hover{transform:none}
}


/* ---------- операційні рішення: шари + рядки ---------- */
.ops{display:grid; gap:2px; margin-top:clamp(30px,4vw,46px)}
.opsgroup{display:grid; grid-template-columns:clamp(140px,15vw,200px) 1fr; align-items:stretch}
.opstag{display:flex; align-items:flex-start; padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px)}
.opstag span{font-family:var(--f-display); font-size:var(--t-h4); line-height:1}
.t-sky{background:var(--sky); color:var(--maroon)}
.t-butter{background:var(--butter); color:var(--maroon)}
.t-moss{background:var(--moss); color:var(--cream)}
.t-maroon{background:var(--maroon); color:var(--cream); box-shadow:inset 0 0 0 1px rgba(255,255,244,.18)}
.opsrows{display:grid; border-top:1px solid var(--rule-soft)}
.opsrow{display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,2vw,30px);
        padding:clamp(18px,2vw,26px) 0 clamp(18px,2vw,26px) clamp(20px,2.4vw,34px);
        border-bottom:1px solid var(--rule-soft)}
.opsrows .opsrow:last-child{border-bottom:0}
.opsrow-n{font-family:var(--f-display); font-size:clamp(16px,1.6vw,20px); color:var(--muted);
          font-variant-numeric:tabular-nums; min-width:2ch}
.opsrow h3{font-size:var(--t-h3); margin-bottom:8px}
.opsrow p{font-size:var(--t-body); color:var(--ink-soft); max-width:64ch}
.opsrow.soft h3{font-size:var(--t-h4)}
.opsrow .link-cta{display:inline-block; font-size:var(--t-small)}
.opsrow.soft p{font-size:var(--t-small); color:var(--muted)}
.ops-note{margin-top:26px; font-size:var(--t-small); color:var(--muted); max-width:60ch}
@media(max-width:760px){
  .opsgroup{grid-template-columns:1fr}
  .opstag{padding:14px 18px}
  .opsrow{padding-inline-start:18px}
}


.ops-price{font-family:var(--f-body); font-size:var(--t-small); font-weight:500; letter-spacing:.04em;
  color:var(--maroon); background:var(--butter); padding:5px 10px; border-radius:999px;
  vertical-align:middle; margin-inline-start:10px; white-space:nowrap}

/* ---------- з ким ви працюватимете ---------- */
.people-grid{margin-top:clamp(30px,4vw,46px)}
.people-grid .person-card{flex-basis:clamp(240px,26vw,320px)}
.person-card{display:grid; gap:0}
.person-card figure{margin:0; position:relative; overflow:hidden}
.person-card img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:var(--pos,50% 30%); display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.person-card:hover img{transform:scale(1.03)}
.person-card figcaption{padding-top:18px}
.person-card h3{font-size:var(--t-h3)}
.person-card .role{margin-top:6px; font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.person-card p{margin-top:14px; font-size:var(--t-body); color:var(--ink-soft); max-width:44ch}
@media (prefers-reduced-motion: reduce){ .person-card img, .person-card:hover img{transition:none; transform:none} }


/* ---------- перемикач «хто заповнює» ---------- */
.who{display:flex; gap:8px; padding:4px; border:1px solid rgba(57,4,0,.2); border-radius:999px}
.who label{flex:1; margin:0}
.who input{position:absolute; opacity:0; width:1px; height:1px}
.who span{
  display:block; text-align:center; padding:11px 14px; border-radius:999px; cursor:pointer;
  font-size:var(--t-small); letter-spacing:.02em; color:#7A5750; text-transform:none;
  transition:background .25s ease, color .25s ease;
}
.who input:checked + span{background:var(--maroon); color:var(--cream)}
.who input:focus-visible + span{outline:2px solid var(--sky); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .who span{transition:none} }



/* ---------- шарувата поява ---------- */
.rv{
  opacity:0; transform:translateY(var(--rv-y,18px));
  transition:opacity .95s cubic-bezier(.2,.7,.2,1), transform .95s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--rv-d,0ms);
}
.rv.in{opacity:1; transform:none}
/* запобіжник: якщо скрипт не завантажився, блоки все одно з'являються */
@keyframes rv-show{to{opacity:1; transform:none}}
.rv{animation:rv-show .01s linear 2.5s forwards}

/* ---------- фото, що віддаляється при гортанні ---------- */
[data-zoom]{overflow:hidden}
[data-zoom] > img{will-change:transform}


/* ---------- секційний мета-рядок (прийом Porto) ---------- */
.sec-meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-bottom:clamp(20px,2.6vw,34px); border-top:1px solid var(--rule-soft); padding-top:14px;
}
.sec-meta span{
  font-size:var(--t-micro); letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
}
.sec-meta span:first-child{font-family:var(--f-display); letter-spacing:.1em; font-variant-numeric:tabular-nums}
.band .sec-meta{border-top-color:var(--band-rule, var(--rule-soft))}
.band .sec-meta span{color:var(--band-muted)}
/* контакти — темна смуга, але без токенів .band-*, тож задаємо явно */
.contact-band .sec-meta{border-top-color:rgba(255,255,244,.22)}
.contact-band .sec-meta span{color:#C6A9A2}
@media(max-width:700px){ .sec-meta span:nth-child(3){display:none} }

/* ---------- тонка колонкова сітка на темних смугах ---------- */
.grid-lines{position:relative}
.grid-lines::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0 calc(100% / 6 - 1px),
    rgba(255,255,244,.085) calc(100% / 6 - 1px) calc(100% / 6));
}
.grid-lines > .wrap{position:relative; z-index:2}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1; transform:none; transition:none}
  .btn{transition:none}
}

/* ---- докази на головній ---- */
.proof{padding-top:clamp(56px,7vw,96px)}
.proof-quote{margin:0 0 clamp(26px,3vw,40px); padding:clamp(24px,3vw,40px); background:var(--surface);
  border:1px solid var(--rule-soft); border-radius:18px}
.proof-quote blockquote{margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(20px,2.2vw,28px);
  line-height:1.3; color:var(--ink)}
.proof-quote cite{display:block; margin-top:14px; font-style:normal; font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted)}
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.proof-card{display:block; padding:24px; border:1px solid var(--rule-soft); border-radius:16px; text-decoration:none;
  color:inherit; background:var(--bg); transition:transform .25s ease, border-color .25s ease}
.proof-card:hover{transform:translateY(-3px); border-color:var(--ink)}
.proof-card .tag{display:block; font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.proof-card b{display:block; font-family:var(--f-display); font-weight:400; font-size:21px; line-height:1.2; margin:10px 0 8px}
.proof-card p{margin:0; color:var(--muted); font-size:var(--t-small); line-height:1.55}
.proof > .link-cta{display:inline-block; margin-top:22px}
@media(max-width:900px){ .proof-grid{grid-template-columns:1fr} }

/* ---- ситуації, з якими приходять ---- */
.sit-grid .proof-card{display:flex; flex-direction:column}
.sit-grid .proof-card p{flex:1}
.sit-close{display:block; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule-soft);
  font-size:var(--t-small); line-height:1.45; color:var(--ink)}
.sit-close i{font-style:normal; color:var(--muted)}
@media(max-width:900px) and (min-width:600px){ .sit-grid{grid-template-columns:repeat(2,1fr)} }

/* ---- напрямки на головній: рядок розкривається в послуги й приклад ---- */
#services .head{margin-bottom:clamp(20px,2.6vw,34px)}
.dirs{border-top:1px solid var(--rule)}
.dir{border-bottom:1px solid var(--rule)}
.dir summary{display:grid; grid-template-columns:44px minmax(0,1fr) minmax(0,1.15fr) 28px; align-items:baseline;
  column-gap:clamp(14px,2vw,28px); padding:clamp(18px,2.2vw,26px) 0; cursor:pointer; list-style:none}
.dir summary::-webkit-details-marker{display:none}
.dir summary:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.dir-n{font-family:var(--f-display); font-size:var(--t-small); letter-spacing:.1em; color:var(--muted); font-variant-numeric:tabular-nums}
.dir-t{font-family:var(--f-display); font-size:var(--t-h3); line-height:1.15; transition:opacity .2s ease}
.dir-s{color:var(--muted); font-size:var(--t-body); line-height:1.5}
.dir summary:hover .dir-t{opacity:.7}
.dir-x{position:relative; width:18px; height:18px; justify-self:end; align-self:center; transition:transform .3s ease}
.dir-x::before, .dir-x::after{content:""; position:absolute; left:0; right:0; top:50%; height:1.4px; background:var(--ink)}
.dir-x::after{transform:rotate(90deg)}
.dir[open] .dir-x{transform:rotate(45deg)}
.dir-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(20px,3vw,44px);
  padding:4px 0 clamp(24px,3vw,38px) calc(44px + clamp(14px,2vw,28px))}
.dir-label{margin:0 0 10px; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.dir-list a{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--rule-soft);
  text-decoration:none; color:var(--ink); font-size:var(--t-body); line-height:1.4}
.dir-list a:last-child{border-bottom:1px solid var(--rule-soft)}
.dir-list a i{font-style:normal; color:var(--muted); transition:transform .25s ease}
.dir-list a:hover i{transform:translateX(4px); color:var(--ink)}
.dir-case{padding:clamp(20px,2.4vw,28px); background:var(--surface); border:1px solid var(--rule-soft); border-radius:16px}
.dir-case .tag{display:block; font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.dir-case b{display:block; font-family:var(--f-display); font-weight:400; font-size:21px; line-height:1.2; margin:8px 0 14px}
.dir-case dl{margin:0; display:grid; gap:12px}
.dir-case dt{font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.dir-case dd{margin:4px 0 0; font-size:var(--t-small); line-height:1.55}
.dir-case .link-cta{display:inline-block; margin-top:18px}
@media(max-width:760px){
  .dir summary{grid-template-columns:30px minmax(0,1fr) 22px; row-gap:4px}
  .dir-s{grid-column:2 / 3; grid-row:2}
  .dir-x{grid-column:3; grid-row:1}
  .dir-body{grid-template-columns:1fr; padding-left:0}
}

/* ---- блок ситуацій на бежевій смузі: свої кольори в обох темах ---- */
#situations{--ink:#390400; --muted:#6B3A32; --rule:rgba(57,4,0,.16); --rule-soft:rgba(57,4,0,.14); --bg:#FFFFF4; --surface:#FFFFF4}
#situations .proof-card{background:var(--bg)}
@media(min-width:901px){ #situations .head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }

/* ---- телефон: шапка вміщається на вузьких екранах, поля не масштабують сторінку на iPhone ---- */
@media(max-width:400px){
  .nav-in{gap:10px}
  .nav-links{gap:10px}
  .nav .btn{padding:9px 13px}
  .brand img{height:22px}
  .lang button, .lang a{padding-inline:9px}
}
@media(max-width:345px){ .nav .nav-links > .btn{display:none} }
@media(max-width:400px){ .sticky-cta .btn{white-space:nowrap; padding-inline:14px; font-size:var(--t-micro)} }
@media(max-width:760px){ input,select,textarea{font-size:16px} }