/* Ukrainian edition: shared frame (header, footer, buttons, sections, form, FAQ). Page layouts live in each page. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/ua/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/ua/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/ua/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/ua/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#0d2242; --navy2:#153a6e; --ink:#101d33; --mut:#55657e; --line:#e3e9f3; --soft:#f5f8fc;
  --ua-blue:#0057b7; --ua-blue2:#004a9e; --ua-yellow:#ffd500; --ua-cream:#fff8dc; --ua-sky:#eef4fc;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--ink); background:#fff; line-height:1.6; font-size:16.5px; }
h1,h2,h3{ font-family:'Manrope','Inter',sans-serif; line-height:1.15; letter-spacing:-.015em; color:var(--navy); }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.skip{ position:absolute; left:-9999px; top:8px; background:#fff; color:var(--navy); padding:10px 16px; border-radius:8px; z-index:100; font-weight:700; }
.skip:focus{ left:12px; }
:focus-visible{ outline:3px solid var(--ua-blue); outline-offset:3px; }
.txt-link{ color:var(--ua-blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.txt-link:hover{ color:var(--ua-blue2); }

/* flag ribbon and cross-stitch strip */
.ribbon{ height:8px; background:linear-gradient(180deg,var(--ua-blue) 0 50%,var(--ua-yellow) 50% 100%); }
.orn{ height:34px; border-top:8px solid #fff; border-bottom:8px solid #fff; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' shape-rendering='crispEdges'%3E%3Cg fill='%230057b7'%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='6' y='1' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='7' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='8' y='3' width='1' height='1'/%3E%3Crect x='13' y='3' width='1' height='1'/%3E%3Crect x='1' y='4' width='1' height='1'/%3E%3Crect x='9' y='4' width='1' height='1'/%3E%3Crect x='12' y='4' width='3' height='1'/%3E%3Crect x='2' y='5' width='1' height='1'/%3E%3Crect x='8' y='5' width='1' height='1'/%3E%3Crect x='13' y='5' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3Crect x='7' y='6' width='1' height='1'/%3E%3Crect x='4' y='7' width='1' height='1'/%3E%3Crect x='6' y='7' width='1' height='1'/%3E%3Crect x='5' y='8' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23ffd500'%3E%3Crect x='5' y='2' width='1' height='1'/%3E%3Crect x='4' y='3' width='3' height='1'/%3E%3Crect x='3' y='4' width='5' height='1'/%3E%3Crect x='4' y='5' width='3' height='1'/%3E%3Crect x='5' y='6' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / 32px 18px; }

/* header */
.hd{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); }
.hd .wrap{ display:flex; align-items:center; gap:18px; height:74px; }
.logo{ display:flex; align-items:center; gap:12px; flex:none; }
.logo img{ width:44px; height:44px; }
.logo b{ display:block; font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; letter-spacing:.04em; color:var(--navy); line-height:1.15; }
.logo small{ display:block; font-size:11.5px; color:var(--mut); letter-spacing:.02em; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; font-weight:600; font-size:15px; color:#2a3a55; }
.nav__link{ display:inline-flex; align-items:center; gap:6px; padding:9px 11px; border-radius:9px; white-space:nowrap; }
.nav__link:hover{ background:var(--soft); color:var(--ua-blue); }
.nav__link[aria-current="page"]{ color:var(--ua-blue); box-shadow:inset 0 -3px 0 var(--ua-yellow); border-radius:9px 9px 0 0; }
.nav__link svg{ width:10px; height:10px; }
.nav__item{ position:relative; }
.nav__drop{ position:absolute; top:100%; left:0; min-width:250px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 22px 46px rgba(13,34,66,.14); opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s; }
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop{ opacity:1; visibility:visible; transform:none; }
.nav__drop a{ display:block; padding:10px 13px; border-radius:9px; font-size:14.5px; }
.nav__drop a:hover{ background:var(--ua-sky); color:var(--ua-blue); }
.nav__drop a[aria-current="page"]{ color:var(--ua-blue); background:var(--ua-sky); }
.hd__tel{ font-weight:700; color:var(--navy); white-space:nowrap; font-size:15px; }
.hd__cta{ flex:none; }
.lang{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:13px; font-weight:700; flex:none; }
.lang span,.lang a{ padding:6px 11px; }
.lang span{ background:var(--ua-blue); color:#fff; }
.lang a{ color:var(--navy); }
.lang a:hover{ background:var(--soft); }
.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; flex:none; }
.burger span{ display:block; width:20px; height:2px; background:var(--navy); margin:4px auto; }

/* breadcrumbs */
.crumbs{ font-size:13.5px; color:var(--mut); padding-top:16px; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.crumbs li + li::before{ content:"/"; margin-right:6px; color:#a3b0c4; }
.crumbs a{ color:var(--mut); text-decoration:underline; text-underline-offset:3px; }
.crumbs a:hover{ color:var(--ua-blue); }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:16px; padding:15px 26px; border-radius:12px; transition:transform .15s, box-shadow .15s, background .15s; cursor:pointer; border:0; font-family:inherit; text-align:center; }
.btn--ua{ background:var(--ua-blue); color:#fff; box-shadow:inset 0 -5px 0 var(--ua-yellow), 0 12px 26px rgba(0,87,183,.25); padding-bottom:18px; }
.btn--ua:hover{ background:var(--ua-blue2); transform:translateY(-2px); }
.btn--sm{ font-size:14.5px; padding:11px 18px 14px; border-radius:11px; box-shadow:inset 0 -4px 0 var(--ua-yellow), 0 8px 18px rgba(0,87,183,.22); }
.btn--line{ background:#fff; color:var(--navy); border:2px solid var(--navy); }
.btn--line:hover{ background:var(--navy); color:#fff; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn[disabled]{ opacity:.6; cursor:default; transform:none; }

/* sections */
.sec{ padding:88px 0; }
.sec--soft{ background:var(--soft); }
.sec--sky{ background:var(--ua-sky); }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ua-blue); }
.eyebrow::before{ content:""; width:28px; height:6px; border-radius:3px; background:linear-gradient(180deg,var(--ua-blue) 0 50%,var(--ua-yellow) 50% 100%); }
.sec__head{ max-width:680px; margin-bottom:44px; }
.sec__head h2{ font-size:clamp(28px,3.4vw,40px); margin:14px 0 12px; }
.sec__head p{ color:var(--mut); font-size:17px; }
.prose p{ color:#34445e; font-size:17px; }
.prose p + p{ margin-top:14px; }
.note{ font-size:14px; color:var(--mut); margin-top:16px; }
.flagmini{ display:inline-block; width:24px; height:16px; border-radius:3px; background:linear-gradient(180deg,var(--ua-blue) 0 50%,var(--ua-yellow) 50% 100%); flex:none; }

/* generic data table */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:#fff; }
.tbl{ width:100%; border-collapse:collapse; font-size:15.5px; min-width:560px; }
.tbl th,.tbl td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl thead th{ background:var(--navy); color:#fff; font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; }
.tbl tbody th{ font-weight:600; color:var(--navy); }
.tbl tr:last-child td,.tbl tr:last-child th{ border-bottom:0; }
.tbl caption{ caption-side:bottom; text-align:left; padding:12px 18px; font-size:13.5px; color:var(--mut); }

/* check list */
.checks{ list-style:none; display:grid; gap:14px; }
.checks li{ position:relative; padding-left:36px; color:#34445e; font-size:16px; }
.checks li::before{ content:""; position:absolute; left:0; top:2px; width:24px; height:24px; border-radius:50%; background:var(--ua-sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057b7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.checks b{ color:var(--navy); }

/* project strip */
.proj{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.proj figure{ border-radius:16px; overflow:hidden; background:var(--soft); border:1px solid var(--line); }
.proj picture{ display:block; }
.proj img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.proj figcaption{ padding:12px 16px; font-size:14.5px; color:#34445e; }
.proj figcaption b{ color:var(--navy); }
.more{ margin-top:30px; }

/* estimate form */
form.est{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px; box-shadow:0 20px 50px rgba(13,34,66,.08); border-top:6px solid var(--ua-blue); min-width:0; }
.formbox > *, .ct-main > *{ min-width:0; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fld{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.fld label{ font-size:14px; font-weight:600; color:var(--navy); }
.fld label small{ font-weight:400; color:var(--mut); }
.fld input,.fld textarea{ font:inherit; font-size:16px; padding:12px 14px; border:1px solid #cfd9e8; border-radius:10px; background:#fbfcfe; color:var(--ink); }
.fld input[type="file"]{ padding:10px; font-size:14.5px; }
.fld textarea{ min-height:110px; resize:vertical; }
.fld input:focus,.fld textarea:focus{ border-color:var(--ua-blue); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(0,87,183,.15); }
.fld input.bad,.fld textarea.bad{ border-color:#b10005; }
.cf-turnstile{ min-height:65px; margin:4px 0 12px; }
form.est .btn{ width:100%; }
.form-note{ margin-top:12px; font-size:13.5px; color:var(--mut); text-align:center; }
.form-msg{ display:none; margin-top:14px; border-radius:10px; padding:12px 14px; font-size:15px; }
.form-msg.on{ display:block; }
.form-msg--ok{ background:#eaf6ee; border:1px solid #bfe3cb; color:#1d5a32; }
.form-msg--err{ background:#fdecec; border:1px solid #f3c2c2; color:#8a1c1c; }

/* faq */
.faq{ max-width:860px; }
.faq details{ border:1px solid var(--line); border-radius:14px; background:#fff; margin-bottom:12px; }
.faq summary{ cursor:pointer; list-style:none; padding:20px 54px 20px 22px; font-family:'Manrope',sans-serif; font-weight:700; font-size:17.5px; color:var(--navy); position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--ua-sky); color:var(--ua-blue); display:grid; place-items:center; font-size:20px; font-weight:700; }
.faq details[open] summary::after{ content:"\2212"; background:var(--ua-yellow); color:var(--navy); }
.faq details > div{ padding:0 22px 20px; color:#34445e; font-size:16px; }
.faq details > div p + p{ margin-top:10px; }
.towns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.towns a{ font-size:14px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; color:var(--navy); background:#fff; }
.towns a:hover{ border-color:var(--ua-blue); color:var(--ua-blue); }

/* closing band */
.close{ background:var(--ua-blue); color:#fff; position:relative; }
.close::before{ content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--ua-yellow); }
.close .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding-top:58px; padding-bottom:50px; }
.close h2{ color:#fff; font-size:clamp(26px,3vw,36px); max-width:640px; }
.close p{ color:#dce8f8; margin-top:8px; font-size:17px; }
.close__btns{ display:flex; flex-wrap:wrap; gap:12px; }
.close .btn--light{ background:#fff; color:var(--ua-blue); }
.close .btn--light:hover{ background:var(--ua-yellow); color:var(--navy); }
.close .btn--ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7); }
.close .btn--ghost:hover{ background:rgba(255,255,255,.12); }

/* footer */
.ft{ background:#0b1c37; color:#b9c7de; font-size:15px; }
.ft .wrap{ display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; gap:36px; padding-top:54px; padding-bottom:40px; }
.ft b{ color:#fff; }
.ft h2{ color:#fff; font-size:15px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.ft ul{ list-style:none; display:grid; gap:8px; }
.ft a:hover{ color:#fff; text-decoration:underline; }
.ft__brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ft__brand img{ width:44px; height:44px; }
.ft__bottom{ border-top:1px solid rgba(255,255,255,.1); }
.ft__bottom .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:18px; padding-bottom:22px; font-size:13.5px; }
.ft__flag{ display:inline-block; width:18px; height:12px; border-radius:2px; vertical-align:-1px; margin-right:8px; background:linear-gradient(180deg,var(--ua-blue) 0 50%,var(--ua-yellow) 50% 100%); }

/* responsive frame */
@media (max-width:1400px){ .hd__tel{ display:none; } }
@media (max-width:1090px){ .hd__cta{ display:none; } .ft .wrap{ grid-template-columns:1fr 1fr; } }
@media (max-width:960px){
  .proj{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .nav{ display:none; }
  .hd .lang{ margin-left:auto; }
  .burger{ display:block; }
  .hd.open .nav{ display:flex; flex-direction:column; align-items:stretch; position:absolute; left:0; right:0; top:74px; background:#fff; border-bottom:1px solid var(--line); padding:10px 24px 18px; gap:0; margin:0; box-shadow:0 18px 30px rgba(13,34,66,.10); max-height:calc(100vh - 82px); overflow-y:auto; }
  .hd.open .nav__link{ padding:12px 0; border-bottom:1px solid var(--soft); border-radius:0; box-shadow:none; }
  .hd.open .nav__item .nav__link svg{ display:none; }
  .nav__drop{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:4px 0 8px 14px; min-width:0; }
  .nav__drop a{ padding:9px 0; font-size:15px; color:#34445e; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding:0 16px; }
  .sec{ padding:64px 0; }
  .hd.open .nav{ padding:10px 16px 18px; }
  .proj{ grid-template-columns:1fr; }
  .grid2{ grid-template-columns:1fr; }
  form.est{ padding:22px; }
  .ft .wrap{ grid-template-columns:1fr; }
  .logo small{ display:none; }
}
@media (max-width:480px){ .logo > span{ display:none; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } html{ scroll-behavior:auto; } }
