@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./assets/geist-cyrillic.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./assets/geist-latin.woff2') format('woff2-variations');
  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{--forest:#134b40;--deep:#0d392f;--ivory:#f7f3ed;--paper:#fffcf7;--ink:#26332d;--muted:#5e6b62;--line:#d6d9cd;--mint:#dce5d9;--focus:#a47936;--ease:cubic-bezier(.16,1,.3,1);font-family:'Geist Variable',Arial,sans-serif;background:var(--ivory);color:var(--ink)}
*{box-sizing:border-box}
body,h1,h2,p{margin:0}
body{min-height:100svh;display:flex;flex-direction:column}
img,svg{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
::selection{background:var(--forest);color:var(--paper)}
.shell{width:min(1440px,100% - 2 * clamp(20px,4.2vw,76px));margin-inline:auto}
.site-header{border-bottom:1px solid var(--line)}
.header-inner{min-height:94px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--forest);text-decoration:none}
.brand img{width:53px;height:53px}
.brand span{font-size:30px;font-weight:950;line-height:.82;letter-spacing:-.035em}
.header-contact{min-height:44px;display:inline-flex;align-items:center;gap:10px;color:var(--forest);font-weight:550;font-size:.9375rem;text-decoration:none}
.header-contact:hover{text-decoration:underline;text-underline-offset:5px}
main{flex:1;padding-block:clamp(24px,3.2vw,48px) clamp(36px,4.6vw,74px)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.projects{display:flex;gap:clamp(10px,1.4vw,22px)}
.project{flex:1 1 0;min-width:0;display:flex;flex-direction:column;color:var(--forest);text-decoration:none}
.project-picture{position:relative;display:block;height:clamp(270px,33vw,540px);overflow:hidden;border-radius:12px;background:var(--deep)}
.project-picture img{width:100%;height:100%;object-fit:cover}
.project-vetka img{object-position:76% center}
.project-modul img{object-position:54% center}
.project-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:clamp(16px,2.3vw,33px) 0 17px;border-bottom:1px solid var(--line)}
.project h2{font-size:clamp(2rem,4vw,4.5rem);font-weight:680;line-height:1.05;letter-spacing:-.04em;overflow-wrap:anywhere}
.project p{margin-top:8px;color:var(--muted);font-size:clamp(.95rem,1.3vw,1.125rem);line-height:1.4}
.arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.arrow svg,.header-contact svg{width:18px;height:18px}
.project:is(:hover,:focus-visible) .arrow{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.site-footer{background:var(--deep);color:var(--paper);padding-block:clamp(29px,4.5vw,57px)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px clamp(32px,7vw,112px)}
.site-footer h2{font-size:1.375rem;font-weight:650;letter-spacing:-.025em;margin-bottom:18px}
.contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 22px}
.contacts a{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;min-height:44px;text-decoration:none}
.contacts a:hover .contact-value{text-decoration:underline;text-underline-offset:4px}
.contacts a:focus-visible{outline-color:var(--mint)}
.contact-label,.legal address{color:var(--mint);font-size:.875rem;line-height:1.55}
.contact-value{font-size:clamp(.95rem,1.4vw,1.2rem);font-weight:560}
.legal p{line-height:1.5}
.legal address{font-style:normal;margin-top:7px;max-width:42ch}
@media(min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .project{transition:flex-grow .65s var(--ease)}
  .project-picture img{transition:scale .75s var(--ease)}
  .projects:has(.project:focus-visible) .project:focus-visible,
  .projects:not(:has(.project:focus-visible)) .project:hover{flex-grow:1.2}
  .project:is(:hover,:focus-visible) .project-picture img{scale:1.045}
}
@media(max-width:900px){
  .project-picture{height:clamp(230px,40vw,360px)}
  .footer-grid{gap:30px}
  .contacts{grid-template-columns:1fr}
}
@media(max-width:620px){
  .header-inner{min-height:72px}
  .brand img{width:41px;height:41px}
  .brand span{font-size:24px}
  .projects{flex-direction:column;gap:27px}
  .project-picture{height:auto;aspect-ratio:16 / 10}
  .project-caption{padding-bottom:13px}
  .project h2{font-size:clamp(1.8rem,8vw,2.6rem)}
  .arrow{width:42px;height:42px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .legal{border-top:1px solid color-mix(in srgb,var(--mint) 30%,transparent);padding-top:23px}
  .site-footer h2{margin-bottom:10px}
  .contacts{gap:8px}
}