:root{
    --surface:#fbfbf9;
    --surface-raised:#ffffff;
    --surface-deep:#142944;
    --surface-deepest:#0d1c30;
    --accent:#b45309;
    --accent-strong:#7c3d06;
    --ink:#101820;
    --ink-muted:#414d60;
    --ink-on-deep:#e8edf4;
    --ink-on-deep-muted:#a9b8cc;
    --line:#e2e2dc;
    --line-deep:#26405f;
    --r-s:8px; --r-m:12px; --r-l:16px;
    --wrap:min(1120px, 100% - 3rem);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--surface); color:var(--ink);
    font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:17px; line-height:1.65; letter-spacing:-0.005em;
  }
  h1,h2,h3{font-family:"Oswald",system-ui,sans-serif; font-weight:500; line-height:1.15; letter-spacing:0.01em; margin:0}
  a{color:var(--accent-strong); text-underline-offset:3px; text-decoration-thickness:1px}
  a:hover{color:var(--accent)}
  .wrap{width:var(--wrap); margin-inline:auto}
  .skip{position:absolute; left:-9999px}
  .skip:focus{left:1rem; top:1rem; background:var(--surface-raised); padding:.6rem 1rem; border-radius:var(--r-s); z-index:20}

  /* --- шапка --- */
  .top{background:var(--surface-deep); color:var(--ink-on-deep)}
  .top-in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.1rem 0; flex-wrap:wrap}
  .brand{display:flex; align-items:center; gap:.85rem; text-decoration:none; color:inherit}
  .mark{flex:none; width:42px; height:42px; border-radius:10px; background:var(--surface-deepest); display:grid; place-items:center; border:1px solid var(--line-deep)}
  .brand-name{font-family:"Oswald",sans-serif; font-size:1.18rem; letter-spacing:.02em; line-height:1.2}
  .brand-sub{font-size:.8rem; color:var(--ink-on-deep-muted); letter-spacing:.06em; text-transform:uppercase}
  .lang{display:flex; gap:.4rem; align-items:center; font-size:.9rem}
  .lang a,.lang span{padding:.34rem .7rem; border-radius:var(--r-s); text-decoration:none}
  .lang .on{background:rgba(255,255,255,.12); color:#fff}
  .lang a{color:var(--ink-on-deep-muted); border:1px solid transparent}
  .lang a:hover{color:#fff; border-color:var(--line-deep)}

  /* --- герой --- */
  .hero{background:var(--surface-deep); color:var(--ink-on-deep); padding:3.5rem 0 4rem; border-bottom:1px solid var(--line-deep)}
  .hero h1{font-size:clamp(2rem, 5.2vw, 3.3rem); max-width:19ch}
  .hero .slogan{color:var(--accent); font-family:"Oswald",sans-serif; letter-spacing:.14em; text-transform:uppercase; font-size:.83rem; margin-bottom:1.1rem}
  .hero p{color:var(--ink-on-deep-muted); max-width:60ch; font-size:1.08rem; margin:1.3rem 0 0}
  .facts{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; padding:0; list-style:none}
  .facts li{background:rgba(255,255,255,.06); border:1px solid var(--line-deep); border-radius:999px; padding:.42rem 1rem; font-size:.9rem; color:var(--ink-on-deep)}

  /* --- секції --- */
  section{padding:4rem 0}
  section + section{border-top:1px solid var(--line)}
  .eyebrow{font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; color:var(--accent-strong); margin-bottom:.9rem}
  h2{font-size:clamp(1.5rem, 3.2vw, 2.1rem); max-width:24ch}
  .lead{color:var(--ink-muted); max-width:66ch; margin:1.1rem 0 0; font-size:1.05rem}
  .grid{display:grid; gap:1.1rem; margin-top:2.2rem}
  @media (min-width:720px){ .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} }
  .card{background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-l); padding:1.5rem}
  .card h3{font-size:1.12rem; margin-bottom:.6rem}
  .card p{margin:0; color:var(--ink-muted); font-size:.97rem}
  .card .num{font-family:"Oswald",sans-serif; color:var(--accent); font-size:.85rem; letter-spacing:.1em; display:block; margin-bottom:.7rem}

  /* --- хто веде --- */
  .who{display:grid; gap:1.8rem; margin-top:2.2rem; align-items:start}
  @media (min-width:760px){ .who{grid-template-columns:minmax(190px,240px) 1fr; gap:2.6rem} }
  .who img{width:100%; max-width:240px; height:auto; border-radius:var(--r-l); border:1px solid var(--line); display:block}
  .who .cap{font-size:.84rem; color:var(--ink-muted); margin:.7rem 0 0}
  .who p{margin:0 0 1rem; color:var(--ink-muted)}
  .who p.first{color:var(--ink); font-size:1.05rem}
  .who .role{font-family:"Oswald",sans-serif; font-size:1.25rem; color:var(--ink); margin:0 0 .9rem; letter-spacing:.01em}

  /* --- галерея --- */
  .shots{display:grid; gap:1.1rem; margin-top:2.2rem; grid-template-columns:repeat(2,1fr)}
  @media (min-width:760px){ .shots{grid-template-columns:repeat(4,1fr)} }
  .shot{margin:0}
  .shot img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-m); border:1px solid var(--line); display:block; background:var(--line)}
  .shot figcaption{font-size:.87rem; color:var(--ink-muted); margin-top:.6rem; line-height:1.45}
  .shots-sq .shot img{aspect-ratio:1/1; background:#e9e9e4}
  .arch .shot img{width:100%; aspect-ratio:4/3; object-fit:contain; background:#f4f4ef; border:1px solid var(--line); border-radius:var(--r-m); display:block; padding:.35rem}
  .arch .shot figcaption{font-size:.87rem; color:var(--ink-muted); margin-top:.6rem; line-height:1.45}
  .note{color:var(--ink-muted); font-size:.92rem; margin:1.8rem 0 0; max-width:66ch}

  /* --- реквізити --- */
  .req{background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-l); padding:1.6rem; margin-top:2.2rem}
  .req dl{margin:0; display:grid; gap:.1rem}
  @media (min-width:640px){ .req dl{grid-template-columns:auto 1fr; gap:.55rem 2rem} }
  .req dt{font-size:.83rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); font-family:"Oswald",sans-serif; padding-top:.15rem}
  .req dd{margin:0 0 .8rem}
  @media (min-width:640px){ .req dd{margin-bottom:0} }

  /* --- партнерський проєкт --- */
  .partner{background:var(--surface-deep); color:var(--ink-on-deep); border-radius:var(--r-l); padding:2rem; margin-top:2.2rem}
  .partner h3{font-size:1.3rem; margin-bottom:.8rem}
  .partner p{color:var(--ink-on-deep-muted); margin:0 0 1.2rem; max-width:62ch}
  .btn{display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font-weight:500;
       padding:.72rem 1.4rem; border-radius:var(--r-m); box-shadow:0 1px 0 var(--accent-strong)}
  .btn:hover{background:var(--accent-strong); color:#fff}

  /* --- контакти --- */
  .contact-list{list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.9rem; max-width:46ch}
  .contact-list li{display:flex; gap:.9rem; align-items:baseline}
  .contact-list .k{font-family:"Oswald",sans-serif; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); flex:none; width:6.5rem}

  footer{background:var(--surface-deepest); color:var(--ink-on-deep-muted); padding:2.5rem 0; font-size:.9rem}
  footer p{margin:0 0 .5rem}
  footer a{color:var(--ink-on-deep)}

  /* width/height потрібні проти стрибків верстки, але висоту має
     задавати CSS-пропорція, а не атрибут */
  img{height:auto}

  /* --- головна навігація --- */
  .mainnav{background:var(--surface-deepest); border-top:1px solid var(--line-deep)}
  .mainnav-in{display:flex; gap:.2rem; flex-wrap:wrap; padding:.15rem 0}
  .mainnav a{display:block; padding:.7rem .9rem; font-family:"Oswald",sans-serif; font-size:.88rem;
    letter-spacing:.05em; text-transform:uppercase; color:var(--ink-on-deep-muted);
    text-decoration:none; border-bottom:2px solid transparent}
  .mainnav a:hover{color:#fff}
  .mainnav a[aria-current="page"]{color:#fff; border-bottom-color:var(--accent)}
  @media (max-width:759px){
    .mainnav-in{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
    .mainnav-in::-webkit-scrollbar{display:none}
    .mainnav a{white-space:nowrap; padding-inline:.7rem}
  }

  /* --- хлібні крихти --- */
  .crumbs{font-size:.85rem; color:var(--ink-on-deep-muted); margin:0 0 1.1rem}
  .crumbs a{color:var(--ink-on-deep-muted); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25)}
  .crumbs a:hover{color:#fff}
  .crumbs span[aria-current]{color:var(--ink-on-deep)}
  .hero-sub{padding:2.4rem 0 2.9rem}
  .hero-sub h1{font-size:clamp(1.65rem, 4vw, 2.55rem); max-width:26ch}
  .hero-sub p.intro{color:var(--ink-on-deep-muted); max-width:62ch; font-size:1.06rem; margin:1.1rem 0 0}

  /* --- картки-посилання на головній --- */
  .hub .card{display:flex; flex-direction:column; transition:border-color .15s, transform .15s}
  .hub .card:hover{border-color:var(--accent)}
  .hub .card h3{margin-bottom:.55rem}
  .hub .card h3 a{text-decoration:none; color:var(--ink)}
  .hub .card h3 a::after{content:""; position:absolute; inset:0}
  .hub .card{position:relative}
  .hub .card h3 a:hover{color:var(--accent-strong)}
  .card h3 a{color:var(--ink); text-decoration-color:var(--line)}

  /* --- заклик --- */
  .cta{background:var(--surface-deep); color:var(--ink-on-deep); border-radius:var(--r-l); padding:2.2rem 1.8rem; margin-top:.6rem}
  .cta h2{color:var(--ink-on-deep); max-width:22ch}
  .cta p{color:var(--ink-on-deep-muted); max-width:56ch; margin:.9rem 0 1.6rem}
  .cta .btn{background:var(--accent); color:#fff}

  /* --- підвал --- */
  .footnav{display:flex; flex-wrap:wrap; gap:.15rem 1.3rem; margin:0 0 1.4rem; padding:0 0 1.3rem; border-bottom:1px solid var(--line-deep)}
  .footnav a{font-size:.92rem}