:root{--bone:#F2EFE9;--graphite:#0D0D0F;--volt:#C4F000;--bordeaux:#7A1F1F;--paper:var(--bone);--ink:var(--graphite);--acid:var(--volt);--wine:var(--bordeaux);--surface:var(--bone);--text:var(--graphite);--heading:var(--bordeaux);--action:var(--bordeaux);--on-action:var(--bone);--accent:var(--bordeaux);--focus:var(--graphite);--motion-fast:120ms;--motion-base:180ms;--motion-section:240ms;--line:color-mix(in srgb,var(--ink) 20%,transparent);--gutter:clamp(22px,3.5vw,88px);--header-h:64px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,sans-serif;font-size:16px;line-height:1.55}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}button,a,input,textarea,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:4px}a:hover{text-decoration:underline;text-underline-offset:6px}button{border:0;background:none}h1,h2,h3,p{margin-top:0}h1,h2,h3{overflow-wrap:break-word}h1,h2{font-weight:800;letter-spacing:-.04em;line-height:1;text-transform:uppercase;color:var(--heading)}h1{font-size:clamp(44px,5.6vw,80px);margin:0}h2{font-size:clamp(28px,2.8vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:24px}h3{font-weight:600;line-height:1.25}p{line-height:1.5}section{border-bottom:1px solid var(--line)}img,svg{display:block;max-width:100%}.star{width:46px;height:46px;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}.brand:hover{text-decoration:none}.topbar{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:64px;padding:8px var(--gutter);position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper);border-bottom:1px solid color-mix(in srgb,var(--paper) 14%,transparent)}.topbar nav{display:flex;align-items:center;gap:clamp(12px,1.65vw,28px)}.topbar nav a{font-size:14px;font-weight:600;white-space:nowrap;padding:7px 0}.topbar nav [aria-current]{border-bottom:1px solid;color:var(--acid)}.header-actions{display:flex;align-items:center;gap:22px}.callback-link{font-size:14px;font-weight:600;padding:10px 0;white-space:nowrap}.callback-link span{font-size:20px;line-height:1;vertical-align:-2px;margin-left:12px}.languages{display:flex;gap:9px;align-items:center;font-size:12px}.languages span{border-bottom:1px solid}.languages button{padding:10px 2px;opacity:.6}.menu-btn{display:none}.eyebrow,.section-head p,.section-title>p{font-size:14px;font-weight:600;line-height:1.4;margin:0 0 24px;text-transform:uppercase}.dark{background:var(--ink);color:var(--paper);--line:color-mix(in srgb,var(--paper) 22%,transparent);--surface:var(--graphite);--text:var(--bone);--heading:var(--bone);--action:var(--volt);--on-action:var(--graphite);--accent:var(--volt);--focus:var(--bone)}.hero{padding:56px var(--gutter) 60px;display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.4fr);grid-template-rows:1fr auto;column-gap:4%;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));overflow:hidden;position:relative}.hero-headline{grid-column:1;grid-row:1;align-self:end}.hero-copy{grid-column:1;grid-row:2}.hero .slash-art{grid-column:2;grid-row:1/span 2;min-height:0}.hero h1{font-size:min(clamp(68px,10.2vw,184px),19vh);line-height:1;margin-left:-.05em}.hero-copy{font-size:18px;max-width:440px;padding-top:32px}.hero-copy a,.text-link,.about-copy>a{font-size:14px;font-weight:600;display:inline-block;padding:8px 0;border-bottom:1px solid;margin-top:8px}.hero-copy a span{margin-left:20px}.slash-art{position:relative;min-height:290px;pointer-events:none}.slash-art i,.slash-art b{position:absolute;display:block;width:88px;height:225px;transform:skew(-28deg);right:64px;top:22px;background:var(--acid)}.slash-art b{background:var(--wine);right:18px;top:102px}.hero .slash-art i,.hero .slash-art b{width:clamp(64px,5.4vw,108px);height:clamp(240px,44vh,450px);right:clamp(38px,4.4vw,86px);top:12%}.hero .slash-art b{right:clamp(0px,1.2vw,24px);top:34%}.work{padding:32px var(--gutter) 48px;display:flex;flex-direction:column}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:24px}.section-head p{margin:0}.section-head a,.section-head>span{font-size:14px;font-weight:600;white-space:nowrap}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.project{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column}.crop{position:relative;overflow:hidden;min-width:0}.crop svg{width:100%;height:100%;display:block}.project-visual{aspect-ratio:16/9;height:auto;background:var(--ink)}.project h3{position:absolute;left:18px;bottom:34px;z-index:2;margin:0;font-size:17px;letter-spacing:-.01em;color:var(--paper);pointer-events:none}.project p{position:absolute;left:18px;bottom:14px;z-index:2;margin:0;font-size:12px;color:var(--paper);opacity:.82;pointer-events:none}.project-visual:after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity var(--motion-base);background:linear-gradient(to top,color-mix(in srgb,var(--ink) 88%,transparent) 0,color-mix(in srgb,var(--ink) 34%,transparent) 46%,color-mix(in srgb,var(--ink) 20%,transparent) 100%)}.project:hover .project-visual:after{opacity:.55}.project>a{position:absolute;inset:0;z-index:3;font-size:0;color:transparent}.pv-go{position:absolute;right:12px;bottom:9px;z-index:2;font-size:22px;color:var(--paper);opacity:0;transition:opacity .2s;pointer-events:none}.project:hover .pv-go{opacity:1}.project>a:hover{text-decoration:none}.project:hover .project-visual{box-shadow:inset 0 0 0 2px var(--acid)}.services{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;padding:48px var(--gutter);align-items:center}.services h2{margin:0}.services ol{list-style:none;padding:0;margin:0}.services li{border-bottom:1px solid var(--line)}.services li a{display:flex;align-items:center;gap:16px;padding:13px 0;font-size:14px}.services li span{font-size:12px;opacity:.5}.services li em{margin-left:auto;font-style:normal;font-size:20px}.about{display:grid;grid-template-columns:1.05fr .7fr 1fr;min-height:390px}.about-copy{padding:38px var(--gutter)}.about-copy>p:first-child{font-size:12px;margin-bottom:25px}.about .body{max-width:440px;font-size:18px}.big-mark{display:flex;align-items:center;justify-content:center;color:var(--acid);padding:28px}.big-mark .star{width:170px;height:170px}.big-mark img{width:170px;height:170px}.cta{padding:42px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{font-size:clamp(44px,5.6vw,80px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:0}.cta>a{border-left:1px solid var(--line);padding:20px 0 20px 5vw;min-width:26%;font-size:13px}.cta>a span{color:var(--acid);font-size:40px;margin-left:25px}.page-intro{position:relative;padding:45px var(--gutter) 60px;min-height:440px;overflow:hidden}.page-intro>h1,.page-intro>.eyebrow,.page-intro>.lead{position:relative;z-index:1;max-width:72%}.page-intro .lead{max-width:560px;font-size:18px;margin:24px 0 0}.intro-art{position:absolute;inset:0 0 0 auto;width:31%;pointer-events:none}.intro-art>.crop{position:absolute;inset:0 28% 0 0;clip-path:polygon(40% 0,100% 0,60% 100%,0 100%)}.intro-art .slash-art{position:absolute;inset:12% -2% 0 0}.intro-art .slash-art i,.intro-art .slash-art b{width:clamp(60px,9vw,150px);height:clamp(130px,20vw,290px);right:30%;top:16%}.intro-art .slash-art b{right:0;top:30%}.companies{padding:30px var(--gutter) 40px}.company-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px}.logo-space{height:130px;display:flex;justify-content:center;align-items:center}.logo-space .crop{width:150px;height:100px}.logo-space .crop svg{object-fit:contain}.logo-space .crop:nth-child(1){max-width:170px}.company-mark{display:flex;align-items:center;flex-direction:column;color:var(--acid);gap:8px}.company-mark .star{width:56px;height:56px}.company-mark img{width:56px;height:56px}.company-mark strong{color:var(--paper);font-size:27px;font-weight:800;line-height:1}.company-mark.muted{color:var(--paper);opacity:.4}.company h2{font-size:24px;font-weight:600;letter-spacing:0;line-height:1.25;text-align:center;margin:4px 0}.company-caption{text-align:center;font-size:12px;opacity:.7;min-height:36px}.company ul{list-style:none;padding:0;margin:20px 0;font-size:14px;line-height:1.8}.company a{font-size:12px}.group-story{display:grid;grid-template-columns:1.1fr 1fr .7fr;gap:50px;padding:44px var(--gutter)}.group-story h2{margin:0}.group-story ol{list-style:decimal-leading-zero;margin:0;padding-left:25px;font-size:13px}.group-story li{padding:14px 0;border-bottom:1px solid var(--line)}.group-feature{display:grid;grid-template-columns:1fr 2fr;padding:16px var(--gutter);gap:35px}.group-feature>div:first-child{padding:25px 0}.group-feature h2{margin:0}.service-category{display:grid;grid-template-columns:1fr 2.3fr;gap:50px;padding:25px var(--gutter)}.service-category>div:first-child>span{float:left;margin:3px 18px 0 0;font-size:24px}.service-category h2{font-size:24px;font-weight:600;letter-spacing:0;line-height:1.25;margin:8px 0 12px}.service-category>div>p{font-size:14px}.service-category details{border-bottom:1px solid var(--line);padding:12px 0}.service-category summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;font-size:15px;font-weight:600}.service-category summary::-webkit-details-marker{display:none}.service-category summary span{font-size:12px;font-weight:400;opacity:.85;min-width:40px}.service-category summary b{margin-left:auto;font-weight:400;font-size:22px}.service-category details[open] summary b{transform:rotate(45deg)}.service-category details>p{margin:15px 0 12px 56px;max-width:590px;font-size:16px}.service-category details>a{font-size:12px;margin-left:56px}.editorial{max-width:860px;margin:auto;padding:50px var(--gutter)}.editorial h2{margin-top:32px}.editorial p{font-size:18px;line-height:1.7}.editorial>a{font-size:14px;border-bottom:1px solid}.award{padding:45px var(--gutter)}.award h2{max-width:650px}.journal{padding:48px var(--gutter)}.journal .section-head{margin-bottom:40px}.journal h2,.journal h1{margin-top:20px}.articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.articles article{padding:30px;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}.articles article:first-child{padding-left:0}.articles article:last-child{border:0}.articles article.acid{background:var(--acid)}.articles span{font-size:12px}.articles h3{font-size:24px;font-weight:600;line-height:1.25;margin:32px 0 16px}.articles a{margin-top:auto;padding-top:25px;font-size:13px}.case-banner{height:450px}
/* Кейси з відео. Замість вбудованого плеєра — кадр із ролика: сторінка лишається легкою,
   а YouTube не отримує дані про глядача, поки той сам не натисне. Скрипт підміняє
   картинку на плеєр після кліку; без скрипта посилання просто відкриває ролик. */
.crop.project-visual img{width:100%;height:100%;object-fit:cover}
.case-films{padding:30px var(--gutter) 42px}
.film-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.ytcard{position:relative;display:block;background:#000;aspect-ratio:16/9;overflow:hidden}
.ytcard:hover{text-decoration:none;box-shadow:inset 0 0 0 2px var(--acid)}
.ytcard img{width:100%;height:100%;object-fit:cover;transition:opacity var(--motion-fast)}
.ytcard:hover img{opacity:.78}
.ytplay{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
 border-radius:0;background:color-mix(in srgb,var(--ink) 72%,transparent);border:2px solid var(--paper)}
.ytplay:after{content:'';position:absolute;left:24px;top:18px;border:13px solid transparent;
 border-left:20px solid var(--paper);border-right:0}
.ytcard:hover .ytplay{background:var(--acid);border-color:var(--acid)}
.ytcard:hover .ytplay:after{border-left-color:var(--ink)}
.film{margin:0}
.film figcaption{font-size:13px;padding:11px 2px 0;opacity:.72}
.ytcard iframe{width:100%;height:100%;border:0;display:block}
.case-films .section-head span{opacity:.7}
@media(max-width:540px){.film-grid{grid-template-columns:1fr}.ytplay{width:52px;height:52px;margin:-26px 0 0 -26px}
 .ytplay:after{left:20px;top:14px;border-width:11px;border-left-width:17px;border-right-width:0}}.draft-note{font-size:13px;padding:18px var(--gutter);border-bottom:1px solid var(--line);margin:0}.case-chapter{padding:42px var(--gutter);display:grid;grid-template-columns:.5fr 1fr 1.5fr;gap:40px}.case-chapter>p{font-size:12px}.case-chapter div p{font-size:17px}.audio-note,.page-back{padding:30px var(--gutter)}.contact{display:grid;grid-template-columns:1.6fr 1fr}.contact-hero{grid-column:1/-1;position:relative;padding:42px var(--gutter) 50px;overflow:hidden;border-bottom:1px solid var(--line)}.contact-hero h1{max-width:76%;position:relative}.contact-hero>p{position:relative;max-width:460px;margin:25px 0 0}.contact-hero>p:first-of-type{font-size:12px;margin:0 0 24px}.contact-form{padding:45px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}.contact-form>p{grid-column:1/-1;margin:0 0 8px}.wide{grid-column:1/-1}.contact-aside{border-left:1px solid var(--line);margin:45px 0;padding:0 var(--gutter)}.contact-aside>p{font-size:12px;margin-bottom:25px}.contact-aside>a{display:block;font-size:16px;font-weight:700;padding:16px 0;overflow-wrap:anywhere}.contact-aside small{display:block;font-size:12px;font-weight:400;line-height:1.5;margin-top:4px}.office{display:grid;grid-template-columns:.9fr 1.1fr 1fr;padding:18px var(--gutter);gap:18px}.office>div:first-child{padding:20px 0}.office p{font-size:14px}.global{padding:40px var(--gutter);display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:center}.global h2{margin:0}.global p{max-width:400px;margin:0}footer{padding:34px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:25px}footer p,footer>span,footer nav{font-size:11px;margin:0}footer nav{display:flex;gap:18px}footer .star{width:32px;height:32px}dialog{background:var(--paper);color:var(--ink);border:0;padding:40px;width:min(540px,calc(100% - 32px));max-height:90vh;overflow:auto}dialog::backdrop{background:color-mix(in srgb,var(--ink) 75%,transparent)}dialog form{display:grid;gap:20px}dialog small{font-size:12px}.dialog-close{position:absolute;right:12px;top:8px;font-size:30px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,150px);background:var(--acid);color:var(--ink);padding:16px 24px;z-index:100;font-size:14px;max-width:calc(100% - 30px);width:max-content;transition:transform var(--motion-base)}#toast.show{transform:translate(-50%,0)}
@media(max-width:1150px){:root{--header-h:64px}.callback-link{display:none}.topbar{gap:16px}.topbar nav{gap:14px}.topbar nav a{font-size:13px}.hero{grid-template-columns:minmax(0,1fr) minmax(140px,.32fr)}.hero-copy{font-size:16px}.slash-art i,.slash-art b{width:64px;right:45px}.slash-art b{right:0}.hero .slash-art i,.hero .slash-art b{width:clamp(54px,5vw,80px);right:clamp(30px,3.4vw,58px)}.hero .slash-art b{right:0}.company-grid{gap:20px}.company h2{font-size:20px}.group-story{gap:30px}}
@media(max-width:800px){:root{--header-h:60px}.topbar{min-height:60px;padding-block:8px}.brand .star{width:35px;height:35px}.brand-logo{height:34px}.menu-btn{display:block;font-size:12px;padding:12px 0}.header-actions{gap:18px}.topbar nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--paper) 14%,transparent);padding:20px var(--gutter);flex-direction:column;align-items:stretch}.topbar nav.open{display:flex}.topbar nav a{font-size:15px;padding:12px 0}.hero{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:space-between;padding-top:44px}.hero-headline{align-self:start}.hero h1{font-size:clamp(64px,12vw,112px)}.hero-copy{grid-column:1;grid-row:2;font-size:16px;padding-top:22px;max-width:400px}.hero>.slash-art{position:absolute;right:3%;top:auto;bottom:24%;width:110px}.hero .slash-art i,.hero .slash-art b{width:62px;height:clamp(180px,28vh,250px);right:38px;top:0}.hero .slash-art b{right:0;top:24%}.project-grid{gap:12px}.project h3{font-size:14px;left:12px}.project p{font-size:10px;left:12px}.services{gap:25px;padding-block:35px;grid-template-columns:1fr 1fr}.about{grid-template-columns:1.3fr .7fr}.about>.crop{display:none}.big-mark .star{width:100px}.big-mark img{width:100px;height:100px}.company-grid{grid-template-columns:1fr 1fr;gap:30px}.company ul{max-width:250px;margin-inline:auto}.company>a{display:block;width:max-content;margin:auto}.group-story{grid-template-columns:1fr 1fr}.group-story ol{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}.page-intro{min-height:360px}.intro-art{width:26%}.page-intro .lead{max-width:70%}.service-category{grid-template-columns:1fr 2fr;gap:25px}.service-category h2{font-size:22px}.service-category summary{font-size:14px;gap:8px}.service-category>div:first-child>span{float:none}.articles article{padding:20px}.articles h3{font-size:22px}.contact-form{gap:22px}.contact-aside{padding-inline:24px}.contact-aside>a{font-size:14px}.office{grid-template-columns:1fr 1fr}.office>.crop:last-child{display:none}.cta>a{padding-left:20px}.cta>a span{display:block;margin:0}.case-chapter{grid-template-columns:1fr 1fr;gap:20px}.case-chapter>p{grid-column:1/-1}footer{flex-wrap:wrap}footer p{max-width:190px}}
@media(max-width:540px){h1{font-size:44px}h2{font-size:28px}.hero{padding-top:34px}.hero h1{font-size:15.5vw;max-width:100%;line-height:.95}.hero-copy{max-width:90%;padding-top:25px}.hero>.slash-art{right:-14px;bottom:26%;width:86px}.hero .slash-art i,.hero .slash-art b{width:46px;height:clamp(140px,21vh,200px);right:26px}.hero .slash-art b{right:0;top:26%}.project-grid{grid-template-columns:1fr}.project h3{font-size:21px;left:20px;bottom:38px}.project p{font-size:12px;left:20px;bottom:20px}.work{padding-top:24px}.section-head a{font-size:14px}.services{grid-template-columns:1fr;gap:26px}.about{grid-template-columns:1fr}.about-copy{padding-bottom:15px}.big-mark{padding:10px 24px 35px;justify-content:flex-start}.big-mark .star{width:80px;height:80px}.big-mark img{width:80px;height:80px}.cta{display:block;padding-block:32px}.cta h2{font-size:44px}.cta>a{display:flex;align-items:center;justify-content:space-between;border-left:0;padding:20px 0 0}.cta>a span{font-size:32px}.page-intro{padding-top:30px;padding-bottom:35px;min-height:0}.page-intro h1{font-size:clamp(36px,11vw,44px);max-width:100%;overflow-wrap:normal}.page-intro .lead{max-width:90%;font-size:16px}.page-intro .intro-art{display:none}.company-grid{gap:25px 18px}.company h2{font-size:18px;line-height:1.25;min-height:44px}.company-caption{font-size:10px}.company ul{font-size:12px}.company a{font-size:10px}.logo-space{height:110px}.logo-space .crop{width:125px;height:80px}.company-mark .star{width:44px;height:44px}.company-mark img{width:44px;height:44px}.group-story{display:block}.group-story>div{margin-bottom:25px}.group-story ol{display:block;padding-left:20px}.group-feature{display:block}.group-feature>.crop{height:190px}.service-category{display:block;padding-block:25px}.service-category>div:first-child>span{float:left}.service-category h2{font-size:22px}.service-category details>p{margin-left:0}.service-category summary{font-size:15px}.service-category summary span{min-width:37px}.articles{grid-template-columns:1fr}.articles article,.articles article:first-child{padding:28px 0;border:0;border-bottom:1px solid var(--line)}.articles article.acid{padding:28px 20px}.articles h3{font-size:22px;margin-top:24px}.editorial{padding-top:25px}.editorial p{font-size:16px}.case-chapter{display:block}.case-banner{height:270px}.contact{display:block}.contact-hero .intro-art{display:none}.contact-hero h1{max-width:100%}.contact-form{grid-template-columns:1fr;padding-block:30px}.contact-form>*{grid-column:1}.contact-aside{margin:0;padding:28px var(--gutter);border-left:0;border-top:1px solid var(--line)}.office{grid-template-columns:1fr}.office>.crop{height:260px}.global{display:block;padding-block:30px}.global h2{margin-bottom:24px}footer{gap:25px;display:grid;grid-template-columns:1fr 1fr}footer p{font-size:10px}footer nav{font-size:11px}footer>span{font-size:10px}dialog{padding:35px 24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
[hidden]{display:none!important}

.logo-space .smm-logo{width:min(100%,230px);height:auto}.smm-logo img{display:block;width:100%;height:auto;object-fit:contain}
/* Оригінальні логотипи компаній групи. Горизонтальний SMM тягнеться шириною, майже квадратний GWS — висотою. */
.company-logo{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.company-logo img{display:block;object-fit:contain}
.logo-shoot{height:min(100%,118px);width:auto;max-width:100%}

.company-smm{position:relative}.company-smm:has(.company-instagram-link:hover),.company-smm:has(.company-instagram-link:focus-visible){outline:1px solid var(--acid);outline-offset:10px}

/* User-provided documentary photographs; privacy edits baked into image files. */
.team-photo img{display:block;width:100%;height:100%;object-fit:cover}.portrait-photo img{object-position:55% 28%}.speaker-photo img{object-position:46% center}.studio-photo{min-height:240px}.intro-art .intro-photo img{object-position:48% center}.about>.team-photo{min-height:390px}
@media(max-width:800px){.about>.team-photo{display:block;grid-column:1/-1;height:340px;min-height:0}.portrait-photo img{object-position:center 30%}.speaker-photo img{object-position:center 40%}}
@media(max-width:540px){.about>.portrait-photo{height:440px}.about>.speaker-photo{height:270px}.group-feature>.studio-photo{height:240px}}

/* Слайдер обраних проєктів: три картки в кадрі, крок вліво кожні 3 с.
   Клони для безшовної петлі створює app.js і позначає як службові, щоб редактор не зберігав їх у файл. */
.project-slider{overflow:hidden;flex:1;min-height:0;display:flex}
.project-slider .project-grid{display:flex;width:100%;--step:calc(100% + 18px)}
.project-slider .project-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-content:center}
.project-slider .project-grid{transition:transform var(--motion-section) cubic-bezier(.62,0,.32,1)}
.project-slider .project-grid.no-anim{transition:none}

@keyframes project-slide{
 0%,23.3%{transform:translateX(0);animation-timing-function:cubic-bezier(.62,0,.32,1)}
 33.3%,56.6%{transform:translateX(calc(var(--step)*-1));animation-timing-function:cubic-bezier(.62,0,.32,1)}
 66.6%,90%{transform:translateX(calc(var(--step)*-2));animation-timing-function:cubic-bezier(.62,0,.32,1)}
 100%{transform:translateX(calc(var(--step)*-3))}
}
@media(max-width:800px){.project-slider .project-page{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:540px){.project-slider .project-page{grid-template-columns:1fr;gap:12px}}
@media(min-width:541px) and (max-width:1000px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.project-slider .project-grid{transition:none}}

/* Відеофон першого екрана. Матеріал світлий і теплий, тому під текстом іде щільна затемнювальна
   підкладка з градієнтом: ліворуч, де заголовок, темніше за все; праворуч, біля лампочки, кадр видно. */
.hero-film{color:var(--paper);background:var(--ink);--line:color-mix(in srgb,var(--paper) 18%,transparent);border-bottom:0}
.hero-film>.hero-headline,.hero-film>.hero-copy{position:relative;z-index:1}
.hero-film>.slash-art{z-index:1}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink);pointer-events:none}
.hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 94%,transparent) 0%,color-mix(in srgb,var(--ink) 88%,transparent) 32%,color-mix(in srgb,var(--ink) 66%,transparent) 62%,color-mix(in srgb,var(--ink) 52%,transparent) 100%),linear-gradient(to top,color-mix(in srgb,var(--ink) 62%,transparent) 0%,transparent 38%)}
/* Поле клієнтів: вільне типографічне поле без рамок — таблиця виглядала надто офіційно. */
.clients{padding:22px var(--gutter) 26px;display:flex;flex-direction:column}
.client-row{--logo-h:clamp(16px,min(1.52vw,2.62vh),38px);list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;flex:1;gap:clamp(16px,2.4vh,30px) clamp(22px,3.2vw,58px)}
.client-row li{font-size:clamp(13px,1.15vw,19px);font-weight:600;letter-spacing:.1em;white-space:nowrap;opacity:.6;transition:opacity var(--motion-fast),color var(--motion-fast);cursor:default}
.client-row li:hover{opacity:1;color:var(--acid)}
.client-row.is-floating{display:block;position:relative;min-height:0}
.client-row.is-floating li{position:absolute;top:0;left:0;will-change:transform}
@media(max-width:640px){.client-row{gap:14px 22px}.client-row li{font-size:12px;letter-spacing:.07em}}
/* Логотипи клієнтів. Знаки різнобарвні, частина з них чорна — на темному тлі вони
   або зникали б, або сперечалися між собою. Тому кожен подається як маска й фарбується
   кольором рядка: наведення підсвічує логотип так само, як текстову назву.
   --ar — пропорція знака, --k — поправка на оптичну вагу (тонкі знаки трохи більші).
   Якщо браузер не вміє маски, лишається назва текстом. */
.client-row li.logo{--k:1}
@supports ((mask-image:url(#m)) or (-webkit-mask-image:url(#m))){
 .client-row li.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}
 .client-row li.logo>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:640px){.client-row{--logo-h:16px}}

main{position:relative}
/* Ідея = лампочка: 3D-сцена першого екрана (bulb3d.js). */
.bulb3d{--bulb-w:min(44vw,74vh,660px);--bulb-w:min(44vw,74svh,660px);--bulb-h:calc(var(--bulb-w)*1.33);position:absolute;top:calc(100vh - var(--bulb-h)*1.02);top:calc(100svh - var(--bulb-h)*1.02);right:clamp(12px,2vw,90px);width:var(--bulb-w);height:var(--bulb-h);pointer-events:none;z-index:20;--glow:0}
.bulb3d canvas{display:block;width:100%;height:100%}
.bulb3d-glow{position:absolute;left:50%;top:46%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:0;background:radial-gradient(circle,color-mix(in srgb,var(--acid) 78%,transparent) 0%,color-mix(in srgb,var(--acid) 26%,transparent) 38%,transparent 66%);opacity:calc(var(--glow)*.8);filter:blur(30px)}
@media(max-width:1000px){.bulb3d{display:none}}

/* Сторінка рухається екранами: два блоки різного розміру складаються рівно в один екран. */
@media(min-width:1000px) and (min-height:820px){
 /* Один ряд із чотирьох карток 16:9. 54px — три проміжки по 18, 130px — відступи блока
    (30+40) і рядок «портфоліо» (38+22). Смуга логотипів бере точний залишок. */
 /* Другий екран: портфоліо + логотипи + послуги. Портфоліо — рівно один ряд,
    послуги — 30% екрана, логотипи беруть точний залишок. Сума = екран під шапкою. */
 .home{--row-h:calc((100vw - var(--gutter)*2 - 54px)/4*.5625);--work-h:calc(var(--row-h) + 92px);
  --cl-h:calc((100svh - var(--header-h))*.16)}
 .home .work{height:var(--work-h)}
 .home .clients{height:var(--cl-h);padding-block:clamp(10px,1.6vh,20px)}
 .home .clients .client-row{gap:clamp(9px,1.5vh,20px) clamp(18px,2.5vw,46px)}
 .home .lead-block{height:calc(100svh - var(--header-h) - var(--work-h) - var(--cl-h))}
 .home .work,.home .clients,.home .lead-block{overflow:hidden}
 /* Блок заявки стиснутий під третину екрана: відступи й заголовок залежать від висоти вікна. */
 .home .lead-block{padding-block:clamp(16px,2.8vh,40px)}
 .home .lead-block .display{font-size:min(clamp(44px,5vw,80px),7.4vh)}
 .home .lead-block{padding-block:clamp(12px,2vh,40px)}
 .home .lead-block .lead-form,.home .lead-block .lead-grid{gap:clamp(8px,1.4vh,16px)}
 .home .lead-block .eyebrow{margin-bottom:clamp(8px,1.2vh,16px)}
 /* Сторінка карток займає всю висоту блоку і центрує вміст по вертикалі.
    Самі картки лишаються рівно 16:9 — нічого не розтягується, різниця йде у вільне поле.
    Сітка 4×2 за розрахунком вкладається на всіх розмірах, тому смуга логотипів не рухається. */
 .home .project-slider .project-page{height:100%}
}

/* Слід від відео під першим екраном. Лежить усередині блоку проєктів, нижче його вмісту,
   тому нічого не перекриває. Сильно розмитий і приглушений — читається як відсвіт, а не дзеркало. */
.hero-mirror{position:absolute;left:0;right:0;top:0;height:clamp(56px,7.6vh,96px);overflow:hidden;pointer-events:none;z-index:0}
.hero-mirror video{position:absolute;left:0;width:100%;object-fit:cover;transform:scaleY(-1) scale(1.06);transform-origin:bottom;opacity:.13;filter:blur(7px) saturate(.85)}
.hero-mirror:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--ink) 30%,transparent) 0%,color-mix(in srgb,var(--ink) 88%,transparent) 58%,var(--ink) 100%)}
.work{position:relative}
.work>.section-head,.work>.project-slider{position:relative;z-index:1}
/* Чотири картки тільки від 1400px — вужче вони перетворюються на смужки. */
@media(min-width:541px) and (max-width:1400px){
 .project-slider .project-grid{--step:calc((100% - 36px)/3 + 18px)}
 .project-slider .project-grid>.project{flex-basis:calc((100% - 36px)/3)}
}
/* На телефоні одна картка в кадрі, теж вертикальна. */
@media(max-width:540px){
 .project-slider .project-grid{--step:calc(100% + 12px)}
 .project-slider .project-grid>.project{flex-basis:100%}
}
/* Кнопки перемикання каруселі. Створює app.js, тому позначені як службові й у файл не зберігаються. */
.slider-nav{display:flex;gap:8px}
.slider-nav button{width:48px;height:48px;border:1px solid color-mix(in srgb,var(--paper) 30%,transparent);background:transparent;color:var(--paper);font-size:15px;line-height:1;display:grid;place-items:center;transition:background var(--motion-base),border-color var(--motion-base),color var(--motion-base)}
.slider-nav button:hover{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.work .section-head{gap:18px;justify-content:flex-end}
@media(max-width:640px){.slider-nav button{width:34px;height:34px}}

/* Липка шапка: у режимі редагування опускаємо її під фіксовану панель редактора. */
.editing .topbar{top:74px}
@media(max-width:800px){.editing .topbar{top:110px}}

/* ===== Брендбук GUYS 1.1 UK: шрифт, режими, компоненти ===== */
@font-face{font-family:Inter;src:url("/assets/fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Шапка й відеогерой темні, хоча не мають класу .dark */
.topbar,.hero-film{--surface:var(--graphite);--text:var(--bone);--heading:var(--bone);--action:var(--volt);--on-action:var(--graphite);--accent:var(--volt);--focus:var(--bone)}
/* Режим Volt: короткі заяви й рекламні акценти */
[data-theme="volt"]{--surface:var(--volt);--text:var(--graphite);--heading:var(--graphite);--action:var(--graphite);--on-action:var(--volt);--accent:var(--bordeaux);--focus:var(--graphite);--line:color-mix(in srgb,var(--graphite) 24%,transparent);background:var(--surface);color:var(--text)}
.brand-logo{display:block;height:40px;width:auto}
.brand-symbol{display:block;width:40px;height:40px}
.display{font-size:clamp(44px,5.6vw,80px);font-weight:800;letter-spacing:-.04em;line-height:1;text-transform:uppercase;margin:0 0 16px;overflow-wrap:break-word}
/* Кнопка: від 48px, 24px по боках, без заокруглення; наведення — підкреслення, натискання — зсув на 1px */
.g-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 24px;border:2px solid var(--action);background:var(--action);color:var(--on-action);font:600 16px/1.2 Inter,sans-serif;border-radius:0;cursor:pointer;text-decoration:none;transition:transform var(--motion-fast)}
.g-button:hover:not(:disabled){text-decoration:underline;text-underline-offset:4px}
.g-button:active:not(:disabled){transform:translateY(1px)}
.g-button:disabled{opacity:.45;cursor:not-allowed}.g-button[aria-busy="true"]{cursor:progress}
.g-label{display:block;font-size:14px;font-weight:600;line-height:1.4;margin:0 0 8px}
.g-field{display:block;width:100%;min-height:48px;padding:12px;font:400 16px/1.5 Inter,sans-serif;color:var(--text);background:transparent;border:1px solid var(--text);border-radius:0}
.g-field::placeholder{color:var(--text);opacity:.6}
textarea.g-field{min-height:128px;resize:vertical}
.g-field[aria-invalid="true"]{border-width:3px;padding:10px}
.g-error{font-size:14px;font-weight:600;line-height:1.4;margin:8px 0 0}
.g-help{font-size:12px;line-height:1.5;margin:0}
.g-help a,.lead-status a{text-decoration:underline;text-underline-offset:3px}
/* Єдина форма заявки: коротка (діалог, головна) і повна (контакти) */
.lead-form{display:grid;gap:16px;align-content:start;min-width:0}
.lead-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lead-form .field{min-width:0}
.lead-form .g-button{justify-self:start}
.lead-status{font-size:14px;font-weight:600;line-height:1.4;margin:0}
.lead-status:empty{display:none}
.lead-form--full{grid-template-columns:1fr 1fr;gap:24px 32px}
.lead-form--full .wide,.lead-form--full .lead-title,.lead-form--full .g-button,.lead-form--full .g-help,.lead-form--full .lead-status{grid-column:1/-1}
dialog .lead-form{margin-top:24px}
.dialog-lead{margin:0}
/* Блок заявки на головній: заклик ліворуч, форма праворуч */
.lead-block{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,96px);align-items:center;padding:48px var(--gutter)}
.lead-block .eyebrow{margin-bottom:16px}
.lead-links{font-size:18px;line-height:1.55;margin:0;max-width:62ch}
/* Акцентник: слово-посилання на суцільній підкладці */
.mark{background:var(--graphite);color:var(--volt);padding:.02em .28em .08em;text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mark:hover{text-decoration:underline;text-underline-offset:4px}
.dark .mark{background:var(--volt);color:var(--graphite)}
.privacy{padding:48px var(--gutter);display:grid;grid-template-columns:1fr 2fr;gap:32px;align-items:start}
.privacy h2{margin:0}.privacy p{max-width:65ch;font-size:18px;margin:0 0 16px}
@media(max-width:800px){.lead-block{grid-template-columns:minmax(0,1fr);gap:32px}.privacy{grid-template-columns:minmax(0,1fr)}}
@media(max-width:540px){.display{font-size:clamp(32px,10.5vw,44px)}.lead-row,.lead-form--full{grid-template-columns:minmax(0,1fr)}.lead-form--full>*{grid-column:1}.lead-links{font-size:16px}.privacy p{font-size:16px}}

/* ===== Форми за референсами власника в межах брендбука (13.09) =====
   Прямі кути, Inter, мітки великими, обов'язкові поля з позначкою, поле із заливкою,
   списки вибору, кнопка на всю ширину. Колір заливки й межі — з режиму секції. */
:root{--field-bg:color-mix(in srgb,var(--graphite) 4%,var(--bone));--field-line:color-mix(in srgb,var(--graphite) 30%,transparent);--field-line-focus:color-mix(in srgb,var(--graphite) 45%,transparent)}
.dark,.topbar,.hero-film{--field-bg:color-mix(in srgb,var(--bone) 6%,var(--graphite));--field-line:color-mix(in srgb,var(--bone) 24%,transparent);--field-line-focus:color-mix(in srgb,var(--bone) 40%,transparent)}
[data-theme="volt"]{--field-bg:color-mix(in srgb,var(--graphite) 7%,var(--volt));--field-line:color-mix(in srgb,var(--graphite) 45%,transparent);--field-line-focus:color-mix(in srgb,var(--graphite) 60%,transparent)}
.g-label{letter-spacing:.02em;text-transform:uppercase}
.req{color:var(--accent);margin-left:4px}
.g-field{background:var(--field-bg);border:1px solid var(--field-line);color:var(--text)}
.g-field:hover{border-color:color-mix(in srgb,var(--text) 60%,transparent)}
.g-field::placeholder{color:var(--text);opacity:.55}
.g-field[aria-invalid="true"]{border:3px solid var(--text);padding:10px}
.g-select{position:relative;color:var(--text)}
.g-select select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer}
.g-select::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.g-select option{color:var(--graphite);background:var(--bone)}
.lead-form{gap:16px}
.lead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.lead-grid .wide{grid-column:1/-1}
.lead-form .g-button{justify-self:stretch;width:100%}
/* Діалог «Поговорімо» — темна панель */
dialog.dark{width:min(660px,calc(100% - 32px));padding:40px;border:1px solid var(--line)}
dialog.dark h2{margin:0 56px 8px 0}
dialog .dialog-lead{margin:0;opacity:.8}
.dialog-close{width:48px;height:48px;display:grid;place-items:center;right:16px;top:16px;line-height:1}
/* Контакти: великі посилання вгорі, канали й адреса ліворуч, форма праворуч */
.contact-hero.dark{padding:clamp(48px,8vh,96px) var(--gutter) clamp(40px,6vh,72px);overflow:visible}
.contact-hero>p.eyebrow:first-of-type{font-size:14px;margin:0 0 24px}
.contact-hero>p.lead{max-width:560px;font-size:18px;margin:24px 0 0}
.contact-quick{display:flex;flex-wrap:wrap;gap:24px 64px;margin-top:48px}
.quick-link{display:grid;gap:8px;font-size:clamp(22px,2.4vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.2;text-decoration:none;border-bottom:1px solid var(--text);padding-bottom:8px;overflow-wrap:anywhere}
.quick-link span{font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;opacity:.72}
.quick-link:hover{text-decoration:none;color:var(--accent);border-color:var(--accent)}
.contact-main{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,96px);padding:clamp(48px,7vh,96px) var(--gutter);align-items:start;border-top:1px solid var(--line)}
.contact-channels{display:grid;border-top:1px solid var(--line)}
.channel{display:grid;gap:4px;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none}
a.channel:hover{text-decoration:none}a.channel:hover .channel-value{text-decoration:underline;text-underline-offset:4px}
.channel-label{font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;opacity:.72}
.channel-value{font-size:clamp(18px,1.6vw,24px);font-weight:600;font-style:normal;line-height:1.35;overflow-wrap:anywhere}
.channel-office .text-link{justify-self:start}
.contact-panel{border:1px solid var(--line);padding:clamp(24px,3vw,48px)}
.contact-panel h2{margin:0 0 24px}
/* Про нас: компактно, фото 4:5 не задає висоту блоку */
.about{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(40px,6vw,128px);align-items:center;padding:clamp(64px,10vh,128px) var(--gutter);min-height:0}
.about-copy{padding:0;max-width:760px}
.about-copy h2{margin:0 0 24px}
.about .body{max-width:62ch;font-size:18px;margin:0 0 32px}
.about .body .mark{background:var(--volt);color:var(--graphite);padding:.02em .24em .06em}
.about-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 24px;border-top:1px solid var(--line)}
.about-facts>div{padding:24px 24px 0 0;min-width:0}
.about-facts>div+div{padding-left:24px;border-left:1px solid var(--line)}
.about-facts dt{font-size:clamp(36px,3.6vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--volt)}
.about-facts dd{margin:8px 0 0;font-size:14px;line-height:1.4}
.about>.about-photo{display:block;justify-self:end;width:min(100%,420px);aspect-ratio:4/5;height:auto;min-height:0;margin:0}
.about>.about-photo img{width:100%;height:100%;object-fit:cover}
.about>.portrait-photo img{object-position:50% 28%}
.about>.speaker-photo img{object-position:47% 40%}
.footer-address{font-style:normal;font-size:12px;line-height:1.5}
.footer-address a{text-decoration:none}.footer-address a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:800px){.contact-main{grid-template-columns:minmax(0,1fr)}.about{grid-template-columns:minmax(0,1fr)}.about>.about-photo{display:block;justify-self:start;width:min(100%,360px);grid-column:auto;height:auto}}
@media(max-width:540px){.lead-grid{grid-template-columns:minmax(0,1fr)}.about-facts{grid-template-columns:minmax(0,1fr)}.about-facts>div+div{padding-left:0;border-left:0}dialog.dark{padding:32px 20px}}
/* Про нас: компактніше — фото до 360px, менші вертикальні відступи */
.about{padding:clamp(56px,8vh,96px) var(--gutter)}
.about>.about-photo{width:min(100%,360px)}
/* Діалог на телефоні: заголовок не рветься посеред слова */
@media(max-width:540px){dialog.dark h2{font-size:clamp(22px,7vw,28px);margin-right:48px}}

/* ===== Мітки розділів = пункти шапки (13.09) =====
   Той самий текст і та сама адреса, що в навігації. Тонке підкреслення підказує, що це посилання,
   при наведенні стає повним і набирає колір акценту режиму. */
.label-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
 text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:color var(--motion-fast),text-decoration-color var(--motion-fast)}
.label-link:hover{color:var(--accent);text-decoration-color:currentColor}
[data-theme="volt"] .label-link:hover{color:var(--graphite)}

/* ===== Про нас: приглушене фото на весь блок =====
   Фото заздалегідь затемнене (найсвітліше місце ≤40% яскравості), тож світлий текст має ≥4.5:1
   на будь-якій ділянці. Градієнт поверх ще сильніше гасить сторону з текстом. Висоту задає текст. */
.about.about--bg{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
 gap:clamp(32px,5vw,96px);align-items:end;padding:clamp(56px,8vh,96px) var(--gutter);min-height:0;background:var(--graphite)}
.about--bg::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--about-bg) center/cover no-repeat}
.about--bg::after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(90deg,color-mix(in srgb,var(--graphite) 80%,transparent) 0%,color-mix(in srgb,var(--graphite) 45%,transparent) 55%,color-mix(in srgb,var(--graphite) 15%,transparent) 100%)}
.about--bg .about-copy{max-width:680px}
.about--bg .about .body,.about--bg .body{margin-bottom:24px}
.about--bg .about-facts{margin:0}
@media(max-width:800px){.about.about--bg{grid-template-columns:minmax(0,1fr);align-items:start}
 .about--bg::after{background:color-mix(in srgb,var(--graphite) 60%,transparent)}}

/* ===== Тонші шапка й підвал, компактніший «Про нас» (13.09) ===== */
/* Логотип 32px заввишки = 110px завширшки; мінімум брендбука для GUYS без підпису — 100px */
.brand-logo{height:32px}
.topbar nav a{padding:6px 0}
.callback-link{padding:8px 0}
@media(max-width:800px){.brand-logo{height:30px}.menu-btn{padding:8px 0}}
footer{padding:16px var(--gutter);gap:24px}
footer .brand-symbol{width:28px;height:28px}
@media(max-width:540px){footer{gap:12px 24px;padding-block:16px}}
.about.about--bg{padding:clamp(32px,5vh,64px) var(--gutter);gap:clamp(24px,4vw,80px)}
.about--bg .eyebrow{margin-bottom:16px}
.about--bg .about-copy h2{margin-bottom:16px}
.about--bg .body{margin-bottom:16px}
.about--bg .about-facts dt{font-size:clamp(32px,3vw,48px)}
.about--bg .about-facts>div{padding-top:16px}
/* Блок стоїть одразу після першого екрана: віддзеркалення відео потрапляє в нього.
   Вміст піднімаємо над віддзеркаленням, фон і градієнт лишаються під ним. */
.about--bg>.about-copy,.about--bg>.about-facts{position:relative;z-index:1}
/* Висота шапки фіксована: вміст не розпирає її понад 64px (60px на телефоні), --header-h дорівнює їй точно */
.topbar{height:64px;min-height:0;box-sizing:border-box}.topbar *{line-height:1.2}
@media(max-width:800px){.topbar{height:60px}}

/* ===== Портфоліо без порожньої смуги над відео (13.09) =====
   Стрілки більше не стоять окремим рядком заввишки 48px — вони лежать на каруселі по краях.
   Над картками лишається тонкий рядок з міткою: 24 + 24 + 12 + 32 = 92px службової висоти. */
.home .work{padding:24px var(--gutter) 32px}
.home .work .section-head{height:24px;margin-bottom:12px;justify-content:flex-start}
.project-slider{position:relative}
.project-slider>.slider-nav{position:absolute;inset:0;z-index:4;display:flex;justify-content:space-between;align-items:center;
 padding:0 12px;margin:0;gap:0;pointer-events:none}
.project-slider>.slider-nav button{pointer-events:auto;background:color-mix(in srgb,var(--graphite) 80%,transparent);
 border-color:color-mix(in srgb,var(--bone) 28%,transparent);color:var(--bone)}
.project-slider>.slider-nav button:hover{background:var(--volt);border-color:var(--volt);color:var(--graphite)}

/* ===== Віддзеркалення відео: довге й розтушоване (13.09) =====
   Раніше смуга 56–96px обривалась твердим краєм — його було видно лінією.
   Тепер утричі довша, сильніше розмита і гасне маскою від стику донизу до нуля. */
.hero-mirror{height:clamp(160px,30vh,320px);
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 18%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.08) 75%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 18%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.08) 75%,transparent 100%)}
.hero-mirror video{opacity:.2;filter:blur(16px) saturate(.8);transform:scaleY(-1) scale(1.12)}
/* На вузьких екранах сторінка каруселі — стовпчик карток, центр по висоті припадає на стик між ними.
   Тут стрілки стоять окремим рядком під каруселлю, справа; розмір 48px — мінімум брендбука. */
@media(max-width:800px){
 .project-slider{flex-direction:column}
 .project-slider>.slider-nav{position:static;justify-content:flex-end;gap:8px;padding:12px 0 0;pointer-events:auto}
 .project-slider>.slider-nav button{width:48px;height:48px}
}
/* «Про нас» на головній — суцільний чорний: фото на фоні виглядало наляпистим (13.09).
   Розкладку лишаємо від .about--bg, прибираємо лише фото й градієнт.
   Фон збережено: assets/team/about-bg-studio.jpg — повернути можна, прибравши about--plain
   і додавши секції style="--about-bg:url(/assets/team/about-bg-studio.jpg)". */
.about--plain::before,.about--plain::after{content:none}

/* ===== Форми без підсвічування, «Почнімо проєкт» (13.09) ===== */
/* Поле при натисканні не спалахує товстою рамкою — лише ледь світлішає контур.
   Брендбук вимагає не прибирати фокус без заміни: заміна — зміна кольору межі. */
.g-field:focus,.g-field:focus-visible{outline:none;box-shadow:none;border-color:var(--field-line-focus,var(--field-line))}
.g-field:hover{border-color:var(--field-line-focus,var(--field-line))}
.g-field:disabled{opacity:.5;cursor:not-allowed}
.g-select:has(select:disabled)::after{opacity:.4}
/* Вужчі вікна: діалог 560px, форма на головній до 520px */
dialog.dark{width:min(560px,calc(100% - 32px))}
.lead-block .lead-form{width:100%;max-width:520px;justify-self:end}
/* Фірмовий знак між словами заголовка — як акцент у референсі «Start a project» */
.display-mark{display:inline-block;width:.78em;height:.78em;vertical-align:-.04em;margin:0 .06em}
@media(max-width:800px){.lead-block .lead-form{justify-self:stretch;max-width:none}}

/* =====================================================================
   GUYS v2 «ВАУ» (13.09) — нова версія дизайну за референсом власника.
   Матриця кольорів, шрифти й правила — memory/BRAND-V2.md. Шар нижче перекриває v1:
   бордовий замінено фіолетовим, заголовки — Oswald, рукописні акценти — Caveat.
   ===================================================================== */
@font-face{font-family:Oswald;src:url("/assets/fonts/Oswald.ttf") format("truetype");font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:Caveat;src:url("/assets/fonts/Caveat.ttf") format("truetype");font-weight:400 700;font-style:normal;font-display:swap}
:root{
 /* Чотири кольори */
 --bone:#F2EFE9;--graphite:#0D0D0F;--volt:#C4F000;--violet:#A010F0;
 /* Відтінки — лише змішуванням базових, нових кольорів не вводимо */
 --graphite-72:color-mix(in srgb,var(--graphite) 72%,var(--bone));
 --graphite-30:color-mix(in srgb,var(--graphite) 30%,transparent);
 --graphite-14:color-mix(in srgb,var(--graphite) 14%,transparent);
 --bone-72:color-mix(in srgb,var(--bone) 72%,var(--graphite));
 --bone-30:color-mix(in srgb,var(--bone) 30%,transparent);
 --bone-16:color-mix(in srgb,var(--bone) 16%,transparent);
 --violet-12:color-mix(in srgb,var(--violet) 12%,var(--bone));
 /* Старі імена з v1 ведуть на нову палітру */
 --bordeaux:var(--violet);--wine:var(--violet);--paper:var(--bone);--ink:var(--graphite);--acid:var(--volt);
 /* Шрифти */
 --font-display:Oswald,"Arial Narrow",sans-serif;--font-body:Inter,system-ui,sans-serif;--font-hand:Caveat,"Segoe Print",cursive;
 /* Світлий режим (Bone) */
 --surface:var(--bone);--text:var(--graphite);--heading:var(--graphite);--accent:var(--violet);--on-accent:var(--bone);
 --action:var(--graphite);--on-action:var(--bone);--action-hover:var(--violet);--on-action-hover:var(--bone);
 --doodle:var(--violet);--focus:var(--graphite);--line:var(--graphite-14);
 --field-line:color-mix(in srgb,var(--graphite) 55%,var(--bone));--field-line-focus:color-mix(in srgb,var(--graphite) 85%,var(--bone))
}
/* Темний режим (Graphite): акцент і каракулі — Volt, кнопка — Bone */
.dark,footer{--surface:var(--graphite);--text:var(--bone);--heading:var(--bone);--accent:var(--volt);--on-accent:var(--graphite);
 --action:var(--bone);--on-action:var(--graphite);--action-hover:var(--volt);--on-action-hover:var(--graphite);
 --doodle:var(--volt);--focus:var(--bone);--line:var(--bone-16);
 --field-line:color-mix(in srgb,var(--bone) 50%,var(--graphite));--field-line-focus:color-mix(in srgb,var(--bone) 85%,var(--graphite))}
/* Фіолетовий режим — короткі смуги-заяви */
[data-theme="violet"]{--surface:var(--violet);--text:var(--bone);--heading:var(--bone);--accent:var(--volt);--on-accent:var(--graphite);
 --action:var(--bone);--on-action:var(--graphite);--action-hover:var(--volt);--on-action-hover:var(--graphite);
 --doodle:var(--volt);--focus:var(--bone);--line:var(--bone-30);background:var(--surface);color:var(--text)}

body{font-family:var(--font-body);background:var(--bone);color:var(--graphite)}
h1,h2,.display{font-family:var(--font-display);font-weight:700;letter-spacing:0;line-height:.95;text-transform:uppercase;color:var(--heading)}
h1{font-size:clamp(48px,6.4vw,112px)}
h2{font-size:clamp(34px,3.4vw,56px);line-height:1.02}
h3{font-family:var(--font-body)}
.accent{color:var(--accent)}
.eyebrow,.section-head p,.section-title>p{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.16em}
.label-link:hover{color:var(--accent)}
.mark{background:var(--violet);color:var(--bone)}
.dark .mark{background:var(--volt);color:var(--graphite)}

/* Іконки та каракулі: тонка лінія, товщина не залежить від масштабу */
.i-ne{width:.95em;height:.95em;flex:none;display:inline-block;vertical-align:-.12em}
.i-arrow{width:36px;height:22px;flex:none}
.i-ne path,.i-arrow path,.doodle path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.doodle{color:var(--doodle);overflow:visible;pointer-events:none;max-width:none}
.doodle path{stroke-width:2.4}
@keyframes v2-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ----- Шапка: світла тонка підкладка, липка ----- */
.topbar{background:var(--bone);color:var(--graphite);border-bottom:1px solid var(--graphite-14);
 --surface:var(--bone);--text:var(--graphite);--heading:var(--graphite);--action:var(--graphite);--on-action:var(--bone);--accent:var(--violet);--focus:var(--graphite);
 --field-bg:transparent}
.brand{flex-direction:column;align-items:flex-start;gap:0}
.brand-logo{height:36px}
.brand-tag{font:600 8px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;margin:-1px 0 0 6px}
.topbar nav a{font:500 15px/1.2 var(--font-body);text-transform:none;letter-spacing:0;padding:6px 0;border-bottom:2px solid transparent}
.topbar nav a:hover{text-decoration:none;border-bottom-color:var(--graphite)}
.topbar nav [aria-current]{color:var(--graphite);border-bottom:2px solid var(--violet)}
.languages{font-weight:600}
.callback-link{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--graphite);border-radius:999px;padding:9px 18px;font:600 15px/1.2 var(--font-body);
 transition:background var(--motion-base),color var(--motion-base)}
.callback-link:hover{background:var(--graphite);color:var(--bone);text-decoration:none}
.menu-btn{font-weight:600}
@media(max-width:800px){.topbar nav{background:var(--bone);border-bottom:1px solid var(--graphite-14)}.brand-logo{height:28px}.brand-tag{font-size:7px}}

/* ----- Кнопки й поля ----- */
.g-button{gap:12px;min-height:52px;padding:14px 26px;font:600 15px/1.2 var(--font-body);background:var(--action);border-color:var(--action);color:var(--on-action);
 transition:background var(--motion-base),border-color var(--motion-base),color var(--motion-base),transform var(--motion-fast)}
.g-button:hover:not(:disabled){text-decoration:none;background:var(--action-hover);border-color:var(--action-hover);color:var(--on-action-hover)}
.g-label{text-transform:none;letter-spacing:0;font-weight:500;font-size:14px;margin-bottom:2px}
.g-field{background:transparent;border:0;border-bottom:1px solid var(--field-line);padding:10px 0;min-height:46px}
.g-field:hover,.g-field:focus,.g-field:focus-visible{border-color:var(--field-line-focus)}
.g-field[aria-invalid="true"]{border:0;border-bottom:3px solid var(--text);padding:10px 0 8px}
textarea.g-field{min-height:96px}
.g-select select{padding-right:32px}.g-select::after{right:6px}
.g-select option{color:var(--graphite);background:var(--bone)}
/* Згода на обробку даних: квадрат з галочкою кольору акценту режиму */
.consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px 12px;align-items:center;font-size:13px;line-height:1.4}
.consent label{cursor:pointer}
.consent a{text-decoration:underline;text-underline-offset:3px}
.consent .g-error{grid-column:1/-1;margin:0}
.g-check{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;border:1.5px solid currentColor;background:transparent;display:grid;place-content:center;cursor:pointer;border-radius:0}
.g-check::before{content:"";width:11px;height:6px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:translateY(-1px) rotate(-45deg);opacity:0}
.g-check:checked{background:var(--accent);border-color:var(--accent)}
.g-check:checked::before{opacity:1}
.g-check[aria-invalid="true"]{border-width:3px}

/* ----- Діалог «Почнімо проєкт» ----- */
dialog.dark h2{font-size:clamp(32px,3vw,44px)}
dialog .lead-form{gap:20px}

/* ----- Підвал: темний, лінія з відступом від країв ----- */
footer{position:relative;background:var(--graphite);color:var(--bone);padding:28px var(--gutter);display:flex;align-items:center;flex-wrap:wrap;gap:16px 40px;border-top:0}
footer::before{content:"";position:absolute;top:0;left:calc(var(--gutter)*.6);right:calc(var(--gutter)*.6);height:1px;background:var(--bone-16)}
footer .brand{margin-right:auto}
footer nav{display:flex;flex-wrap:wrap;gap:10px 28px}
footer nav a,footer p,footer>span{font-size:14px}
.footer-address{font-size:14px;color:var(--bone-72)}
footer>.footer-copy{font-size:12px;color:var(--bone-72)}

/* ----- Внутрішні сторінки: той самий каркас, нова мова ----- */
.page-intro h1{font-size:clamp(52px,7vw,124px);line-height:1.04}
.page-intro:not(:has(.intro-art)){min-height:0;padding-bottom:clamp(48px,7vh,80px)}
.page-intro .lead{font-size:clamp(17px,1.3vw,21px)}
.contact-hero h1{font-size:clamp(52px,7vw,124px);line-height:1.04}
.cta h2{font-family:var(--font-display);font-size:clamp(52px,6.4vw,112px);letter-spacing:0;line-height:.92}
.cta>a{font-weight:600;font-size:14px;letter-spacing:.04em}
.global h2{font-size:clamp(40px,4.4vw,72px)}
/* Фото у вступі — прямокутне, чорно-біле; діагоналі v1 замінені рукописною зіркою */
.intro-art{inset:0 var(--gutter) 0 auto;width:28%}
.intro-art>.crop{clip-path:none;inset:clamp(36px,6vh,56px) 0 clamp(44px,7vh,64px) 14%}
.intro-art .intro-photo img{filter:grayscale(1) contrast(1.06)}
.slash-art i,.slash-art b{display:none}
.slash-art,.intro-art .slash-art{position:absolute;inset:auto;left:0;top:14%;width:clamp(96px,10vw,168px);height:clamp(96px,10vw,168px);min-height:0;z-index:2;
 background:var(--doodle);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3C52 34 60 46 97 50C60 54 52 66 50 97C48 66 40 54 3 50C40 46 48 34 50 3Z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3C52 34 60 46 97 50C60 54 52 66 50 97C48 66 40 54 3 50C40 46 48 34 50 3Z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.intro-art:not(:has(.crop)) .slash-art{left:auto;right:6%;top:18%;width:clamp(140px,16vw,260px);height:clamp(140px,16vw,260px)}
.service-category>div:first-child>span{font-family:var(--font-display);font-weight:700;color:var(--violet)}
.service-category h2{font-family:var(--font-display);font-size:clamp(26px,2.2vw,34px);font-weight:700;text-transform:uppercase}
.service-category summary span{color:var(--violet);opacity:1;font-weight:600}
.service-category summary b{color:var(--violet)}
.company h2{font-family:var(--font-display);font-size:clamp(22px,1.8vw,28px);text-transform:uppercase}
.about-facts dt{font-family:var(--font-display);font-weight:700;letter-spacing:0}
.contact-panel h2,.privacy h2{font-size:clamp(32px,3vw,48px)}
.articles h3{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(24px,2vw,30px);line-height:1.05}
.editorial h2{font-size:clamp(34px,3.2vw,52px)}
.case-chapter>p,.award>p:first-child{font-size:12px;font-weight:600;letter-spacing:.16em}
.project:hover .project-visual{box-shadow:inset 0 0 0 2px var(--volt)}

/* =====================  Головна v2  ===================== */
.home-v2 main>section{border-bottom:0}
/* 1. Перший екран: заголовок ліворуч, шоурил у портретній рамці праворуч */
.v2-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);gap:clamp(32px,5vw,104px);align-items:center;
 padding:clamp(40px,7vh,88px) var(--gutter) clamp(56px,9vh,112px)}
.v2-hero-copy{min-width:0}
.v2-hero-title{font-size:clamp(56px,7.8vw,156px);line-height:.98;margin:0 0 clamp(24px,3.4vh,40px)}
.v2-hero-title .line{display:block;white-space:nowrap}
.circled{position:relative;display:inline-block;color:var(--violet)}
.doodle-oval{position:absolute;left:-12%;top:-20%;width:124%;height:140%;animation:v2-draw .8s .3s cubic-bezier(.6,0,.3,1) both}
.v2-hero-lead{font-size:clamp(17px,1.4vw,22px);line-height:1.45;max-width:36ch;margin:0 0 clamp(28px,4vh,44px)}
.v2-portrait{position:relative;aspect-ratio:8/9;width:100%;background:var(--graphite);overflow:hidden}
.v2-portrait video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 2. Портфоліо */
.v2-work{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,2fr);gap:clamp(40px,6vh,64px) clamp(20px,2.2vw,36px);align-items:end;
 padding:clamp(56px,9vh,104px) var(--gutter)}
.v2-work-head .eyebrow{margin-bottom:clamp(20px,3vh,32px)}
.v2-work-title{font-size:clamp(48px,5.6vw,108px);line-height:.9;margin:0}
.v2-work-title a{display:inline-block}
.v2-work-title a:hover{text-decoration:none}
.doodle-arrow{display:inline-block;width:.6em;height:.38em;margin-left:.06em;vertical-align:.1em}
.v2-case{min-width:0}
.v2-case a{display:block}
.v2-case a:hover{text-decoration:none}
.v2-case-media{aspect-ratio:16/9;overflow:hidden;background:#000}
.v2-case-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--motion-section) ease-out}
.v2-case a:hover .v2-case-media img{transform:scale(1.03)}
/* Рамка наведення — всередині картинки: зовнішня тінь обрізалась краєм слайдера (overflow:hidden) зверху й справа */
.v2-case-media{position:relative}
.v2-case-media::after{content:"";position:absolute;inset:0;border:2px solid var(--volt);opacity:0;transition:opacity var(--motion-fast);pointer-events:none;z-index:1}
.v2-case a:hover .v2-case-media::after,.v2-case a:focus-visible .v2-case-media::after{opacity:1}
.v2-case a:focus-visible{outline:none}
.v2-case a:focus-visible .v2-case-media::after{border-width:3px}
.v2-case-cap{display:flex;flex-wrap:wrap;gap:4px 12px;margin:14px 0 0;font-size:14px;line-height:1.4}
.v2-case-cap b{font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.v2-case-cap span{color:var(--bone-72)}

/* 3. Послуги: номери, назви, опис, стрілка; рукописна рамка навколо активного рядка */
.v2-services{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(40px,6vw,128px);align-items:center;
 padding:clamp(64px,10vh,120px) var(--gutter) clamp(56px,8vh,96px)}
.v2-services h2{font-size:clamp(52px,5.4vw,104px);line-height:1.04;margin:0;white-space:nowrap}
.v2-svc{list-style:none;margin:0;padding:0}
.v2-svc-row{position:relative}
.v2-svc-row+.v2-svc-row{border-top:1px solid var(--graphite-30)}
.v2-svc-row a{position:relative;display:grid;grid-template-columns:40px minmax(max-content,.9fr) minmax(0,1.4fr) 40px;align-items:center;gap:24px;padding:28px 12px}
.v2-svc-row a:hover{text-decoration:none}
.v2-svc .n{font-size:15px;font-weight:500;color:var(--violet)}
.v2-svc .t{font:600 clamp(22px,1.9vw,32px)/1.05 var(--font-display);white-space:nowrap}
.v2-svc .d{font-size:15px;line-height:1.5;color:var(--graphite-72)}
.v2-svc .i-arrow{display:block;transition:transform var(--motion-fast)}
.v2-svc-row a:hover .i-arrow,.v2-svc-row a:focus-visible .i-arrow{transform:translateX(6px)}
/* Анімації рядків послуг — див. блок «Послуги: у кожного рядка своя рукописна анімація» нижче */
@keyframes v2-draw-h{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* 4. Процес */
.v2-process{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(40px,6vw,128px);align-items:center;
 padding:clamp(56px,9vh,104px) var(--gutter) clamp(64px,10vh,120px)}
.v2-process::before{content:"";position:absolute;top:0;left:calc(var(--gutter)*.6);right:calc(var(--gutter)*.6);height:1px;background:var(--graphite-30)}
.v2-process h2{font-size:clamp(44px,4.8vw,92px);line-height:1.18;margin:0;white-space:nowrap}
.v2-steps{--steps-gap:clamp(40px,5vw,88px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--steps-gap)}
.v2-steps li{position:relative;min-width:0}
.v2-steps .n{display:block;font:700 clamp(34px,2.8vw,48px)/1 var(--font-display);color:var(--accent);margin-bottom:10px}
.v2-steps h3{font:600 clamp(20px,1.5vw,24px)/1.15 var(--font-display);margin:0 0 10px}
.v2-steps p{font-size:14px;line-height:1.5;margin:0;color:color-mix(in srgb,var(--text) 72%,var(--surface));max-width:28ch}
.v2-steps li:not(:last-child)::after{content:"";position:absolute;top:calc(clamp(34px,2.8vw,48px) + 12px);right:calc((var(--steps-gap) + 30px)/-2);width:30px;height:18px;background:var(--text);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M1 12h37M30 4l8 8-8 8' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M1 12h37M30 4l8 8-8 8' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}

/* 5. Заявка */
.v2-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,128px);align-items:center;
 padding:clamp(64px,10vh,120px) var(--gutter) clamp(56px,9vh,104px)}
.v2-lead h2{font-size:clamp(64px,8.4vw,160px);line-height:.88;margin:0}
.v2-hand{font:600 clamp(34px,3.6vw,64px)/1 var(--font-hand);color:var(--accent);margin:.42em 0 0 .2em;transform:rotate(-4deg);transform-origin:left center}
.v2-form{width:100%;max-width:560px;justify-self:end;gap:24px}
.v2-form .lead-grid{grid-template-columns:minmax(0,1fr);gap:24px}
.v2-form .g-button{justify-self:start;width:auto}

@media(prefers-reduced-motion:reduce){.doodle{animation:none!important}}
@media(max-width:1000px){
 .v2-work{grid-template-columns:minmax(0,1fr);align-items:start}
 .v2-work-head{grid-column:1/-1}
 .v2-work-title .br-lg{display:none}
 .v2-services,.v2-process{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media(max-width:800px){
 .v2-hero{grid-template-columns:minmax(0,1fr);gap:40px}
 .v2-portrait{max-width:560px}
 .v2-lead{grid-template-columns:minmax(0,1fr);gap:40px}
 .v2-form{justify-self:stretch;max-width:none}
 .v2-svc-row a{grid-template-columns:32px minmax(0,1fr) 36px;gap:8px 14px;padding:22px 8px}
 .v2-svc .n{grid-column:1;grid-row:1}.v2-svc .t{grid-column:2;grid-row:1}.v2-svc .arr{grid-column:3;grid-row:1}.v2-svc .d{grid-column:2/4;grid-row:2}
 .v2-steps{grid-template-columns:minmax(0,1fr);gap:32px}
 .v2-steps li:not(:last-child)::after{display:none}
 footer{gap:16px 24px}
 .intro-art{display:none}
}
@media(max-width:800px){.v2-services h2,.v2-process h2,.v2-svc .t{white-space:normal}}
@media(max-width:540px){
 .v2-hero-title{font-size:clamp(38px,11.2vw,62px)}
 .v2-work .project-page{grid-template-columns:minmax(0,1fr)}
 .v2-work-title{font-size:clamp(44px,13vw,64px)}
 .v2-services h2,.v2-lead h2{font-size:clamp(48px,14vw,72px)}
 .v2-process h2{font-size:clamp(40px,12vw,60px)}
 footer nav{gap:10px 20px}
}
/* v2: кнопка «Почати проєкт» у шапці — ховаємо там, де не вміщається поруч із меню;
   на головній її дублює кнопка першого екрана, на всіх сторінках — пункт «Контакти». */
@media(max-width:1150px) and (min-width:801px){.callback-link{display:none}}
@media(max-width:540px){.callback-link{display:none}}

/* ===== v2: портфоліо — слайдер по дві картки й смуга логотипів (13.09) =====
   Сторінки .project-page по дві картки гортає той самий скрипт каруселі, що в v1 (крок 4.5 с, стрілки).
   Нижче — тонке поле логотипів клієнтів з дрейфом і «антимагнітом» курсора (фізика з v1). */
.v2-work .project-slider{min-width:0}
.v2-work .project-page{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.2vw,36px);align-content:start}
.v2-work .project-grid{gap:clamp(20px,2.2vw,36px)}
.v2-work .project-slider>.slider-nav{bottom:40px}
.v2-work .project-slider>.slider-nav button{width:44px;height:44px}
.v2-clients{grid-column:1/-1;display:flex;flex-direction:column;height:clamp(96px,13vh,140px);padding-top:clamp(14px,2vh,22px);border-top:1px solid var(--bone-16)}
.v2-clients .client-row{--logo-h:clamp(15px,1.3vw,24px);flex:1;min-height:0}
@media(max-width:800px){
 .v2-work .project-slider>.slider-nav{bottom:auto}
 .v2-clients{height:auto;padding:20px 0 4px}
 .v2-clients .client-row{--logo-h:16px;gap:14px 22px}
}
/* Смуга логотипів закриває блок портфоліо — великий нижній відступ секції під нею не потрібен */
.v2-work{padding-bottom:clamp(20px,3vh,36px)}
@media(max-width:800px){.v2-work{padding-bottom:40px}}
/* Телефон: на сторінці слайдера картки одна під одною (правило вище задає дві колонки й стоїть пізніше за медіазапит) */
@media(max-width:540px){.v2-work .project-page{grid-template-columns:minmax(0,1fr)}}

/* ===== Послуги: у кожного рядка своя рукописна анімація (13.09) =====
   01 — фіолетова рамка навколо рядка; 02 — два товсті штрихи Volt під назвою, як фломастером;
   03 — фіолетовий овал навколо назви; 04 — фіолетове коло навколо стрілки.
   Малюється за 0.15 с (утричі швидше, ніж було). Рядок 02 підсвічений у спокої, як у референсі. */
.v2-svc{--draw-ease:cubic-bezier(.25,.8,.25,1)}
/* Рисунок лишається на рядку, на який наводили останнім (клас is-active переставляє app.js при наведенні й фокусі).
   Без скрипта і в редакторі підсвічений рядок 02 (is-default). Стан — перехід clip-path, нічого не перезапускається, тож не блимає. */
.v2-svc .doodle{clip-path:inset(0 100% 0 0);transition:clip-path .08s linear}
.v2-svc:not(.is-js) .v2-svc-row.is-default .doodle,
.v2-svc.is-js .v2-svc-row.is-active .doodle{clip-path:inset(0 0 0 0);transition:clip-path .15s var(--draw-ease)}
/* Велика смуга Volt — на третину повільніша за інші рисунки */
.v2-svc.is-js .v2-svc-row.is-active .doodle-band{transition-duration:.22s}
/* До появи блока на екрані рисунок схований, потім прокреслюється */
.v2-svc.is-js.is-waiting .v2-svc-row .doodle{clip-path:inset(0 100% 0 0);transition:none}
.v2-svc .arr{position:relative;display:inline-flex;justify-self:end}
.v2-svc .t-in{position:relative;display:inline-block;isolation:isolate}
/* 01 */
.doodle-box{position:absolute;left:-8px;top:-3px;width:calc(100% + 16px);height:calc(100% + 6px)}
/* 02: широка смуга Volt від лінії до лінії через увесь рядок, краї рвані, як у фломастера
   (SVG-фільтр: зсув рядків пікселів дає «щетинисті» кінці, друга хвиля — нерівні верх і низ, шум — зерно).
   Volt під графітовим текстом — виняток, погоджений власником. */
.v2-svc .v-marker a{isolation:isolate}
.doodle-band{position:absolute;left:-16px;top:0;width:calc(100% + 32px);height:100%;z-index:-1;color:var(--volt)}
/* «02» фіолетовим на Volt — лише 4.13:1, тож поки смугу видно, номер графітовий */
.v2-svc .v-marker .n{transition:color var(--motion-fast)}
.v2-svc:not(.is-js) .v-marker.is-default .n,.v2-svc.is-js:not(.is-waiting) .v-marker.is-active .n{color:var(--graphite)}
/* 03 */
.doodle-ring{position:absolute;left:-16%;top:-56%;width:132%;height:212%}
/* 04 */
.doodle-circle{position:absolute;left:-44%;top:-78%;width:188%;height:256%}

/* ===== Рукописна стрілка від «вау.» до «Стратегії» (13.09) =====
   Малює app.js у пікселях за реальними координатами слова й рядка (тому стрілка не розтягується),
   тонка фіолетова лінія з легкою нерівністю фломастера; прокреслюється, коли блок з'являється. Від 1001px. */
.v2-services{position:relative}
.doodle-curl{position:absolute;pointer-events:none;overflow:visible;color:var(--violet);z-index:1}
.doodle-curl path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
 stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);transition:stroke-dashoffset .55s cubic-bezier(.3,.6,.25,1)}
.v2-svc.is-inview~.doodle-curl path{stroke-dashoffset:0}
@media(max-width:1000px){.doodle-curl{display:none}}
@media(prefers-reduced-motion:reduce){.doodle-curl path{stroke-dashoffset:0}}
/* v2 (14.09): «Хаос ідей» — темний блок, «Є задача?» — світлий (просьба власника). Кольори кроків і рукописної фрази — з токенів режиму:
   на темному номери Volt, на світлому «давай розберемося» фіолетовим (Volt на Bone заборонений). Лінія над темним блоком не потрібна. */
.v2-process.dark::before{content:none}