@font-face{
  font-family:'Satoshi';
  src:url('/fonts/Satoshi-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('/fonts/Satoshi-Medium.woff') format('woff');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('/fonts/Satoshi-Bold.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --blue:#003153;
  --bg:#FBFBFA;
  --dark:#1A1A1A;
  --muted:#575757;
  --line:#003153;
  --border:#D1D1D1;
  --menu-w:280px;
  --menu-w-collapsed:88px;
  --ui:'Satoshi', 'Inter', sans-serif;
  --text:'Lora', Georgia, serif;
}

*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:var(--ui);
  background:var(--bg);
  color:var(--dark);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

ul{
  list-style:none;
}

button{
  font-family:inherit;
}

/* ---------- ТОПБАР ---------- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 32px;
  background:var(--bg);
  border-bottom:3px solid var(--line);
}

.topbar__logo{
  font-family:var(--ui);
  font-weight:700;
  font-size:18px;
  letter-spacing:.02em;
  color:var(--blue);
  text-transform:uppercase;
}

.topbar__sk{
  height:52px;
  width:auto;
  flex-shrink:0;
}

/* ---------- СЕТКА ---------- */
.layout{
  display:grid;
  grid-template-columns:var(--menu-w) minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "menu title image"
    "menu text text";
  width:100%;
  transition:grid-template-columns .35s ease;
}

.layout.collapsed{
  grid-template-columns:var(--menu-w-collapsed) minmax(0, 1.1fr) minmax(0, 0.9fr);
}

/* ---------- МЕНЮ ---------- */
.menu{
  grid-area:menu;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border-right:1px solid var(--border);
  padding:24px 0 20px;
  font-family:var(--ui);
  position:sticky;
  top:0;
  align-self:start;
  max-height:100vh;
}

.menu__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px 24px 24px;
}

.menu__logo{
  font-family:var(--ui);
  font-weight:700;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--blue);
  white-space:nowrap;
}

.menu__toggle{
  width:28px;
  height:28px;
  border:1px solid var(--border);
  background:transparent;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  font-size:13px;
  flex-shrink:0;
}

.menu__toggle:hover{
  background:#E6ECF0;
}

.menu__nav{
  flex:1;
  display:flex;
  flex-direction:column;
}

.menu__link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 24px;
  color:var(--dark);
  font-family:var(--ui);
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  position:relative;
  transition:color .25s ease;
}

.menu__link img{
  width:24px;
  height:24px;
  flex-shrink:0;
}

.menu__link.is-active{
  color:var(--blue);
}

.menu__link.is-active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  background:var(--blue);
}

.menu__link:hover{
  color:var(--blue);
}

.menu__foot{
  padding:16px 24px 0;
  border-top:1px solid var(--border);
  margin-top:16px;
}

.menu__foot a{
  font-family:var(--ui);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
  border-bottom:1px solid var(--blue);
  padding-bottom:3px;
  white-space:nowrap;
}

.layout.collapsed .menu__logo,
.layout.collapsed .menu__foot{
  display:none;
}

.layout.collapsed .menu__link{
  justify-content:center;
  padding:12px 0;
}

.layout.collapsed .menu__link span{
  display:none;
}

.layout.collapsed .menu__head{
  justify-content:center;
  padding:0 0 24px;
}

/* ---------- ЗАГОЛОВОК ---------- */
.title{
  grid-area:title;
  padding:48px 40px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.title__badge{
  font-family:var(--ui);
  font-weight:500;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--dark);
  border-bottom:1px solid var(--dark);
  padding-bottom:8px;
  margin-bottom:24px;
  align-self:flex-start;
}

.title h1{
  font-family:var(--ui);
  font-weight:700;
  font-size:clamp(28px, 3vw, 44px);
  letter-spacing:-0.02em;
  color:var(--blue);
  margin-bottom:24px;
}

.title__lead{
  font-family:var(--text);
  font-style:italic;
  font-size:clamp(17px, 1.4vw, 20px);
  line-height:1.55;
  color:var(--dark);
  max-width:560px;
}

/* ---------- КАРТИНКА ---------- */
.image{
  grid-area:image;
  padding:48px 32px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
}

.image img{
  width:100%;
  max-width:560px;
  height:auto;
  display:block;
}

/* ---------- ТЕКСТ ---------- */
.text{
  grid-area:text;
  padding:48px 40px 72px;
  min-width:0;
}

.text p{
  font-family:var(--text);
  font-size:18px;
  line-height:1.75;
  color:#2A2A2A;
  margin-bottom:26px;
  max-width:760px;
}

.text p:last-child{
  margin-bottom:0;
}

.text p:first-of-type::first-letter{
  font-family:var(--text);
  font-weight:500;
  float:left;
  font-size:64px;
  line-height:0.85;
  padding-right:10px;
  padding-top:6px;
  color:var(--blue);
}

/* ---------- ФУТЕР ---------- */
.foot{
  border-top:1px solid var(--line);
  font-family:var(--ui);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--dark);
  padding:18px 32px 24px;
  background:var(--bg);
}

/* ---------- БУРГЕР ---------- */
.burger{
  display:none;
  position:fixed;
  top:16px;
  left:16px;
  z-index:1100;
  width:48px;
  height:48px;
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:50%;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  padding:0;
}

.burger span{
  display:block;
  width:20px;
  height:1.5px;
  background:var(--blue);
  position:relative;
  transition:background .25s ease;
}

.burger span::before,
.burger span::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:1.5px;
  background:var(--blue);
  transition:transform .3s ease, top .3s ease;
}

.burger span::before{ top:-7px; }
.burger span::after{ top:7px; }

.burger.open span{ background:transparent; }
.burger.open span::before{ top:0; transform:rotate(45deg); }
.burger.open span::after{ top:0; transform:rotate(-45deg); }

.shade{
  position:fixed;
  inset:0;
  background:rgba(0,49,83,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:1050;
}

.shade.show{
  opacity:1;
  pointer-events:auto;
}

body.lock{
  overflow:hidden;
}

/* ---------- АДАПТИВ ---------- */
@media (max-width:1100px){
  .layout,
  .layout.collapsed{
    grid-template-columns:var(--menu-w) minmax(0, 1fr);
    grid-template-areas:
      "menu title"
      "menu image"
      "menu text";
    grid-template-rows:auto auto 1fr;
  }

  .title{
    border-right:none;
  }

  .image{
    justify-content:flex-start;
    padding:0 40px 40px;
  }
}

@media (max-width:900px){
  .topbar{
    padding:16px 22px;
  }

  .topbar__sk{
    height:40px;
  }

  .layout,
  .layout.collapsed{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "image"
      "text";
    grid-template-rows:auto auto 1fr;
  }

  .menu{
    position:fixed;
    top:0;
    left:0;
    width:var(--menu-w);
    height:100vh;
    height:100dvh;
    max-height:none;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:1100;
    overflow-y:auto;
  }

  .menu.open{
    transform:translateX(0);
  }

  .menu__toggle{
    display:none;
  }

  .burger{
    display:flex;
  }

  .title{
    padding:80px 22px 28px;
  }

  .title h1{
    font-size:clamp(26px, 7vw, 36px);
  }

  .image{
    padding:24px 22px;
  }

  .image img{
    max-width:100%;
  }

  .text{
    padding:28px 22px 48px;
  }

  .text p{
    font-size:17px;
    line-height:1.7;
  }

  .text p:first-of-type::first-letter{
    font-size:52px;
    padding-right:8px;
  }

  .foot{
    padding:16px 22px 20px;
  }
}