/* «Послуги»: хаб /services/ і сторінки напрямів /services/<напрям>/ — чорний варіант E3 (власник 29.10).
   Розмітку пише v2/services_build.py; тут лише стилі цих п’яти сторінок. */
.sv{--sv-line:color-mix(in srgb,var(--bone) 14%,transparent);--sv-line2:color-mix(in srgb,var(--bone) 16%,transparent);--sv-dim:color-mix(in srgb,var(--bone) 62%,transparent);
 background:var(--graphite);color:var(--bone)}
.sv section{border-bottom:0}
.sv h1,.sv h2,.sv h3{color:inherit;overflow-wrap:normal;hyphens:none}
.sv .sv-ic{display:inline-block;width:1em;height:1em;flex:none;transition:transform .2s}

.sv-btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;font:600 16px/1 var(--font-body);white-space:nowrap;transition:transform .15s,background-color .15s,color .15s}
.sv-btn:hover{text-decoration:none;transform:translateY(-2px)}
.sv-btn--volt{background:var(--volt);color:var(--graphite)}
.sv-btn--ink{background:var(--graphite);color:var(--bone)}
.sv-btn--ghost{border:1.5px solid currentColor}
.sv-btn--ghost:hover{background:var(--bone);color:var(--graphite)}
.sv-k{font:600 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;color:var(--volt)}
.sv-lead{font-size:20px;line-height:1.5;max-width:560px;margin:0;text-wrap:pretty;color:color-mix(in srgb,var(--bone) 80%,transparent)}
.sv-jump,.sv-pills{display:flex;flex-wrap:wrap;gap:10px}
.sv-jump a,.sv-pills a{display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:999px;border:1px solid color-mix(in srgb,var(--bone) 28%,transparent);font:600 16px/1 var(--font-body);transition:border-color .15s,color .15s}
.sv-jump a:hover,.sv-pills a:hover{text-decoration:none;border-color:var(--volt);color:var(--volt)}

/* ---------- хаб */
.sv-hero{padding:44px var(--gutter) 64px}
.sv-eye{font:600 13px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;margin:0 0 26px;color:color-mix(in srgb,var(--bone) 72%,transparent)}
.sv-hero h1{font-size:clamp(80px,9.4vw,152px);line-height:.88;margin:0 0 36px}
.sv-hero h1 span{color:var(--volt)}
.sv-hero .sv-lead{max-width:640px}
.sv-sub{display:flex;justify-content:space-between;align-items:end;gap:48px;border-top:1px solid color-mix(in srgb,var(--bone) 18%,transparent);padding-top:26px}

.sv-row{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center;padding:56px var(--gutter);border-top:1px solid var(--sv-line)}
.sv-row.sv-flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.sv-row.sv-flip .sv-vis{order:2}
.sv-anc{position:absolute;top:0;left:0}
.sv-vis{position:relative;min-width:0}
.sv-n{font:600 14px/1 var(--font-body);color:var(--volt);letter-spacing:.06em}
.sv-row h2{font-size:72px;line-height:.92;margin:14px 0}
.sv-row h2 a:hover{text-decoration:none;color:var(--volt)}
.sv-line{font-size:18px;line-height:1.5;margin:0 0 26px;color:color-mix(in srgb,var(--bone) 78%,transparent)}
.sv-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--sv-line2)}
.sv-list li{padding:15px 0 14px;border-bottom:1px solid var(--sv-line2)}
.sv-list li>a{font:600 22px/1.2 var(--font-body);letter-spacing:-.01em}
.sv-list li>a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.sv-list p{margin:6px 0 0;font-size:15px;line-height:1.45;color:color-mix(in srgb,var(--bone) 58%,transparent)}
.sv-all{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:600;color:var(--volt);border-bottom:1.5px solid;padding-bottom:3px}
.sv-all:hover{text-decoration:none}
.sv-all:hover .sv-ic{transform:translateX(4px)}

/* докази: фото кейсу, стрічка кейсів, панелі */
.sv-pic{position:relative;display:block;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:#000}
.sv-pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
a.sv-pic:hover{text-decoration:none}
a.sv-pic:hover img{transform:scale(1.03)}
.sv-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(13,13,15,.86));pointer-events:none}
.sv-pic--bare::after{content:none}   /* фото без підпису (PR Marathon) — затемнення знизу не потрібне */
.sv-tag{position:absolute;z-index:2;left:22px;top:20px;font:600 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;border-radius:999px;background:var(--graphite);color:var(--bone)}
.sv-pic-cap{position:absolute;z-index:2;left:26px;right:26px;bottom:22px;font-size:16px;color:color-mix(in srgb,var(--bone) 86%,transparent)}
.sv-pic-cap b{display:block;font:700 40px/1 var(--font-display);text-transform:uppercase;color:#fff;margin-bottom:8px}
.sv-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.sv-mini img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-bottom:8px}
.sv-mini b{display:block;font:600 13px/1.2 var(--font-body);letter-spacing:.04em}
.sv-mini span{display:block;text-wrap:balance;font-size:13px;color:color-mix(in srgb,var(--bone) 60%,transparent)}
.sv-mini:hover{text-decoration:none}
.sv-mini:hover b{text-decoration:underline;text-underline-offset:4px}
.sv-panel{position:relative;border-radius:22px;aspect-ratio:16/9;overflow:hidden;background:color-mix(in srgb,var(--bone) 5%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 10%,transparent)}
/* стратегія: клієнти в рамці. Власник 29.10 про лупу: «картинка ні до чого»; 31.10: «квадрат — обмежувач, всередині літають логотипи»,
   «стилістика як на головному екрані, без підкладок, такого ж кольору» — тому знаки як у смузі клієнтів головної (.client-row у styles.css):
   маска, пофарбована кольором тексту (кістяний, прозорість .6), при наведенні — повна яскравість і салатовий. --ar — пропорція знака, --k — оптична вага.
   Без JS знаки стоять рядком по центру; strat-logos.js додає .is-live — знаки стають absolute й літають (позиція через transform) */
.sv-panel.sv-fly{aspect-ratio:16/9;container-type:inline-size}
.sv-panel.sv-fly--page{max-width:1100px;aspect-ratio:2/1}
/* поле польоту: на хабі — під міткою «Кейси · стратегія» (інакше знаки пролітали під нею), на сторінці напряму мітки немає */
.sv-fly ul{--logo-h:clamp(24px,6.6cqi,60px);position:absolute;inset:56px 12px 12px;margin:0;padding:0 12px 12px;list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 40px}
.sv-fly--page ul{top:12px;padding-top:12px}
.sv-fly.is-live ul{padding:0}
.sv-fl{--k:1;color:var(--bone);opacity:.6;transition:opacity var(--motion-fast),color var(--motion-fast);cursor:default}
.sv-fl:hover{opacity:1;color:var(--acid)}
.sv-fly.is-live .sv-fl{position:absolute;left:0;top:0;will-change:transform}
.sv-fl--word{font-size:max(12px,calc(var(--logo-h)*.55));font-weight:600;line-height:1.2;letter-spacing:.1em;white-space:nowrap}
@supports ((mask-image:url(#m)) or (-webkit-mask-image:url(#m))) and (width:1cqi){   /* без масок чи cqi лишається назва текстом */
 .sv-fl--logo{width:calc(var(--logo-h)*var(--k)*var(--ar));height:calc(var(--logo-h)*var(--k));
  background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
 .sv-fl--logo>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* дизайн: дошка айдентики ROSIE82 (тимчасово, поки немає робіт дизайн-команди) */
.sv-idb{display:grid;grid-template-columns:1.25fr 1fr}
.sv-idb-logo{position:relative;display:flex;align-items:center;justify-content:center;background:var(--bone);padding:40px}
.sv-idb-logo img{width:88%;height:auto}
.sv-idb-spec{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:30px 34px}
.sv-idb-sw{display:flex;gap:12px}
.sv-idb-sw i{width:52px;height:52px;border-radius:50%;border:1px solid color-mix(in srgb,var(--bone) 25%,transparent)}
.sv-idb-ty b{display:block;font:700 54px/1 var(--font-display);text-transform:uppercase}
.sv-idb-ty span{display:block;font:800 34px/1.1 var(--font-body);letter-spacing:-.03em;margin-top:6px}
.sv-idb-ty small{display:block;font-size:13px;color:color-mix(in srgb,var(--bone) 60%,transparent);margin-top:8px}
.sv-idb-cap{position:absolute;left:22px;bottom:18px;font:600 15px/1.3 var(--font-body);color:var(--graphite)}

.sv-end{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:end;padding:88px var(--gutter);border-top:1px solid var(--sv-line)}
.sv-end .sv-k{font-size:13px;letter-spacing:.14em;margin-bottom:22px;color:color-mix(in srgb,var(--bone) 70%,transparent)}
.sv-end h2{font-size:clamp(56px,6vw,96px);line-height:.92;margin:0}
.sv-end p{font-size:19px;line-height:1.5;margin:0 0 28px;color:color-mix(in srgb,var(--bone) 82%,transparent);max-width:520px}
.sv-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- сторінка напряму */
.sv-dir h2{font-size:52px;line-height:1;margin:0 0 28px}
.sv-crumbs{display:flex;gap:10px;padding:28px var(--gutter) 0;font-size:14px;color:color-mix(in srgb,var(--bone) 60%,transparent)}
.sv-crumbs [aria-current]{color:var(--bone);font-weight:600}
.sv-dhero{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 48px;align-items:center;padding:26px var(--gutter) 56px}
.sv-dhero h1{grid-column:1/-1;font-size:clamp(96px,11vw,176px);line-height:.86;margin:0}
.sv-dhero-r{max-width:640px}
.sv-dhero .sv-lead{max-width:none;margin:0 0 22px;color:color-mix(in srgb,var(--bone) 82%,transparent)}
.sv-pills{gap:8px;margin-bottom:24px}
.sv-pills a{height:40px;padding:0 16px;font-size:14px}
.sv-sym{align-self:center;justify-self:center;margin-top:-150px;filter:drop-shadow(0 0 40px color-mix(in srgb,var(--volt) 22%,transparent))}
.sv .sv-sym .sv-obj{width:300px;height:300px}
.sv-q,.sv-prod,.sv-cases,.sv-steps,.sv-faq,.sv-other{position:relative;padding:64px var(--gutter);border-top:1px solid var(--sv-line)}
.sv-qg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sv-qg a{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:168px;padding:26px 28px;border-radius:20px;
 background:color-mix(in srgb,var(--bone) 6%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 12%,transparent);transition:border-color .15s,transform .15s}
.sv-qg a:nth-child(-n+3){background:var(--volt);color:var(--graphite);border-color:var(--volt)}
.sv-qg a:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--bone)}
.sv-qg b{font:700 38px/1.08 var(--font-display);text-transform:uppercase;text-wrap:balance}
.sv-qg span{font:600 14px/1 var(--font-body);opacity:.75}
.sv-prod article{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3.5fr) minmax(0,3.5fr);gap:40px;padding:28px 0;border-top:1px solid var(--sv-line2)}
.sv-prod h3{font:700 44px/1 var(--font-display);text-transform:uppercase;margin:0 0 12px}
.sv-ph p{margin:0;font-size:17px;line-height:1.5;color:color-mix(in srgb,var(--bone) 74%,transparent);max-width:520px}
.sv-prod ul{list-style:none;margin:0;padding:0}
.sv-prod li{padding:5px 0;font-size:17px}
.sv-res{margin:0;font:500 19px/1.4 var(--font-body)}
.sv-cg{display:grid;gap:16px}
.sv-cases .sv-pic,.sv-cases .sv-idb{max-width:1100px}
.sv-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.sv-steps li{display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:150px;padding:22px;border:1px solid var(--sv-line2);border-radius:20px;font:600 19px/1.3 var(--font-body)}
.sv-steps li span{font:700 40px/1 var(--font-display);color:var(--volt)}
.sv-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px}
.sv-faq details{border-bottom:1px solid var(--sv-line2);padding:18px 0}
.sv-faq summary{position:relative;padding-right:40px;font:600 20px/1.3 var(--font-body);list-style:none;cursor:pointer}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary::after{content:"+";position:absolute;right:4px;top:-2px;font:400 28px/1 var(--font-body);color:var(--volt);transition:transform .2s}
.sv-faq details[open] summary::after{transform:rotate(45deg)}
.sv-faq details p{margin:12px 0 0;max-width:720px;font-size:17px;line-height:1.55;color:color-mix(in srgb,var(--bone) 72%,transparent)}
.sv-faq details a{text-decoration:underline;text-underline-offset:3px;color:var(--bone)}
.sv-og{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sv-og a{padding:26px;border-radius:20px;border:1px solid color-mix(in srgb,var(--bone) 22%,transparent);transition:border-color .15s}
.sv-og a:hover{text-decoration:none;border-color:var(--volt)}
.sv-og b{display:block;font:700 34px/1 var(--font-display);text-transform:uppercase;margin-bottom:10px}
.sv-og span{font-size:15px;color:var(--sv-dim)}
/* форма: фіолетова, текст білий; салатового на фіолетовому немає */
.sv-form{padding:64px var(--gutter);background:var(--violet);color:#fff;
 --text:#fff;--field-bg:transparent;--field-line:rgba(255,255,255,.6);--field-line-focus:#fff;--accent:#fff;--on-accent:var(--violet);--focus:#fff}
.sv-dir .sv-form h2{color:#fff}
.sv-lf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:20px 28px;align-items:start}
.sv-lf .g-field{color:#fff}
.sv-lf .g-field::placeholder{color:#fff;opacity:.7}
.sv-lf .g-error{color:#fff}
.sv-lf .sv-btn{margin-top:18px}
.sv-lf .consent,.sv-lf .lead-status{grid-column:1/-1}
.sv-form .lead-thanks a{text-decoration:underline;text-underline-offset:3px}

@media(max-width:1100px){
 .sv-row,.sv-row.sv-flip{grid-template-columns:minmax(0,1fr);gap:32px}
 .sv-row .sv-vis,.sv-row.sv-flip .sv-vis{order:2}
 .sv-sub{flex-direction:column;align-items:flex-start;gap:24px}
 .sv-end{grid-template-columns:minmax(0,1fr);gap:28px}
 .sv-dhero{grid-template-columns:minmax(0,1fr) 220px}
 .sv .sv-sym .sv-obj{width:220px;height:220px}
 .sv-sym{margin-top:-60px}
 .sv-qg{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sv-prod article{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
 .sv-ph{grid-column:1/-1}
 .sv-faq{grid-template-columns:minmax(0,1fr);gap:8px}
 .sv-lf{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sv-lf .sv-lf-w{grid-column:1/-1}
 .sv-lf .sv-btn{justify-self:start;margin-top:0}
}
@media(max-width:800px){
 .sv-hero{padding:32px var(--gutter) 48px}
 .sv-hero h1{font-size:clamp(48px,12.5vw,96px);margin-bottom:28px}
 .sv-lead{font-size:18px}
 .sv-row{padding:44px var(--gutter)}
 .sv-row h2{font-size:56px}
 .sv-panel{aspect-ratio:auto}
 .sv-idb{grid-template-columns:minmax(0,1fr)}
 .sv-idb-logo{padding:72px 28px 64px}
 .sv-idb-logo img{width:min(88%,420px)}
 .sv-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
 .sv-pic-cap b{font-size:30px}
 .sv-end{padding:64px var(--gutter)}
 .sv-end h2{font-size:clamp(44px,11vw,72px)}
 .sv-dir h2{font-size:40px;margin-bottom:22px}
 .sv-dhero{grid-template-columns:minmax(0,1fr);padding-bottom:44px}
 .sv-dhero h1{font-size:clamp(56px,17vw,110px)}
 .sv-sym{display:none}
 .sv-q,.sv-prod,.sv-cases,.sv-steps,.sv-faq,.sv-other{padding:48px var(--gutter)}
 .sv-qg{grid-template-columns:minmax(0,1fr);gap:12px}
 .sv-qg a{min-height:0;gap:18px;padding:22px}
 .sv-qg b{font-size:28px}
 .sv-prod article{grid-template-columns:minmax(0,1fr);gap:16px}
 .sv-prod h3{font-size:36px}
 .sv-steps ol{grid-template-columns:minmax(0,1fr);gap:10px}
 .sv-steps li{flex-direction:row;align-items:center;justify-content:flex-start;min-height:0;padding:18px 20px}
 .sv-steps li span{font-size:32px;min-width:44px}
 .sv-og{grid-template-columns:minmax(0,1fr);gap:12px}
 .sv-form{padding:48px var(--gutter)}
 .sv-lf{grid-template-columns:minmax(0,1fr)}
 .sv-lf .sv-btn{justify-self:stretch;justify-content:center}
}
@media(max-width:540px){
 .sv-jump a{height:42px;padding:0 16px;font-size:15px}
 .sv-row h2{font-size:48px}
 .sv-list li>a{font-size:20px}
 .sv-idb-ty b{font-size:40px}
 .sv-idb-ty span{font-size:26px}
 .sv-pic{aspect-ratio:4/3}
 .sv-tag{left:14px;top:14px}
 .sv-pic-cap{left:16px;right:16px;bottom:14px;font-size:14px}
 .sv-pic-cap b{font-size:24px;margin-bottom:6px}
 .sv-faq summary{font-size:18px}
}
@media(max-width:800px){
 .sv-panel.sv-fly{aspect-ratio:4/3}
}
@media(max-width:640px){.sv-fl--word{letter-spacing:.07em}}
@media(max-width:540px){
 .sv-panel.sv-fly{aspect-ratio:1/1}
 .sv-fly ul{inset:48px 10px 10px}
 .sv-fly--page ul{top:10px}
}
@media(prefers-reduced-motion:reduce){
 .sv-btn,.sv-qg a,.sv-pic img,.sv .sv-ic{transition:none}
 .sv-btn:hover,.sv-qg a:hover{transform:none}
 a.sv-pic:hover img{transform:none}
}
/* ===== J5: хаб «Послуги» (05.11, services_hub.py) ===== */
.z5-sec{padding:48px var(--gutter);border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent)}
.z5-k{font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--volt);margin:0 0 18px}
.z5-tg{gap:10px}.z5-tgi{width:18px;height:18px;flex:none}.z5-nw{white-space:nowrap}
.z5-tg--dark{background:var(--graphite);color:var(--volt);border:1px solid var(--graphite)}
.z5-tg--dark:hover{background:#000;color:var(--volt)}
.z5-hero{padding-bottom:56px}.z5-hero .sv-sub{padding-top:52px}   /* власник 05.11: «нет воздуха» — однаково над і під карткою */
.z5-hero .sv-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.z5-offer{display:flex;flex-direction:column;gap:14px;padding:32px 36px;border-radius:22px;background:var(--volt);color:var(--graphite)}
.z5-offer h2{margin:0;font:700 44px/.95 var(--font-display);text-transform:uppercase}
.z5-offer p{margin:0;font-size:16px;line-height:1.45}
.z5-eyebrow{font:700 12px/1 var(--font-body)!important;letter-spacing:.08em;text-transform:uppercase}
.z5-offer .z5-tg{align-self:flex-start;margin-top:6px}
.z5-small{font-size:13px!important}.z5-small a{color:var(--graphite)}
.z5-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;padding:16px var(--gutter);background:var(--bone);color:var(--graphite)}
.z5-strip figure{display:flex;gap:14px;align-items:center;margin:0}
.z5-strip .p5-ava{flex:none;width:48px;height:48px;border-radius:50%;background:var(--violet);display:grid;place-items:center}
.z5-strip .p5-ava img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--bone)}
.z5-strip blockquote{margin:0;padding:0;font:600 16px/1.3 var(--font-body)}.z5-strip blockquote::before{display:none}
.z5-strip figcaption{margin-top:3px;font:400 12px/1.3 var(--font-body);color:color-mix(in srgb,var(--graphite) 72%,transparent)}
.z5-strip dl{display:contents}.z5-strip dl div{display:flex;flex-direction:column;gap:5px}
.z5-strip dt{font:700 28px/1 var(--font-display);color:var(--violet)}.z5-strip dd{margin:0;font-size:12px;color:color-mix(in srgb,var(--graphite) 72%,transparent)}
.z5-strip .p5-up{font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);text-decoration:none}
.z5-strip .p5-up:hover{text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:4px}
.z5-tg4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:14px;row-gap:12px}
/* картки на спільній сітці: ім’я, посада, «з ким працював» і бренди починаються на одній висоті у всіх (власник 05.11: «лестница») */
.z5-p{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:12px;align-content:start;border-radius:18px;padding:24px;background:color-mix(in srgb,var(--bone) 5%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 10%,transparent)}
.z5-ph{display:flex;align-items:center;gap:14px}.z5-ph img{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.z5-ph b{font-size:20px;line-height:1.15}
.z5-p em{font-style:normal;font-size:13.5px;line-height:1.4;color:var(--volt)}
.z5-wl{margin:0;align-self:end;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--bone) 55%,transparent)}
.z5-br{margin:0;font-size:13.5px;line-height:1.55;color:color-mix(in srgb,var(--bone) 82%,transparent)}
.z5-qh{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4px 14px;align-items:end;margin-bottom:26px}.z5-qh .z5-k{grid-column:1/-1}
.z5-qh h2{font:700 64px/.92 var(--font-display);text-transform:uppercase;margin:0}.z5-qh p:last-child{color:color-mix(in srgb,var(--bone) 72%,transparent);margin:0;max-width:520px}
.z5-qg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:14px;align-items:stretch}
.z5-drum{position:relative;contain:size;min-height:380px;overflow-y:auto;scrollbar-width:none;outline:0;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.z5-drum::-webkit-scrollbar{display:none}
@media (hover:hover){.z5-drum{cursor:grab}.z5-drum.drag{cursor:grabbing;user-select:none}.z5-drum.drag button{pointer-events:none}}
@media (hover:none){.z5-hint{display:none}}
.z5-chips{display:grid;gap:8px;align-content:start}
.z5-chips button{all:unset;box-sizing:border-box;cursor:pointer;padding:16px 18px;border-radius:14px;font:700 20px/1.05 var(--font-display);text-transform:uppercase;color:var(--bone);border:1px solid color-mix(in srgb,var(--bone) 18%,transparent)}
.z5-chips button:hover{border-color:var(--volt)}.z5-chips button:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
.z5-chips button.on{background:var(--volt);color:var(--graphite);border-color:var(--volt)}
.z5-qa{border-radius:20px;padding:26px;border:2px solid var(--volt);display:flex;flex-direction:column;gap:12px}
.z5-qa .z5-k{margin:0}.z5-rec{margin:0;font:700 44px/.95 var(--font-display);text-transform:uppercase}
.z5-qd{margin:0;font-size:16px;line-height:1.5}.z5-qm{margin:0;font-size:13px;color:var(--volt);font-weight:600}
.z5-lead{margin:0;display:flex;align-items:center;gap:12px;font-size:15px}
.z5-av{display:flex;flex:none}.z5-av img{width:40px;height:40px;border-radius:50%;object-fit:cover;filter:grayscale(1);border:2px solid var(--graphite)}.z5-av img+img{margin-left:-12px}
.z5-qa .z5-tg{align-self:flex-start}
.z5-micro{margin:0;font-size:13px;color:color-mix(in srgb,var(--bone) 62%,transparent)}.z5-micro a{color:var(--bone)}
.z5-next{margin:4px 0 0;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent);font-size:13px;color:color-mix(in srgb,var(--bone) 55%,transparent)}
.z5-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.z5-tile{position:relative;border-radius:22px;padding:30px;background:color-mix(in srgb,var(--bone) 5%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 10%,transparent);display:flex;flex-direction:column}
.z5-n{font:600 14px/1 var(--font-body);color:var(--volt);letter-spacing:.06em}
.z5-tile h2{font:700 60px/.9 var(--font-display);text-transform:uppercase;margin:10px 0 12px}.z5-tile h2 a{color:inherit;text-decoration:none}
.z5-tl{color:color-mix(in srgb,var(--bone) 75%,transparent);margin:0 0 18px}
.z5-tile ul{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.z5-tile li{padding:14px 0;border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent)}
.z5-tile li>a{display:block;font-size:19px;font-weight:600;color:var(--bone);text-decoration:none;margin-bottom:4px}
.z5-tile li>a:hover{text-decoration:underline;text-underline-offset:4px}
.z5-tile li span{font-size:13px;color:color-mix(in srgb,var(--bone) 60%,transparent)}
.z5-tf{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.z5-get{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;background:var(--bone);color:var(--graphite);border-top:0}
.z5-get .z5-k{color:var(--violet)}.z5-get h2{font:700 64px/.92 var(--font-display);text-transform:uppercase;margin:0}
.z5-get div>p:last-child{margin:18px 0 0;font-size:17px;line-height:1.5;max-width:460px}
.z5-get ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.z5-get li{display:flex;gap:14px;padding:18px 20px;border-radius:16px;background:#fff;font-size:16px;line-height:1.45;color:color-mix(in srgb,var(--graphite) 75%,transparent)}
.z5-get li b{color:var(--graphite)}.z5-get li span{flex:1;min-width:0}
.z5-tick{flex:none;width:24px;height:24px;margin-top:1px;color:var(--violet)}
.z5-tick path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.z5-end{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;align-items:stretch;padding:64px var(--gutter);border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent)}
.z5-end h2{font:700 76px/.9 var(--font-display);text-transform:uppercase;margin:12px 0 0}
.z5-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.z5-tgcard{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:22px;background:var(--volt);color:var(--graphite)}
.z5-tgcard .z5-k{color:var(--graphite);margin:0}.z5-tgcard h3{margin:0;font:700 40px/1 var(--font-display);text-transform:uppercase}.z5-tgcard p{margin:0;font-size:15px;line-height:1.45}
.z5-tgcard .z5-tg{align-self:flex-start}.z5-tghow{margin-top:auto!important;padding-top:16px;border-top:1px solid rgba(13,13,15,.18);font-size:14px!important;line-height:1.5!important}
.z5-tghow b{display:block;margin-bottom:2px}
.z5-form{display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:22px;background:color-mix(in srgb,var(--bone) 5%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 18%,transparent)}
.z5-form .z5-k{margin:0 0 6px}.z5-fb{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}.z5-fb .consent{margin:0}   /* власник 05.11: кнопки обох карток — на одній лінії внизу */
.z5-ch{border:0;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:8px}.z5-ch legend{margin-bottom:8px}
.z5-ch label{cursor:pointer}.z5-ch input{position:absolute;opacity:0;pointer-events:none}
.z5-ch span{display:inline-block;padding:8px 12px;border-radius:999px;font-size:13px;border:1px solid color-mix(in srgb,var(--bone) 22%,transparent)}
.z5-ch input:checked+span{background:var(--volt);color:var(--graphite);border-color:var(--volt)}
.z5-ch input:focus-visible+span{outline:2px solid var(--volt);outline-offset:2px}
.z5-eh{display:flex;flex-direction:column}.z5-eh h2{margin-bottom:36px}
.z5-faq{margin:auto 0 0;display:grid;gap:0;max-width:460px}   /* якщо картки вищі — відповіді опускаються, низ збігається */
.z5-faq div{padding:16px 0;border-top:1px solid color-mix(in srgb,var(--bone) 16%,transparent);display:grid;gap:6px}
.z5-faq div:last-child{padding-bottom:0}   /* низ карток праворуч = рядок «Протягом години.» (власник 05.11) */
.z5-faq dt{font-size:16px;font-weight:700}.z5-faq dd{margin:0;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--bone) 75%,transparent)}
.z5-bar{display:none}
@media (max-width:1380px){.z5-strip{gap:12px 22px}.z5-strip dt{font-size:22px}.z5-strip blockquote{font-size:14px}.z5-strip .p5-ava{width:42px;height:42px}.z5-strip .p5-ava img{width:36px;height:36px}}
@media (max-width:1180px){.z5-strip figure{flex-basis:100%}}   /* відгук — окремим рядком, цифри й посилання — рівно під ним */
@media (max-width:1100px){.z5-tg4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){
 .z5-hero .sv-sub,.z5-qg,.z5-qh,.z5-get,.z5-end,.z5-two,.z5-tiles,.z5-tg4,.z5-tile ul{grid-template-columns:minmax(0,1fr)}
 .z5-drum{contain:none;height:300px;min-height:0}
 .z5-eh{display:contents}.z5-two{order:2}.z5-faq{order:3;margin-top:8px}.z5-p{grid-row:auto;display:flex;flex-direction:column}
 .z5-hero .sv-sub{gap:24px}.z5-offer{order:-1;padding:22px}.z5-offer h2{font-size:34px}
 .z5-qh h2,.z5-get h2,.z5-end h2{font-size:44px}.z5-tile h2{font-size:44px}.z5-rec{font-size:34px}.z5-tgcard h3{font-size:34px}
 .z5-strip{gap:12px 24px}.z5-strip .p5-up{margin-left:0}
 .z5-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--graphite);border-top:1px solid color-mix(in srgb,var(--bone) 16%,transparent);transform:translateY(110%);transition:transform .25s}
 .z5-bar.show{transform:none}.z5-bar .sv-btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.z5-bar{transition:none}}
.z5-form input.g-field:-webkit-autofill,.z5-form input.g-field:-webkit-autofill:hover,.z5-form input.g-field:-webkit-autofill:focus{-webkit-text-fill-color:var(--bone);caret-color:var(--bone);-webkit-box-shadow:0 0 0 1000px #18181a inset;box-shadow:0 0 0 1000px #18181a inset;transition:background-color 600000s 0s}
/* ===== /J5 ===== */
/* ===== STRAT: сторінка «Стратегія» (05.11, services_strategy.py) ===== */
.s8-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:44px var(--gutter) 64px}
.s8-l .sv-eye{margin:0 0 64px}   /* власник 05.11: більше повітря між «Послуги / Стратегія» і заголовком */.s8-crumb{color:inherit;text-decoration:none}.s8-crumb:hover{text-decoration:underline}
.s8-l h1{font-size:clamp(80px,9vw,150px);line-height:.88;margin:0}.s8-l h1 span{color:var(--volt)}
.s8-l hr{border:0;border-top:1px solid color-mix(in srgb,var(--bone) 18%,transparent);margin:32px 0 26px}
.s8-l .sv-lead{max-width:560px;margin:0 0 28px}.s8-l .z5-micro{margin-top:12px}
.s8-r{display:flex;align-items:center;justify-content:center}
.s8-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:26px;align-items:start;max-width:600px;padding:24px;border-radius:24px;margin-bottom:5%;background:color-mix(in srgb,var(--bone) 6%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 14%,transparent)}
.s8-card img{width:180px;height:220px;object-fit:cover;border-radius:16px;filter:grayscale(1)}
.s8-card .z5-k{margin:0 0 8px}.s8-card b{display:block;font:700 46px/.95 var(--font-display);text-transform:uppercase;margin:0 0 10px}
.s8-role{display:block;font-size:14px;line-height:1.45;color:var(--volt);margin-bottom:14px}.s8-card .z5-wl{margin:0 0 4px}.s8-card .z5-br{margin:0 0 18px}
.s8-zh{margin:0 0 4%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:420px}
.s8-zh img{width:240px;height:290px;object-fit:cover;border-radius:20px;filter:grayscale(1)}
.s8-zh figcaption{display:flex;flex-direction:column;align-items:center;gap:8px}.s8-zh .z5-k{margin:0}
.s8-zh b{font:700 48px/.95 var(--font-display);text-transform:uppercase}.s8-zh span{font-size:14px;line-height:1.45;color:var(--volt)}
.s8-zh small{font-size:13px;line-height:1.55;color:color-mix(in srgb,var(--bone) 75%,transparent)}
.s8-big{font-size:21px;line-height:1.5;color:var(--bone)}
.s8-note{padding-left:16px;border-left:3px solid var(--violet);color:color-mix(in srgb,var(--bone) 80%,transparent)}
.s8-map{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.s8-mtxt h2{font:700 56px/.95 var(--font-display);text-transform:uppercase;margin:0 0 18px}.s8-mtxt p{font-size:17px;line-height:1.6;margin:0 0 14px;color:color-mix(in srgb,var(--bone) 80%,transparent)}
.s8-mtxt .s8-big{font-size:21px;color:var(--bone)}
.s8-diagram{position:relative;height:600px}
.s8-threads{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.s8-core{position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;background:var(--volt);color:var(--graphite);display:grid;place-items:center;text-align:center;z-index:2;box-shadow:0 0 0 10px color-mix(in srgb,var(--volt) 14%,transparent)}
.s8-core b{font:700 30px/.95 var(--font-display);text-transform:uppercase}
.s8-diagram.js .s8-core{transition:transform .14s cubic-bezier(.3,.7,.4,1.4),box-shadow .2s}.s8-diagram.js .s8-core:active{transform:scale(.93)}   /* «клац» */
.s8-diagram.js .s8-core,.s8-diagram.js li{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}   /* власник 05.11: текст у схемі не виділяється при натисканні */
.s8-diagram.js .s8-core:focus-visible{outline:3px solid var(--volt);outline-offset:6px}.s8-diagram.js .s8-core[aria-pressed=true]{box-shadow:0 0 0 18px color-mix(in srgb,var(--volt) 10%,transparent)}
.s8-diagram ul{list-style:none;margin:0;padding:0}
.s8-diagram li{position:absolute;z-index:1;width:200px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--bone) 6%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 16%,transparent);display:grid;gap:4px;
 transform:translateX(var(--tx,0)) translate(var(--fx,0),var(--fy,0)) scale(var(--s,1));transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.s8-diagram.on li{transition-delay:calc(var(--i) * 30ms)}   /* власник 05.11: блоки з’являються майже одразу, нитки — після */
@media (hover:hover) and (pointer:fine){.s8-diagram.js li{cursor:grab;user-select:none;touch-action:none}.s8-diagram.js li.grab{cursor:grabbing;z-index:3;box-shadow:0 14px 34px rgba(0,0,0,.45)}.s8-diagram.js .s8-core{cursor:pointer}}
.s8-hint{position:absolute;right:0;bottom:-30px;margin:0;font-size:12px;color:color-mix(in srgb,var(--bone) 50%,transparent)}@media (hover:none){.s8-hint{display:none}}
.s8-diagram li b{font:700 18px/1.05 var(--font-display);text-transform:uppercase}.s8-diagram li span{font-size:12.5px;line-height:1.4;color:color-mix(in srgb,var(--bone) 70%,transparent)}
.s8-diagram .n0{left:50%;top:0;--tx:-50%}.s8-diagram .n1{right:0;top:21%}.s8-diagram .n2{right:0;bottom:21%}
.s8-diagram .n3{left:50%;bottom:0;--tx:-50%}.s8-diagram .n4{left:0;bottom:21%}.s8-diagram .n5{left:0;top:21%}
.s8-diagram.js:not(.on) li{opacity:0;--s:.82}
.s8-diagram.js:not(.on) .n0{--fy:-40px}.s8-diagram.js:not(.on) .n1{--fx:40px;--fy:-20px}.s8-diagram.js:not(.on) .n2{--fx:40px;--fy:20px}
.s8-diagram.js:not(.on) .n3{--fy:40px}.s8-diagram.js:not(.on) .n4{--fx:-40px;--fy:20px}.s8-diagram.js:not(.on) .n5{--fx:-40px;--fy:-20px}
.s8-light{background:var(--bone);color:var(--graphite);border-top:0}.s8-light .z5-k{color:var(--violet)}
.s8-h{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4px 14px;align-items:end;margin-bottom:28px}.s8-h .z5-k{grid-column:1/-1}
.s8-h h2{font:700 56px/.92 var(--font-display);text-transform:uppercase;margin:0}.s8-h p:not(.z5-k){margin:0;line-height:1.55;color:rgba(13,13,15,.72);max-width:560px}
.s8-chipcloud{display:flex;flex-wrap:wrap;gap:10px}.s8-chipcloud span{padding:14px 20px;border-radius:999px;background:#fff;font:700 22px/1 var(--font-display);text-transform:uppercase;color:var(--graphite)}
.s8-chipcloud span:nth-child(3n+2){background:var(--violet);color:#fff}
.s8-ch{margin-bottom:24px}.s8-ch .z5-k{margin:0 0 14px}
.s8-cg{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px;align-items:center}
.s8-ct{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px;border-radius:20px;background:#fff}.s8-ct p{margin:0;font-size:16px;line-height:1.55;color:rgba(13,13,15,.78)}
.s8-chipcloud span{transition:background-color .3s,color .3s;animation:s8fl 10s ease-in-out infinite;animation-delay:calc(var(--d) * -2.2)}   /* власник 05.11: плавають ще повільніше */
.s8-chipcloud:not(.js) span:hover,.s8-chipcloud span.flip{background:var(--violet);color:#fff}.s8-chipcloud:not(.js) span:nth-child(3n+2):hover,.s8-chipcloud span:nth-child(3n+2).flip{background:#fff;color:var(--graphite)}   /* власник 05.11: кожне наведення перемикає колір (біле ↔ фіолетове), і колір лишається */
@keyframes s8fl{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--a) * -1))}}
@media (prefers-reduced-motion:reduce){.s8-chipcloud span{animation:none}}
.s8-ph{display:flex;gap:20px;align-items:center;margin-bottom:28px}.s8-ph img{width:72px;height:72px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.s8-ph h2{font:700 44px/.95 var(--font-display);text-transform:uppercase;margin:0;max-width:900px}.s8-ph .z5-k{margin:0 0 8px}
.s8-pg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.s8-pg{grid-auto-rows:auto;row-gap:14px}.s8-pg article{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:10px;align-content:start;padding:24px;border-radius:18px;background:color-mix(in srgb,var(--bone) 5%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 10%,transparent)}
.s8-pg h3{font:700 30px/.95 var(--font-display);text-transform:uppercase;margin:0;color:var(--volt)}.s8-pg p{margin:0;font-size:15px;line-height:1.45}
.s8-inc{align-self:end;margin:8px 0 0!important;font-size:12px!important;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--bone) 55%,transparent)}
.s8-chips{display:flex;flex-wrap:wrap;gap:6px;align-self:start;align-items:flex-start;align-content:flex-start}   /* не розтягувати таблетки на висоту ряду subgrid */.s8-chips span{padding:5px 10px;border-radius:999px;font-size:12px;border:1px solid color-mix(in srgb,var(--bone) 22%,transparent)}
.s8-pcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding:20px 24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--volt) 60%,transparent)}.s8-pcta p{margin:0;font-size:16px;font-weight:600}
.s8-other>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.s8-other a{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:18px;text-decoration:none;color:var(--bone);border:1px solid color-mix(in srgb,var(--bone) 14%,transparent);transition:border-color .2s}
.s8-other a:hover{border-color:var(--volt)}
.s8-other a span{font:600 13px/1 var(--font-body);color:var(--volt)}.s8-other a b{font:700 40px/.95 var(--font-display);text-transform:uppercase}
.s8-other a em{font-style:normal;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--bone) 70%,transparent)}
@media (max-width:1100px){.s8-pg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.s8-hero,.s8-map,.s8-h,.s8-cg,.s8-pg,.s8-other>div{grid-template-columns:minmax(0,1fr)}.s8-l h1{font-size:72px}
 .s8-card{grid-template-columns:110px minmax(0,1fr);gap:16px;padding:18px;margin:0}.s8-card img{width:110px;height:140px}.s8-card b{font-size:32px}.s8-l .sv-eye{margin-bottom:36px}
 .s8-pg article{display:flex;flex-direction:column;grid-row:auto}
 .s8-diagram{height:auto;display:grid;gap:10px}.s8-threads{display:none}.s8-core,.s8-diagram li{position:static;transform:none!important;margin:0;width:auto;height:auto;border-radius:14px;padding:16px;opacity:1!important}
 .s8-core{box-shadow:none}.s8-mtxt h2,.s8-h h2{font-size:40px}.s8-ph{align-items:flex-start}.s8-ph h2{font-size:32px}.s8-chipcloud span{font-size:17px}}
@media (prefers-reduced-motion:reduce){.s8-diagram li{transition:none}}
/* ===== /STRAT ===== */
/* ===== DIRS: «Дизайн», «Креатив», «Воркшопи» за зразком «Стратегії» (05.11, services_dirs.py) ===== */
.s8-card--team .s8-role{margin-bottom:12px}
.s8-ppl{list-style:none;margin:0;padding:0;display:grid;gap:8px}.s8-ppl li{display:flex;align-items:center;gap:10px}
.s8-ppl img{width:40px!important;height:40px!important;border-radius:50%!important;object-fit:cover}
.s8-ppl b{display:inline!important;font:600 14px/1.2 var(--font-body)!important;text-transform:none!important;margin:0 6px 0 0!important}
.s8-ppl span{font-size:13px;color:color-mix(in srgb,var(--bone) 65%,transparent)}
.s8-avs{display:flex}.s8-avs img{width:48px;height:48px;border-radius:50%;object-fit:cover;filter:grayscale(1);border:2px solid var(--graphite)}.s8-avs img+img{margin-left:-12px}
.s8-pg--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s8-l--long h1{font-size:clamp(60px,7.4vw,124px)}   /* «Воркшопи.» довше за «Стратегія.» — інакше обрізається на 1024–1280 */
.s8-csh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.s8-csh .z5-k{margin:0 0 8px}
.s8-csh h2{font:700 44px/.95 var(--font-display);text-transform:uppercase;margin:0}
.s8-cgr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.s8-case{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--bone)}
.s8-case>img,.s8-cv{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-bottom:8px;transition:transform .3s}
.s8-cgr--1{grid-template-columns:minmax(0,1fr)!important}
.s8-idb{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border-radius:16px;overflow:hidden;margin-bottom:8px;border:1px solid color-mix(in srgb,var(--bone) 10%,transparent)}
.s8-idb-l{display:grid;place-items:center;background:var(--bone);padding:64px 40px;min-height:320px}.s8-idb-l img{width:72%;max-width:480px;height:auto}
.s8-idb-r{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:32px 40px;background:color-mix(in srgb,var(--bone) 5%,var(--graphite))}
.s8-idb-sw{display:flex;gap:12px}.s8-idb-sw i{width:52px;height:52px;border-radius:50%;border:1px solid color-mix(in srgb,var(--bone) 25%,transparent)}
.s8-case .s8-idb-ty b{display:block;font:700 54px/1 var(--font-display);text-transform:uppercase}.s8-idb-ty span{display:block;font:800 34px/1.1 var(--font-body);letter-spacing:-.03em;margin-top:6px}
.s8-idb-ty small{display:block;font-size:13px;color:color-mix(in srgb,var(--bone) 60%,transparent);margin-top:8px}
a.s8-case:hover>img{transform:scale(1.02)}a.s8-case:hover b{text-decoration:underline;text-underline-offset:4px}
.s8-cm{font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--volt)}
.s8-case b{font-size:18px;line-height:1.3;font-weight:600}
@media (max-width:1100px){.s8-pg--3{grid-template-columns:repeat(2,minmax(0,1fr))}.s8-cgr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.s8-l--long h1{font-size:56px!important}.s8-pg--3,.s8-cgr,.s8-idb{grid-template-columns:minmax(0,1fr)}.s8-idb-l{min-height:0;padding:40px 24px}.s8-csh{flex-direction:column;align-items:flex-start}.s8-csh h2{font-size:32px}}
/* ===== /DIRS ===== */
/* ===== G8: сторінки напрямів «Послуг» — Стратегія, Дизайн, Креатив, Воркшопи (власник 08.11; services_g8.py) =====
   Основа — варіант G «Дошка стратега» (картки bento, мітки, дошка в клітинку, фони графіт / графіт-2 / кістка),
   блок питань A «Питання → відповідь», перший екран Е1 (картка людини без цитати + кейси Жені), низ Н2 «Що далі».
   Ширина контенту — як у 1920-макета й на 4K (вміст по центру, фони на всю ширину). */
.sv-strat{--gutter:max(clamp(22px,3.5vw,88px),calc(50vw - 893px))}

/* ── G: повітря (шкала 8 pt), картки, мітки, дошка, фони ── */
.sv-strat .z5-sec{padding:136px var(--gutter)}
.sv-strat .s8-hero{padding:56px var(--gutter) 136px;gap:72px}
.sv-strat .s8-l .sv-eye{margin-bottom:72px}.sv-strat .s8-l hr{margin:40px 0 32px}
.sv-strat .s8-l .sv-lead{margin-bottom:40px;max-width:520px;line-height:1.6}.sv-strat .s8-l .z5-micro{margin-top:18px}
.sv-strat .z5-strip{padding:36px var(--gutter);gap:24px 40px}.sv-strat .z5-strip dt{font-size:34px}.sv-strat .z5-strip dd{font-size:13px}
.sv-strat .z5-strip blockquote{font-size:17px}.sv-strat .z5-strip figcaption{font-size:13px;margin-top:6px}
.sv-strat .s8-map{gap:96px}.sv-strat .s8-mtxt{max-width:560px}
.sv-strat .s8-mtxt .z5-k{margin:0 0 24px}.sv-strat .s8-mtxt h2{margin:0 0 40px}
.sv-strat .s8-mtxt p{line-height:1.65;margin:0 0 24px}.sv-strat .s8-mtxt .s8-big{line-height:1.55;margin-bottom:32px}
.sv-strat .s8-note{margin-top:40px!important;padding-left:24px}
.sv-strat .s8-diagram{height:640px}
.sv-strat .s8-ch{margin-bottom:56px}.sv-strat .s8-ch .z5-k{margin:0 0 24px}
.sv-strat .s8-cg{gap:80px}
.sv-strat .s8-ph{margin-bottom:64px;gap:28px}.sv-strat .s8-ph .z5-k{margin:0 0 14px}
.sv-strat .s8-csh{margin-bottom:56px}.sv-strat .s8-csh .z5-k{margin:0 0 14px}
.sv-strat .s8-pg{gap:20px}.sv-strat .s8-pg article{padding:36px 32px;row-gap:16px}
.sv-strat .s8-pg p{font-size:16px;line-height:1.55}.sv-strat .s8-pg h3{font-size:32px}
.sv-strat .s8-inc{margin-top:16px!important;font-size:12.5px!important}.sv-strat .s8-chips{gap:8px}.sv-strat .s8-chips span{font-size:13px;padding:7px 12px}
.sv-strat .s8-pcta{margin-top:40px;padding:30px 36px}.sv-strat .s8-pcta p{font-size:18px}
.sv-strat .z5-end{padding:136px var(--gutter);gap:40px 48px}
.sv-strat .z5-eh h2{margin-bottom:56px}.sv-strat .z5-faq div{padding:24px 0;gap:10px}.sv-strat .z5-faq dd{font-size:15px;line-height:1.6}
.sv-strat .z5-two{gap:20px}.sv-strat .z5-tgcard{padding:40px;gap:16px}.sv-strat .z5-tgcard p{font-size:16px;line-height:1.55}
.sv-strat .z5-form{padding:36px;gap:12px}
.sv-strat .s8-hint{font-size:13px}
.sv-strat main h2,.sv-strat h2{line-height:1.05!important}
.sv-strat .s8-diagram li span{font-size:13.5px}.sv-strat .s8-diagram li{padding:16px 18px}

.sv-strat .bn{border-radius:22px;background:color-mix(in srgb,var(--bone) 5%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 12%,transparent);padding:48px}
.sv-strat .s8-map.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:auto;gap:20px;align-items:stretch}
.sv-strat .bn-a{grid-column:1/6;grid-row:1}.sv-strat .bn-c{grid-column:1/6;grid-row:2}.sv-strat .bn-d{grid-column:1/6;grid-row:3}
.sv-strat .s8-map.bento .bn-b{grid-column:6/13;grid-row:1/4;padding:40px 40px 64px;display:flex}.sv-strat .s8-map.bento.one .bn-b{grid-row:1}
.sv-strat .s8-map.bento .s8-diagram{flex:1;height:auto;min-height:640px}
.sv-strat .bn-a .z5-k{margin:0 0 24px}.sv-strat .bn-a h2{font:700 56px/.95 var(--font-display);text-transform:uppercase;margin:0 0 32px}
.sv-strat .bn-a p:not(.z5-k):not(.e5-l){margin:0;font-size:21px;line-height:1.55;color:var(--bone)}
.sv-strat .bn-c p:not(.e5-l){margin:0;font-size:17px;line-height:1.65;color:color-mix(in srgb,var(--bone) 80%,transparent)}
.sv-strat .bn-d{background:transparent;border-color:color-mix(in srgb,var(--volt) 55%,transparent);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.sv-strat .bn-d p.s8-note{margin:0!important;font:700 26px/1.15 var(--font-display);text-transform:uppercase;color:var(--volt);border-left:0!important;padding-left:0!important}
.sv-strat .s8-map.bento .s8-hint{right:0;bottom:-40px}
.sv-strat .z5-strip{display:grid;grid-template-columns:minmax(0,2.4fr) repeat(4,minmax(0,1fr));align-items:stretch;gap:16px;padding:48px var(--gutter)}.sv-strat .z5-strip dt{white-space:nowrap}.sv-strat .z5-strip dl div{justify-content:space-between}
.sv-strat .z5-strip figure,.sv-strat .z5-strip dl div{background:#fff;border-radius:22px;padding:28px}
.sv-strat .z5-strip figure{flex-direction:row;align-items:center;gap:18px}.sv-strat .z5-strip blockquote{font-size:19px;line-height:1.35}
.sv-strat .z5-strip .p5-up{grid-column:1/-1;justify-self:end}
.sv-strat .z5-strip dt{font-size:34px}
@media (max-width:1200px){.sv-strat .z5-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.sv-strat .z5-strip figure{grid-column:1/-1}.sv-strat .z5-strip dt{font-size:28px}}
.sv-strat .s8-paths .s8-pg article{border-radius:18px;padding:44px 36px}
.sv-strat .s8-pcta{border-radius:18px;padding:36px 44px}
.sv-strat .z5-end h2{font-size:56px}.sv-strat .z5-end .z5-eh{border-radius:22px;background:color-mix(in srgb,var(--bone) 5%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 12%,transparent);padding:48px}
.sv-strat .z5-tgcard,.sv-strat .z5-form{border-radius:22px;padding:44px}
.sv-strat .bg-g2 .z5-eh{background:#0D0D0F}   /* на другому графіті картки темніші за фон, інакше зливаються */

.sv-strat .e5-l{margin:0 0 10px!important;font:600 12.5px/1 var(--font-body)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--volt)!important}
.sv-strat .s8-mtxt .e5-l{margin-top:8px!important}.sv-strat .bn .e5-l{margin:0 0 16px!important}.sv-strat .bn-one .e5-l{margin:0 0 12px!important}
.sv-strat .s8-mtxt mark,.sv-strat .bn mark{background:none;color:var(--volt);font-weight:600}
.sv-strat .s8-mtxt p b,.sv-strat .bn p b{color:var(--bone);font-weight:600}
.sv-strat .s8-note mark{color:var(--bone)!important}.sv-strat .bn-d mark{color:inherit!important;font-weight:inherit}
.sv-strat .s8-mtxt p:not(.e5-l):not(.z5-k){margin-bottom:36px}
.sv-strat .s8-pg article{grid-row:span 5}
.sv-strat .s8-pg .e5-sit{align-self:start;margin:0!important}
.sv-strat .s8-pg p:not(.s8-inc){font-size:17px;font-weight:600;color:var(--bone)}
.sv-strat .s8-pcta p b{color:var(--volt)}
.sv-strat .z5-faq dt{font-size:18px}.sv-strat .z5-faq dt::before{content:"→ ";color:var(--volt)}

.sv-strat .s8-map .bn-b{background-image:linear-gradient(rgba(242,239,233,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(242,239,233,.08) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px}

.sv-strat .z5-sec,.sv-strat .z5-end{border-top:0}   /* межі між блоками тепер дає фон, лінії не потрібні */
.sv-strat .bg-g2{background-color:#18181B}
.sv-strat .bg-g2 .s8-pg article,.sv-strat .bg-g2 .z5-form,.sv-strat .bg-g2 .s8-pcta{background:#0D0D0F}   /* на другому графіті картки темніші за фон */

/* ── A «Питання → відповідь»: ліворуч питання, праворуч дошка з відповіддю, шляхом і однією кнопкою ── */
.sv-strat .q8 .q8-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px}
.sv-strat .q8 .q8-head h2{max-width:1080px;margin:0;text-wrap:balance}
.sv-strat .q8-hint{flex:none;display:flex;align-items:center;gap:10px;margin:0 0 6px;font:500 14px/1 var(--font-body);color:rgba(13,13,15,.6)}
.sv-strat .q8-hint span{color:var(--violet);font-size:18px}
.sv-strat .q8-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.sv-strat .q8-chips span{padding:8px 14px;border-radius:999px;font-size:14px;line-height:1.2;border:1px solid color-mix(in srgb,var(--bone) 24%,transparent);color:var(--bone)}
@keyframes q8in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sv-strat .q8-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:stretch}
.sv-strat .q8-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sv-strat .q8-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 16px 28px;min-height:68px;border:0;border-radius:18px;
 background:#fff;color:var(--graphite);font:700 23px/1.14 var(--font-display);text-transform:uppercase;text-align:left;cursor:pointer;
 transition:background-color .25s,color .25s,transform .25s}
.sv-strat .q8-q i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bone);font:600 18px/1 var(--font-body);font-style:normal;transition:background-color .25s,color .25s,transform .25s}
.sv-strat .q8-q:hover:not(.is-on){transform:translateX(6px)}
.sv-strat .q8-q.is-on{background:var(--violet);color:#fff}
.sv-strat .q8-q.is-on i{background:#fff;color:var(--violet);transform:translateX(4px)}
.sv-strat .q8-q:focus-visible{outline:3px solid var(--graphite);outline-offset:3px}
.sv-strat .q8-board{border-radius:22px;background-color:#0D0D0F;background-image:linear-gradient(rgba(242,239,233,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(242,239,233,.08) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px;
 padding:48px;display:flex;flex-direction:column;gap:40px;color:var(--bone)}
.sv-strat .q8-a{display:none}
.sv-strat .q8-board .q8-a.is-on{display:flex;flex-direction:column;align-items:flex-start;gap:20px;animation:q8in .35s ease}
.sv-strat .q8-path{font:600 12.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--volt);text-decoration:none;
 background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:4px;transition:background-size .25s}
.sv-strat .q8-path:hover{background-size:100% 1px}
.sv-strat .q8-a h3{margin:4px 0 0;font:700 46px/1 var(--font-display);text-transform:uppercase;color:var(--bone);text-wrap:balance;max-width:640px}
.sv-strat .q8-a>p:not(.q8-inc):not(.q8-chips){margin:0;font-size:18px;line-height:1.6;color:color-mix(in srgb,var(--bone) 82%,transparent);max-width:580px}
.sv-strat .q8-inc{margin:8px 0 -6px;font:600 12px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--bone) 55%,transparent)}
.sv-strat .q8-cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:24px 32px;flex-wrap:wrap}
.sv-strat .q8-cta p{margin:0;max-width:400px;font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--bone) 72%,transparent)}
.sv-strat .q8-cta p b{color:var(--bone);font-weight:600}
.sv-strat .q8-cta .sv-btn{margin:0}
@media (max-width:1180px){.sv-strat .q8-q{font-size:20px;padding-left:22px}.sv-strat .q8-a h3{font-size:38px}.sv-strat .q8-board{padding:40px}}
@media (max-width:900px){
 .sv-strat .q8 .q8-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}.sv-strat .q8-hint{display:none}
 .sv-strat .q8-body{grid-template-columns:minmax(0,1fr)}
 .sv-strat .q8-q{font-size:18px;min-height:60px;padding:12px 12px 12px 20px}.sv-strat .q8-q i{width:34px;height:34px;transform:rotate(90deg)}
 .sv-strat .q8-q.is-on i{transform:rotate(-90deg)}
 .sv-strat .q8-list .q8-a.is-on{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:8px;padding:26px 22px;border-radius:18px;
  background-color:#0D0D0F;background-image:linear-gradient(rgba(242,239,233,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(242,239,233,.08) 1px,transparent 1px);background-size:32px 32px;color:var(--bone);animation:q8in .3s ease}
 .sv-strat .q8-list .q8-a h3{font-size:30px;line-height:1.04}.sv-strat .q8-list .q8-a>p:not(.q8-inc):not(.q8-chips){font-size:16px}
 .sv-strat .q8-board{padding:28px 22px;gap:0}.sv-strat .q8-cta{flex-direction:column;align-items:flex-start}
 .sv-strat .q8-cta .sv-btn{align-self:stretch;justify-content:center}}

/* ── Е1: картка людини (без цитати) ── */
.sv-strat .zh{width:100%;max-width:620px;margin-bottom:5%;padding:32px;border-radius:24px;color:var(--bone);
 background:color-mix(in srgb,var(--bone) 6%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 14%,transparent)}
.sv-strat .zh img{display:block;object-fit:cover;border-radius:16px;filter:grayscale(1)}
.sv-strat .zh .z5-k{margin:0 0 14px}
.sv-strat .zh-name{display:block;margin:0;font:700 52px/.92 var(--font-display);text-transform:uppercase;color:var(--bone)}
.sv-strat .zh .sv-all{margin-top:20px}
.sv-strat .zh-l{margin:0 0 12px;font:600 12px/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--bone) 55%,transparent)}
.sv-strat .zh-brands{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:7px 26px;font:600 17px/1.25 var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:color-mix(in srgb,var(--bone) 92%,transparent)}
.sv-strat .zh-brands span{text-wrap:balance}   /* довга назва переноситься в межах колонки, а не вилазить за картку */
.sv-strat .zh-was{margin:0;display:grid;gap:14px}.sv-strat .zh-was div{display:grid;gap:3px}
.sv-strat .zh-was dt{font:600 15px/1.3 var(--font-body);color:var(--bone)}
.sv-strat .zh-was dd{margin:0;font-size:13.5px;line-height:1.4;color:color-mix(in srgb,var(--bone) 64%,transparent)}
.sv-strat .zhn{display:grid;grid-template-columns:168px minmax(0,1fr);gap:28px;align-items:stretch}
.sv-strat .zhn>img{width:168px;height:100%;min-height:300px;object-position:50% 22%}
.sv-strat .zhn .zh-body{display:flex;flex-direction:column;align-items:flex-start}
.sv-strat .zhn .zh-name{font-size:50px;margin:0 0 24px}
.sv-strat .zhn .zh-wasw{margin-bottom:24px}.sv-strat .zhn .zh-was{gap:10px}
.sv-strat .zhn .sv-all{margin-top:22px}
/* воркшопи веде команда: фото з виступу + четверо людей */
.sv-strat .zht>img{object-position:62% 50%}
.sv-strat .zh-ppl{list-style:none;margin:0;padding:0;display:grid;gap:10px}.sv-strat .zh-ppl li{display:flex;align-items:center;gap:12px}
.sv-strat .zh-ppl img{width:40px;height:40px;border-radius:50%}
.sv-strat .zh-ppl b{display:block;font:600 15px/1.25 var(--font-body);color:var(--bone)}
.sv-strat .zh-ppl span{font-size:13.5px;line-height:1.3;color:color-mix(in srgb,var(--bone) 64%,transparent)}

/* ── Е1: кейси Жені рядком під першим екраном (лише «Стратегія») ── */
.sv-strat .ek-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin:0 0 18px}
.sv-strat .ek-head .z5-k{margin:0}
.sv-strat .ek-nda{margin:0;font-size:13px;color:color-mix(in srgb,var(--bone) 55%,transparent)}
.sv-strat .ek-num{display:block;font:700 64px/1 var(--font-display);color:var(--volt);white-space:nowrap}
.sv-strat .ek-num small{font-size:.55em;letter-spacing:.01em}
.sv-strat .ek-cap{margin:16px 0 0;font:600 16px/1.35 var(--font-body);color:var(--bone)}
.sv-strat .ek-more{margin:8px 0 0;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--bone) 70%,transparent)}
.sv-strat .ek-more b{color:var(--bone);font-weight:600}
.sv-strat .ek-tag{margin:0 0 16px;font:600 11.5px/1.3 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--bone) 55%,transparent)}
.sv-strat .ek-who{margin:0;font:600 14px/1.4 var(--font-body);color:var(--bone)}
.sv-strat .ek-did{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:color-mix(in srgb,var(--bone) 62%,transparent)}
.sv-strat .s8-hero .ek1{grid-column:1/-1;margin-top:8px}
.sv-strat .ek1 .ek-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sv-strat .ek1 .ek-c{display:flex;flex-direction:column;padding:28px 28px 30px;border-radius:18px;
 background:color-mix(in srgb,var(--bone) 5%,var(--graphite));border:1px solid color-mix(in srgb,var(--bone) 12%,transparent)}
.sv-strat .ek1 .ek-ctx{margin-top:auto;padding-top:24px}

/* ── Н2 «Що далі»: «Ви тут» → інші напрями ── */
.sv-strat .nd{background:var(--bone);color:var(--graphite)}   /* свій клас «nd» (не «on» — його вмикає схема «Карта рішень») */
.sv-strat .nd .z5-k{color:var(--violet)}
.sv-strat .nd .on-head{margin:0 0 40px}.sv-strat .nd .on-head .z5-k{margin:0 0 20px}
.sv-strat .nd .on-head h2{margin:0;color:var(--graphite);text-wrap:balance}
.sv-strat .on-l{display:block;font:600 12px/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.sv-strat .on-ar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bone);color:var(--graphite);
 font:600 18px/1 var(--font-body);font-style:normal;transition:background-color .25s,color .25s,transform .25s}
.sv-strat .nd a{color:inherit;text-decoration:none}
.sv-strat .nd a:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.sv-strat .on2-row{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,3.2fr);align-items:stretch;gap:0 8px}
.sv-strat .on2-here{display:flex;flex-direction:column;gap:12px;padding:30px 28px;border-radius:18px;background:var(--graphite);color:var(--bone)}
.sv-strat .on2-here .on-l{color:var(--volt)}
.sv-strat .on2-here b,.sv-strat .on2-c b{font:700 40px/1 var(--font-display);text-transform:uppercase}
.sv-strat .on2-here em,.sv-strat .on2-c em{font-style:normal;font-size:15.5px;line-height:1.5}
.sv-strat .on2-here em{color:color-mix(in srgb,var(--bone) 75%,transparent)}
.sv-strat .on2-arr{align-self:center;width:64px;height:40px;fill:none;stroke:var(--violet);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sv-strat .on2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sv-strat .on2-c{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px 28px 84px;border-radius:18px;background:#fff;border:1.5px solid transparent;transition:border-color .25s,transform .25s}
.sv-strat .on2-c b{color:var(--graphite)}.sv-strat .on2-c em{color:rgba(13,13,15,.72)}
.sv-strat .on2-c .on-ar{position:absolute;left:28px;bottom:26px}
.sv-strat .on2-c:hover{border-color:var(--violet);transform:translateY(-4px)}.sv-strat .on2-c:hover .on-ar{background:var(--violet);color:#fff;transform:translateX(4px)}

/* смужка відгуку: «Very Best Of» не впирається в край картки на 1201–1600 px (картки цифр ширші, шрифт трохи менший) */
@media (min-width:1201px){.sv-strat .z5-strip{grid-template-columns:minmax(0,1.8fr) repeat(4,minmax(0,1fr))}.sv-strat .z5-strip dt{font-size:clamp(22px,1.95vw,34px)}}

/* ── вужчі екрани ── */
@media (max-width:1180px){
 .sv-strat .zh{padding:26px}
 .sv-strat .zhn{grid-template-columns:104px minmax(0,1fr);gap:8px 18px;grid-template-areas:"img k" "img name" "was was" "br br" "a a";align-items:start}
 .sv-strat .zhn .zh-body{display:contents}.sv-strat .zhn>img{grid-area:img;width:104px;height:130px;min-height:0}
 .sv-strat .zhn .zh-k{grid-area:k;align-self:end;margin:0}.sv-strat .zhn .zh-name{grid-area:name;align-self:start;margin:8px 0 0;font-size:40px}
 .sv-strat .zhn .zh-wasw{grid-area:was;margin:18px 0 0}.sv-strat .zhn .zh-br{grid-area:br;margin-top:18px}.sv-strat .zhn .sv-all{grid-area:a;justify-self:start;margin-top:14px}
 .sv-strat .ek1 .ek-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sv-strat .ek-num{font-size:54px}
 .sv-strat .on2-row{grid-template-columns:minmax(0,1fr)}.sv-strat .on2-arr{transform:rotate(90deg);margin:8px 0}}
/* телефон: відступи між блоками менші, усе в одну колонку */
@media (max-width:900px){
 .sv-strat .z5-sec,.sv-strat .z5-end{padding:72px var(--gutter)}
 .sv-strat .s8-hero{padding:32px var(--gutter) 72px;gap:40px}.sv-strat .s8-l .sv-eye{margin-bottom:36px}.sv-strat .s8-l hr{margin:28px 0 22px}
 .sv-strat .zh{margin:0;padding:20px}.sv-strat .zh-brands{font-size:15px;gap:6px 18px}
 .sv-strat .zhn{grid-template-columns:84px minmax(0,1fr)}.sv-strat .zhn>img{width:84px;height:105px}.sv-strat .zhn .zh-name{font-size:32px}
 .sv-strat .ek1 .ek-grid{grid-template-columns:minmax(0,1fr);gap:12px}.sv-strat .ek1 .ek-c{padding:22px}.sv-strat .ek-num{font-size:48px}
 .sv-strat .z5-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:28px var(--gutter)}
 .sv-strat .z5-strip figure{grid-column:1/-1}.sv-strat .z5-strip figure,.sv-strat .z5-strip dl div{padding:18px;border-radius:18px}
 .sv-strat .z5-strip dt{font-size:22px;white-space:normal}.sv-strat .z5-strip blockquote{font-size:16px}
 .sv-strat .z5-strip .p5-up{justify-self:start}
 .sv-strat .s8-map.bento{grid-template-columns:minmax(0,1fr);gap:12px}
 .sv-strat .bn-a,.sv-strat .bn-c,.sv-strat .bn-d,.sv-strat .s8-map.bento .bn-b{grid-column:1/-1;grid-row:auto}
 .sv-strat .bn{padding:28px 22px}.sv-strat .bn-a h2{font-size:40px;margin-bottom:24px}.sv-strat .bn-a p:not(.z5-k):not(.e5-l){font-size:18px}
 .sv-strat .bn-d p.s8-note{font-size:22px}.sv-strat .s8-map.bento .bn-b{padding:18px 14px 44px}
 .sv-strat .s8-ch{margin-bottom:32px}.sv-strat .s8-ph{margin-bottom:36px}.sv-strat .s8-csh{margin-bottom:32px}
 .sv-strat .s8-paths .s8-pg article{padding:28px 22px}.sv-strat .s8-pg h3{font-size:28px}
 .sv-strat .s8-pcta{padding:24px 22px;margin-top:24px}
 .sv-strat .z5-end .z5-eh,.sv-strat .z5-tgcard,.sv-strat .z5-form{padding:26px 22px}.sv-strat .z5-end h2{font-size:40px}
 .sv-strat .nd .on-head{margin-bottom:28px}.sv-strat .on2-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .sv-strat .on2-here b,.sv-strat .on2-c b{font-size:34px}.sv-strat .on2-here{padding:24px 22px}.sv-strat .on2-c{padding:24px 22px 76px}.sv-strat .on2-c .on-ar{left:22px;bottom:20px}}
@media (prefers-reduced-motion:reduce){.sv-strat .q8 *,.sv-strat .nd *{animation:none!important;transition:none!important}}
/* ===== /G8 ===== */