/* HSL+ — стилі, відтворені за дизайном сайту на Wix Studio */
:root{
  --navy:#1f2a6b;
  --navy-2:#2b3a8c;
  --link:#5b6fd8;
  --tint:#f1f4fc;
  --line:#1f2a6b;
  --muted:#4a5486;
  --page:#ffffff;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Wix Madefor Display','Wix Madefor Text',system-ui,sans-serif;background:var(--page);color:var(--navy);line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1880px;margin:0 auto;padding:0 60px}
section{padding:90px 0}
.h-xl{font-size:clamp(30px,3.4vw,62px);font-weight:400;text-transform:uppercase;line-height:1.15}
.h-l{font-size:clamp(26px,2.4vw,46px);font-weight:400;text-transform:uppercase;line-height:1.2}
.h-m{font-size:clamp(22px,1.9vw,36px);font-weight:400;text-transform:uppercase;line-height:1.25}

/* ---------- Вирізи (форма картинок як на Wix) ---------- */
.cut{position:relative;overflow:hidden;border-radius:var(--r)}
.cut>img,.cut>video{width:100%;height:100%;object-fit:cover}
.cut::before,.cut::after{content:"";position:absolute;background:var(--page);z-index:2;display:none}
.cut-tl::before{display:block;top:0;left:0;width:var(--tw,20%);height:var(--th,14%);border-bottom-right-radius:var(--r)}
.cut-tr::before{display:block;top:0;right:0;width:var(--tw,20%);height:var(--th,14%);border-bottom-left-radius:var(--r)}
.cut-bl::after{display:block;bottom:0;left:0;width:var(--bw,20%);height:var(--bh,14%);border-top-right-radius:var(--r)}
.cut-br::after{display:block;bottom:0;right:0;width:var(--bw,20%);height:var(--bh,14%);border-top-left-radius:var(--r)}

/* ---------- Шапка ---------- */
.wixbar{display:none}
header{position:sticky;top:0;z-index:50;background:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;height:128px}
.logo img{height:44px;width:auto}
.nav-right{display:flex;align-items:center;gap:46px}
.btn-line{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 50px;border:1.5px solid var(--navy);border-radius:4px;font-size:18px;color:var(--navy);transition:.2s;white-space:nowrap}
.btn-line:hover{background:var(--navy);color:#fff}
.lang{position:relative}
.lang summary{list-style:none;display:flex;align-items:center;gap:30px;cursor:pointer;padding:8px 0}
.lang summary::-webkit-details-marker{display:none}
.lang .flag{width:24px;height:16px;display:block;flex:none}
.lang .chev{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:2;transition:transform .2s}
.lang[open] .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:100%;right:-14px;margin-top:8px;background:#fff;border:1px solid #d6d9e6;border-radius:8px;box-shadow:0 10px 30px rgba(31,42,107,.12);padding:6px;min-width:170px;z-index:60}
.lang-menu>*{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:6px;font-size:16px;white-space:nowrap}
.lang-menu .cur{color:var(--link)}
.lang-menu a:hover{background:var(--tint)}
.burger{width:44px;height:30px;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;margin-left:70px}
.burger span{height:2px;background:var(--navy);display:block}
.menu-overlay{position:fixed;inset:0;background:#fff;z-index:100;display:none;flex-direction:column;justify-content:center;padding:0 60px}
.menu-overlay.open{display:flex}
.menu-overlay ul{list-style:none;display:grid;gap:22px}
.menu-overlay a{font-size:clamp(30px,4vw,56px);text-transform:uppercase}
.menu-overlay a:hover{color:var(--link)}
.menu-close{position:absolute;top:44px;right:60px;width:44px;height:44px;background:none;border:0;cursor:pointer}
.menu-close::before,.menu-close::after{content:"";position:absolute;left:0;top:21px;width:44px;height:2px;background:var(--navy);transform:rotate(45deg)}
.menu-close::after{transform:rotate(-45deg)}

/* ---------- Головний екран ---------- */
.hero{padding:0 0 40px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 226px;align-items:center}
.hero-media{aspect-ratio:1654/790;--tw:3.5%;--th:26%;--bw:9.4%;--bh:39%}
.hero-media h1{position:absolute;left:13%;bottom:9.5%;right:20%;z-index:3;color:#fff;font-weight:400;font-size:clamp(20px,2.5vw,48px);line-height:1.3;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero-arrow{position:absolute;left:4.2%;bottom:0;z-index:3;width:12px;height:68px}
.hero-arrow::before{content:"";position:absolute;left:5px;top:4px;bottom:0;width:1.5px;background:var(--navy)}
.hero-arrow::after{content:"";position:absolute;left:3px;top:0;width:6px;height:6px;border-radius:50%;background:var(--navy)}
.hero-arrow i{position:absolute;left:1px;bottom:0;width:9px;height:9px;border-right:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(45deg)}
.hero-logo{display:flex;justify-content:center}
.hero-logo img{width:96px;height:auto}

/* ---------- Проєкти ---------- */
.projects-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:86px 24px;margin-top:90px}
.project{display:flex;flex-direction:column;align-items:center}
.project h3{font-size:clamp(15px,1.05vw,20px);font-weight:700;text-transform:uppercase;text-align:center;margin-bottom:24px;min-height:1.3em}
.project .pic{position:relative;width:100%;aspect-ratio:449/566;border:1.5px solid #222;overflow:hidden;background:#fff}
.project .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.project .pic img.contain{object-fit:contain;padding:18%}
.project:hover .pic img{transform:scale(1.04)}
.project .more{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);background:#fff;color:var(--navy);border-radius:999px;padding:18px 38px;font-size:17px;white-space:nowrap;transition:.2s}
.project .more:hover{background:var(--navy);color:#fff}

/* ---------- Місія / Про нас ---------- */
.mission{padding:110px 0}
.mission-grid{display:grid;grid-template-columns:minmax(0,46%) 1fr;gap:150px;align-items:start}
.mission-media img{object-position:50% 27%}
.mission-media .cut-side{position:absolute;right:0;top:65%;bottom:0;width:5.3%;background:var(--page);border-top-left-radius:var(--r);z-index:2}
.mission-media{aspect-ratio:1530/890;margin-left:-60px;border-top-left-radius:0;border-bottom-left-radius:0;--tw:39%;--th:5%;--bw:11.7%;--bh:9.5%}
.mission-text{padding-top:0;max-width:720px}
.mission-text .h-m{line-height:1.25}
.about{margin:90px 0 0 160px;max-width:560px}
.about .h-m{margin-bottom:46px}
.arrow-link{display:inline-flex;align-items:center;gap:16px;font-size:24px;margin-top:40px}
.arrow-link span{width:40px;height:40px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;transition:.2s}
.arrow-link span svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.arrow-link:hover span{background:var(--link)}

/* ---------- Послуги ---------- */
.svc-head .h-m{margin-bottom:26px}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:52px;margin-top:100px;align-items:start}
.svc h3{font-size:clamp(16px,1.25vw,24px);font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.svc .media{aspect-ratio:430/462}
.svc.down{padding-top:82px}
.svc.down h3{margin-bottom:26px}
.svc.up h3{margin-top:26px}
.svc.up .media{--tw:21%;--th:13.5%}
.svc.down .media{aspect-ratio:430/440;--bw:21%;--bh:9%}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,636px) 1fr;gap:140px 370px;align-items:start;margin-top:70px}
.faq-media{aspect-ratio:636/424;--tw:39%;--th:5%;--bw:13%;--bh:12%}
.faq-list{border-bottom:1.5px solid var(--line)}
.faq-list details{border-top:1.5px solid var(--line);padding:22px 0}
.faq-list details:first-child{border-top:0;padding-top:0}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:clamp(18px,1.25vw,24px)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--link)}
.faq-list summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-6px 8px 0 0;flex:none;transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(-135deg);margin-top:6px}
.faq-list .ans{padding:26px 10px 50px;font-size:17px;line-height:1.7}
.faq-list .ans ul{margin:10px 0 0 22px}

/* ---------- З ким працюємо ---------- */
.who{padding:0}
.who-box{position:relative;overflow:hidden;padding:12px 76px 70px}
.who-box>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.who-box>*:not(video){position:relative;z-index:1}
.who-box .h-m{margin-bottom:22px}
.who-cards{display:grid;gap:46px;margin:22px 0 0 auto;width:min(1146px,62%)}
.who-card{background:rgba(255,255,255,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:var(--r);display:grid;grid-template-columns:300px 1fr;padding:80px 24px 36px;clip-path:polygon(0 0,83% 0,83% 18%,100% 18%,100% 100%,0 100%)}
.who-card h3{font-size:22px;font-weight:700;line-height:1.7}
.who-card ul{font-size:clamp(18px,1.4vw,26px);line-height:1.85;padding-left:24px}

/* ---------- Нам довіряють ---------- */
.partners{background:var(--tint)}
.partners-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:66px}
.partner{height:176px;border:1.5px solid var(--navy);border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:18px 26px;background:var(--tint)}
.partner img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* ---------- Статті ---------- */
.posts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.post{border:1px solid #d6d9e6;display:flex;flex-direction:column;transition:.2s}
.post:hover{box-shadow:0 10px 30px rgba(31,42,107,.12)}
.post img{width:100%;aspect-ratio:608/628;object-fit:cover}
.post h3{font-size:clamp(18px,1.35vw,25px);font-weight:400;padding:34px 24px 34px;min-height:130px}

/* ---------- Футер ---------- */
.foot-banner{padding:20px 0 0}
.foot-media{aspect-ratio:1880/450;--bw:13%;--bh:11%;--tw:0;--th:0}
.foot-media .cut-side{position:absolute;right:0;top:58%;bottom:0;width:5.3%;background:var(--page);border-top-left-radius:var(--r);z-index:2}
.foot-media .wlogo{position:absolute;left:2.3%;top:51%;width:28.5%;z-index:3}
footer{padding:96px 0 90px}
.foot{display:grid;grid-template-columns:290px 1fr auto;gap:30px;align-items:start}
.foot-nav{list-style:none;display:grid;gap:12px;font-size:19px;text-transform:uppercase}
.foot-nav a:hover,.foot-nav a.active{color:var(--link)}
.foot-legal{list-style:none;display:grid;gap:40px;font-size:19px}
.foot-contacts{text-align:right;font-size:19px;display:grid;gap:34px;padding-top:18px}
.socials{display:flex;gap:36px;justify-content:flex-end}
.socials img{width:44px;height:44px}

/* ---------- Сторінка проєкту ---------- */
.p-top{padding:40px 0 70px}
.crumbs{font-size:16px;margin-bottom:30px}
.crumbs a:hover{color:var(--link)}
.p-top h1{margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{border:1.5px solid var(--navy);border-radius:999px;padding:9px 20px;font-size:16px}
.chip b{font-weight:700}
.p-intro{display:grid;grid-template-columns:1fr minmax(0,46%);gap:90px;align-items:center}
.p-intro p{font-size:20px;line-height:1.7;margin-bottom:18px}
.p-media{--tw:30%;--th:6%;--bw:12%;--bh:10%}
.p-media img{width:100%;height:auto}
.media-links{list-style:none;margin-top:16px;display:grid;gap:8px;font-size:17px}
.stats{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px}
.stat{border:1.5px solid var(--navy);border-radius:var(--r);padding:16px 22px}
.stat b{display:block;font-size:30px;font-weight:700;line-height:1.1}
.stat span{font-size:14px}
.p-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.p-box{border:1.5px solid var(--navy);border-radius:var(--r);padding:44px 40px;background:#fff}
.p-box.tint{background:var(--tint)}
.p-box h2{margin-bottom:22px}
.dots{list-style:none}
.dots li{padding:12px 0 12px 30px;border-top:1px solid #d6d9e6;position:relative;font-size:18px}
.dots li:first-child{border-top:0}
.dots li::before{content:"";position:absolute;left:2px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--navy)}
.p-outro{display:grid;grid-template-columns:minmax(0,46%) 1fr;gap:90px;align-items:center}
.p-outro p{font-size:20px;line-height:1.7}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gallery img{border-radius:var(--r);width:100%;height:100%;object-fit:cover}
.p-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1.5px solid var(--navy);padding-top:36px}
.p-nav a{font-size:20px;text-transform:uppercase}
.p-nav a span{display:block;font-size:13px;letter-spacing:.1em;color:var(--muted);margin-bottom:4px}
.p-nav a:hover{color:var(--link)}

/* ---------- Стаття ---------- */
.article{max-width:940px;margin:0 auto;padding:40px 60px 100px}
.article .meta{display:flex;gap:14px;align-items:center;font-size:15px;color:var(--muted);margin:26px 0 36px}
.article .meta .ava{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.article h1{font-size:clamp(30px,3vw,48px);font-weight:400;line-height:1.2;margin-bottom:36px}
.article .cover{width:100%;border-radius:var(--r);margin-bottom:40px}
.article .body p{font-size:19px;line-height:1.8;margin-bottom:22px}
.article .body h2{font-size:26px;font-weight:700;margin:40px 0 16px}
.article .body ol,.article .body ul{margin:0 0 22px 26px;font-size:19px;line-height:1.8}
.article .body li{margin-bottom:10px}
.more-posts{border-top:1.5px solid var(--navy);padding-top:50px;margin-top:40px}
.more-posts .posts-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px}

/* ---------- Адаптив ---------- */
@media (max-width:1400px){
  .wrap{padding:0 40px}
  .mission-media{margin-left:-40px}
  .mission-grid{gap:80px}.about{margin-left:60px}
  .faq-grid{gap:60px 120px}
  .who-cards{width:70%}
  .who-card{grid-template-columns:220px 1fr}
}
@media (max-width:1024px){
  .nav{height:96px}
  .burger{margin-left:20px}.nav-right{gap:24px}
  .btn-line{padding:0 24px;font-size:15px}
  .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mission-grid,.faq-grid,.p-intro,.p-outro,.p-cols{grid-template-columns:1fr}
  .about{margin:50px 0 0}
  .who-cards{width:100%}
  .partners-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .posts-grid{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
  .foot-contacts{grid-column:1/-1;text-align:left}.socials{justify-content:flex-start}
}
@media (max-width:700px){
  section{padding:60px 0}
  .wrap{padding:0 18px}
  .nav{height:76px}.logo img{height:32px}
  .btn-line{display:none}
  .lang summary{gap:10px}
  .hero-grid{grid-template-columns:1fr}
  .hero-logo{display:none}
  .hero-media{aspect-ratio:4/5;--tw:0;--th:0;--bw:0;--bh:0}
  .hero-arrow{display:none}
  .hero-media h1{left:20px;right:20px;bottom:24px;font-size:24px}
  .projects-grid{grid-template-columns:1fr;gap:50px}
  .svc-grid{grid-template-columns:1fr;gap:40px;margin-top:50px}
  .svc.down{padding-top:0}
  .mission-media{margin-left:-18px}
  .who-box{padding:12px 18px 40px}
  .who-card{grid-template-columns:1fr;padding:60px 20px 26px;clip-path:polygon(0 0,75% 0,75% 40px,100% 40px,100% 100%,0 100%)}
  .partners-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.partner{height:120px}
  .posts-grid,.more-posts .posts-grid{grid-template-columns:1fr}
  .foot-media .wlogo{width:45%}
  .foot{grid-template-columns:1fr}
  .article{padding:30px 18px 70px}
}
.cut>img.wlogo{height:auto;object-fit:contain}
