/* Адаптация шаблона LAB под кейс об инструменте и двух проектах. */
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{background:var(--blue)}
.skip{position:absolute;left:20px;top:-100px;z-index:100;background:white;padding:16px}.skip:focus{top:10px}
a:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.hero__eyebrow{font-size:17px;white-space:normal}
.hero__title-ph{display:flex;font-size:38px;line-height:1.05;font-family:var(--f-head);text-align:left;justify-content:flex-start;text-transform:uppercase;background:transparent}
.ph small{display:block;font-family:var(--f-body);font-size:11px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;margin-top:12px}
.hero__lead{font-size:24px;line-height:1.25;max-width:495px}
.facts dd{font-size:20px;line-height:1.35}.facts dt{font-size:22px;margin-bottom:12px}
.media-slot{width:100%;max-width:calc(var(--slot-w)*1px);height:auto;aspect-ratio:var(--slot-w)/var(--slot-h);font-size:14px;line-height:1.5}
.media-slot>span{max-width:90%}
.stats{grid-template-columns:1fr 1fr 1.4fr;gap:25px;margin-bottom:36px}.stat__label{font-size:12px;line-height:1.5}.stat__value{font-size:36px}.stat{min-height:100px}
.source-note{font-size:11px;line-height:1.5;margin-top:16px;max-width:680px}
.s-context{padding-bottom:105px}.s-context .ctx-lead{max-width:660px;margin:30px 0}.d-context{left:calc(50% + 185px);top:20px;opacity:.6}
.cards .card{position:var(--card-position,sticky);top:var(--stick,calc(var(--stack-top,40px) + var(--card-index,0)*18px));z-index:calc(var(--card-index,0) + 1);overflow:visible;margin-bottom:28px;box-shadow:0 -8px 25px #0e0e0e18}
.cards .card__in{padding:44px 55px 52px;overflow:hidden;border-radius:18px}
.cards .card__title{font-size:29px;line-height:1.3;margin:0 0 30px;white-space:normal;overflow-wrap:normal}
.eyebrow{font-size:11px;line-height:1.5;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px}
.card--1,.card--3{color:white}.card--2{color:var(--blue)}.card--2 .card__title{color:var(--blue)}
.case-grid{display:grid;grid-template-columns:289px minmax(0,1fr);gap:36px;align-items:start}.case-grid--equal{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.copy,.conditions>div{min-width:0}.copy p,.conditions p{font-size:14px;line-height:1.55;margin:0 0 16px}.copy h3,.conditions h3{font-family:var(--f-head);font-size:17px;line-height:1.4;text-transform:uppercase;margin:25px 0 12px}
.copy h3:first-child{margin-top:0}.mini-stats{display:grid;gap:18px;margin:24px 0}.mini-stats strong{display:block;font-family:var(--f-head);font-size:29px;line-height:1.25}.mini-stats span{display:block;font-size:12px;line-height:1.5;margin-top:6px}
.case-result{font-family:var(--f-head);font-size:20px;line-height:1.5;text-transform:uppercase;margin-top:32px;padding-top:25px;border-top:1px solid currentColor}
.conditions{display:grid;grid-template-columns:1fr 1fr;gap:22px 36px}.conditions h3{margin-top:0}
.s-creatives{padding:65px 0 105px}.s-creatives .h2{margin-bottom:38px}.creative-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 32px}.creative-grid figure{margin:0;min-width:0}.creative-grid figcaption{font-family:var(--f-head);text-transform:uppercase;font-size:18px;line-height:1.45;min-height:53px;margin-bottom:12px}.creative-caption{align-self:center;max-width:400px}.creative-caption>p:last-child{font-size:23px;line-height:1.4}
.s-totals{padding:72px 0 115px}.s-totals::before{display:none}.outcomes{display:grid;grid-template-columns:1fr 1fr;gap:50px;color:white}.outcomes>div+div{border-left:1px solid #ffffff50;padding-left:50px}.outcomes strong{display:block;font-family:var(--f-head);font-size:45px;line-height:1.3;margin-bottom:25px}.outcomes p{font-size:14px;line-height:1.6}.outcomes .eyebrow{font-size:12px}.ending{font-family:var(--f-head);font-size:24px;line-height:1.45;text-transform:uppercase;color:var(--green);margin-top:65px;max-width:900px}
@media(max-width:1199px){.hero__grid{grid-template-columns:1fr 1fr;gap:25px}.hero__title-ph{font-size:30px}.hero__lead{font-size:21px}.facts{grid-template-columns:1fr 1fr 1fr}.facts__col,.facts__col:last-child{padding-left:25px}.facts__col:first-child{padding-left:0}.facts dd{font-size:16px}.hero__media .btn{top:auto;bottom:20px}.cards .card__in{padding:35px}.cards .card__title{font-size:25px}.case-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px}.copy h3{font-size:15px}}
@media(max-width:979px){:root{--pad:32px}.hero__grid{gap:25px}.nav__menu{left:180px;gap:15px}.hero__title-ph{font-size:23px;height:145px}.hero__lead{font-size:19px}.hero__media .btn{position:relative;left:0;bottom:auto;margin-top:15px;min-width:0;width:100%;font-size:12px}.facts{margin-top:45px}.facts dd{font-size:14px}.facts dt{font-size:18px}.s-waves{padding:45px 32px 80px}.cards .card{width:100%}.cards .card__title{font-size:25px}.s-creatives .h2{font-size:28px}.stat__value{font-size:28px}.stat__label{font-size:10px}.outcomes strong{font-size:34px}.creative-grid figcaption{font-size:16px}.s-context .ctx-lead{max-width:100%}.ending{font-size:21px}}
@media(max-width:639px){:root{--pad:20px}.nav{height:95px}.nav__home{top:36px}.nav__logo{top:21px}.nav__menu{display:none}.hero__grid{display:flex;flex-direction:column;padding-top:10px;gap:24px}.hero__title-ph{height:auto;min-height:130px;font-size:26px}.hero__eyebrow{font-size:12px}.hero__lead{font-size:20px}.hero__media{margin-top:0}.hero__media .btn{width:auto;min-width:210px;font-size:12px;margin-top:16px}.facts{display:grid;grid-template-columns:1fr;gap:15px;margin-top:32px}.facts__col,.facts__col:last-child{padding:0;border:0;display:grid;grid-template-columns:95px 1fr;gap:12px}.facts dt{font-size:14px;line-height:22px;margin:0}.facts dd{font-size:13px;line-height:22px}.facts dd br{display:none}.facts dd br::after{content:' '}.s-hero{padding-bottom:65px}.stats{grid-template-columns:1fr;gap:22px}.stat{min-height:0}.stat__label{font-size:11px}.stat__value{font-size:32px;line-height:1.4}.s-stats{padding:40px 0 60px}.media-slot{font-size:12px}.source-note{font-size:10px}.s-context{padding:42px 0 65px}.s-context .h2{font-size:24px;line-height:1.35}.s-context .ctx-lead{font-size:19px;line-height:1.5}.s-waves{padding:30px 12px 65px}.cards .card__in{padding:26px 20px 30px}.cards .card__title{font-size:21px;line-height:1.4}.case-grid,.case-grid--equal{grid-template-columns:1fr;gap:24px}.case-grid .media-slot{max-width:100%;max-height:330px}.copy h3,.conditions h3{font-size:15px}.conditions{grid-template-columns:1fr;gap:12px}.case-result{font-size:16px}.creative-grid{grid-template-columns:1fr;gap:30px}.creative-grid figcaption{min-height:0;font-size:17px}.creative-caption>p:last-child{font-size:20px}.s-creatives{padding:40px 0 70px}.s-creatives .h2{font-size:25px;line-height:1.35}.outcomes{grid-template-columns:1fr;gap:30px}.outcomes>div+div{padding-left:0;padding-top:30px;border-left:0;border-top:1px solid #ffffff50}.outcomes strong{font-size:38px}.ending{font-size:18px;margin-top:45px}.ending br{display:none}.s-totals{padding:45px 0 85px}.s-cta .container{padding:0 24px}.cta__title--wide{max-width:calc(100% - 15px);margin-left:0}.cta__col:first-child .cta__btn,.cta__col:last-child .cta__btn{max-width:calc(100% - 16px);margin-left:0}.cta__col:last-child .cta__note,.cta__mail{margin-left:0}.cta__mail{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.hero__text,.hero__media{min-width:0}
@media(min-width:640px) and (max-width:1199px){.hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Стопка LAB: следующая карточка закрывает предыдущую, оставляя кромку 18px. */
.card--1{--card-index:0}.card--2{--card-index:1}.card--3{--card-index:2}.card--4{--card-index:3}
@media(max-width:979px){.cards{--stack-top:20px}}
@media(prefers-reduced-motion:reduce){.cards .card{position:relative;top:auto}}

/* Подобранные материалы из публичных папок пользователя. */
.hero-collage{height:336px;position:relative;isolation:isolate;overflow:hidden;background:transparent}
.hero-collage img{position:absolute;object-fit:contain;box-shadow:0 10px 24px #0003}
.hero-collage img:nth-child(1){height:94%;width:auto;left:5%;top:2%;transform:rotate(-8deg);z-index:2}
.hero-collage img:nth-child(2){width:47%;right:3%;top:3%;transform:rotate(7deg)}
.hero-collage img:nth-child(3){width:43%;right:9%;bottom:3%;transform:rotate(-5deg);z-index:3}
.campaign-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:center}
.campaign-strip img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.banner-frame{width:100%;display:flex;align-items:center;justify-content:center;background:#161f8409}
.banner-frame img{width:100%;height:auto;object-fit:contain}
.gallery-banner img{max-height:420px;width:auto;max-width:100%}
.artist-posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:300px;align-items:center;background:#161f8409;padding:12px}
.artist-posters img{width:100%;height:auto}
.theatre-trio{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.theatre-trio img{width:100%;height:auto}.theatre-trio img:first-child{grid-column:1 / -1;width:65%;justify-self:center}
.case-video{display:block;width:100%;aspect-ratio:16/9;background:#0e0e0e;margin-top:16px;object-fit:contain;border-radius:2px}
@media(max-width:979px){.hero-collage{height:290px}.artist-posters{min-height:240px}}
@media(max-width:639px){.hero-collage{height:300px}.campaign-strip{grid-template-columns:1fr 1fr;gap:10px}.artist-posters{min-height:260px}.theatre-trio{max-width:360px;margin:auto}}

/* Заголовок пользователя: сохраняем пропорции SVG 435 × 413. */
.hero__title .hero__title-svg{width:100%;height:auto;max-height:330px;object-fit:contain;object-position:left center}
@media(max-width:639px){.hero__title .hero__title-svg{max-height:280px}}

/* Единая сетка медиа: баннеры отдельно, видео отдельным парным рядом. */
.creative-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px;align-items:start}
.creative-grid figure{display:grid;grid-template-rows:54px auto;gap:12px}
.creative-grid figcaption,.video-grid figcaption{margin:0;min-height:0;font-family:var(--f-head);text-transform:uppercase;font-size:18px;line-height:1.45}
.creative-grid .gallery-banner,.creative-grid .artist-posters{width:100%;height:auto;aspect-ratio:1;min-height:0;margin:0;padding:16px;background:#f0f1f8;border-radius:4px;overflow:hidden}
.creative-grid .gallery-banner img{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
.creative-grid .artist-posters{gap:8px;align-items:center}
.creative-grid .artist-posters img{width:100%;max-height:100%;object-fit:contain}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:48px}
.video-grid figure{display:grid;grid-template-rows:54px auto;gap:12px;margin:0;min-width:0}
.video-grid .case-video{width:100%;aspect-ratio:16/9;margin:0;height:auto}
.product-example{margin:0;display:grid;justify-items:center;gap:12px;padding:16px;background:#ffffff0d;border-radius:4px}
.product-example img{display:block;height:416px;width:100%;object-fit:contain;max-width:100%}
.product-example figcaption{font-size:11px;line-height:1.4;text-align:center;max-width:240px;color:#fff}
.case-grid>.banner-frame,.case-grid>.theatre-trio{height:320px;padding:12px;background:#ffffff15;border-radius:4px}
.case-grid>.banner-frame img{width:100%;height:100%;object-fit:contain}
.case-grid>.theatre-trio{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px}
.case-grid>.theatre-trio img,.case-grid>.theatre-trio img:first-child{grid-column:auto;width:100%;max-height:100%;object-fit:contain}
@media(max-width:979px){.creative-grid figcaption,.video-grid figcaption{font-size:16px}.case-grid>.banner-frame,.case-grid>.theatre-trio{height:280px}}
@media(max-width:639px){.creative-grid,.video-grid{grid-template-columns:minmax(0,1fr);gap:28px}.creative-grid figure,.video-grid figure{grid-template-rows:auto auto}.creative-grid figcaption,.video-grid figcaption{font-size:17px}.video-grid{margin-top:36px}.case-grid>.theatre-trio{max-width:none}.product-example img{height:380px}}

/* Правки по комментариям: коллаж заканчивается на нижней линии SVG. */
@media(min-width:640px){
 .hero__grid{row-gap:0;align-items:start}
 .hero__text{display:contents}
 .hero__eyebrow{grid-column:1;grid-row:1;margin-top:4px}
 .hero__title{grid-column:1;grid-row:2;margin-bottom:0}
 .hero__lead{grid-column:1;grid-row:3;margin-top:20px}
 .hero__media{grid-column:2;grid-row:1 / 3;margin:0;align-self:stretch;position:relative;min-height:0}
 .hero__media .hero-collage{position:absolute;inset:0;height:100%}
 .hero__media .btn{position:absolute;left:20px;top:auto;bottom:20px;width:auto;margin:0}
}
/* Афиши в два ряда занимают ту же высоту, что и текст слева. */
.card--3 .case-grid{align-items:stretch}
.card--3 .case-grid>.theatre-trio{height:auto;min-height:0;contain:size;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;padding:0;background:none;align-items:stretch}
.card--3 .theatre-trio img,.card--3 .theatre-trio img:first-child{width:100%;height:100%;min-height:0;object-fit:contain}
.card--3 .theatre-trio img:last-child{grid-column:1 / -1;justify-self:center;width:50%}
.card--3 .copy>p:last-child{margin-bottom:0}
@media(max-width:639px){.card--3 .case-grid>.theatre-trio{contain:none;height:380px;margin:0;width:100%}}

/* Единая закреплённая шапка вместо повторного меню в контактах. */
.site-nav{position:fixed;inset:0 0 auto;z-index:100;height:86px;background:var(--green);color:var(--blue);box-shadow:0 1px 0 #161f841a;display:flex;align-items:center;gap:32px;padding:0 max(var(--pad),calc((100vw - 1040px)/2))}
.site-nav .nav__home,.site-nav .nav__menu,.site-nav .nav__logo{position:static;font-size:14px;line-height:20px}
.site-nav .nav__home{margin-right:auto}
.site-nav .nav__menu{display:flex;gap:22px}
.site-nav .nav__logo{margin-left:auto}.site-nav .nav__logo img{width:40px;height:54px;object-fit:contain}
.s-hero{padding-top:124px}
html{scroll-padding-top:106px}
.cards{--stack-top:106px}
.s-cta .cta{padding-top:0}
@media(max-width:979px){.cards{--stack-top:106px}.site-nav{gap:18px}.site-nav .nav__menu{gap:16px}}
@media(max-width:639px){.site-nav{height:92px;padding:12px 20px;display:grid;grid-template-columns:1fr auto;gap:8px 12px}.site-nav .nav__home{display:block;font-size:12px}.site-nav .nav__menu{grid-column:1 / -1;grid-row:2;justify-content:space-between;gap:8px}.site-nav .nav__menu a{font-size:12px;white-space:nowrap}.site-nav .nav__logo{grid-column:2;grid-row:1}.site-nav .nav__logo img{width:25px;height:32px}.s-hero{padding-top:112px}.cards{--stack-top:108px}html{scroll-padding-top:108px}}

.video-grid iframe.case-video{border:0;display:block;width:100%;height:auto;aspect-ratio:16/9}