* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  color: #192940;
  background: #F5F8FF;
  font: 17px/1.55 Geologica,sans-serif
}
a {
  color: inherit;
  text-decoration: none
}
a,button,input,textarea,summary {
  outline-offset: 5px
}
button,input,textarea {
  font: inherit
}
header {
  display: flex;
  align-items: center;
  gap: 35px;
  padding: 24px 5%;
  background: #153F8F;
  color: white
}
.logo {
  font: 700 30px "Sofia Sans Condensed";
  display: flex;
  gap: 12px;
  align-items: center
}
.phase {
  font-size: 45px;
  line-height: 1
}
.speciality {
  font-size: 15px
}
.head-link {
  margin-left: auto;
  font-size: 16px;
  border-bottom: 1px solid #FFFFFF80
}
nav {
  padding: 17px 5%;
  display: flex;
  gap: 40px;
  border-bottom: 1px solid #CDDDF7;
  font-size: 15px;
  color: #153F8F
}
.hero {
  padding: 65px 7%;
  min-height: 720px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center
}
.hero h1 {
  font: 700 84px/.98 "Sofia Sans Condensed";
  letter-spacing: -1px;
  margin: 0 0 30px;
  color: #153F8F
}
.hero p {
  max-width: 580px
}
.button {
  display: inline-block;
  background: #153F8F;
  color: white;
  padding: 16px 24px;
  margin-top: 20px
}
.circuit {
  background: #fff;
  border: 1px solid #CDDDF7;
  text-align: center;
  padding: 15px 20px
}
.circuit svg {
  width: 100%;
  display: block
}
.circuit button {
  border: 1px solid #4073D3;
  background: #F5F8FF;
  color: #153F8F;
  padding: 12px 18px;
  cursor: pointer
}
.circuit p {
  font-size: 14px;
  margin: 13px 0
}
.circuit.active {
  background: #E5EEFF
}
.circuit.active svg g:first-child {
  stroke: #153F8F;
  stroke-width: 7
}
section:not(.hero) {
  padding: 85px 7%
}
h2 {
  font: 700 54px/1.05 "Sofia Sans Condensed";
  margin: 0 0 30px;
  color: #153F8F
}
h3 {
  font: 700 32px/1.1 "Sofia Sans Condensed";
  margin: 20px 0
}
.services {
  background: #fff
}
.services-top {
  display: flex;
  justify-content: space-between;
  gap: 50px
}
.services-top p {
  max-width: 350px
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0
}
.service {
  padding: 30px;
  background: #E7EFFF;
  border-right: 1px solid #fff;
  position: relative;
  min-height: 365px
}
.service:nth-child(2) {
  background: #CDDDF7
}
.service:nth-child(3) {
  background: #153F8F;
  color: white
}
.service>span {
  font-size: 15px
}
.service p {
  max-width: 300px
}
.symbol {
  font: 58px "Sofia Sans Condensed";
  line-height: 1;
  text-align: right;
  margin-top: 30px;
  color: #4073D3
}
.maintain .symbol {
  color: #fff
}
.service:hover h3 {
  text-decoration: underline
}
.boundary {
  text-align: center
}
.boundary-diagram {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin: 50px 0
}
.boundary-diagram>div {
  font: 700 40px "Sofia Sans Condensed";
  padding: 20px 50px;
  position: relative
}
.boundary-diagram small {
  display: block;
  font: 15px Geologica;
  margin-top: 5px
}
.divider {
  padding: 60px 0;
  max-width: 150px;
  border-left: 2px dashed #4073D3;
  padding-left: 20px;
  font-size: 15px
}
.boundary>p {
  max-width: 750px;
  margin: 0 auto
}
.work {
  background: #153F8F;
  color: white
}
.work h2 {
  color: white
}
.work ol {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 40px;
  padding-left: 25px
}
.work li {
  padding-left: 5px
}
.work strong {
  font: 700 29px "Sofia Sans Condensed"
}
.work p {
  font-size: 16px
}
.energy {
  background: #fff
}
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px
}
.before-after article {
  border-top: 6px solid #CDDDF7
}
.before-after article:last-child {
  border-color: #4073D3
}
.before-after li {
  margin: 12px 0
}
.documents {
  max-width: 1100px;
  margin: auto
}
.note {
  font-size: 14px
}
details {
  border-top: 1px solid #CDDDF7;
  padding: 20px 0
}
summary {
  cursor: pointer;
  font-size: 21px
}
details p {
  max-width: 800px
}
.contact {
  background: #E3ECFC;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px
}
address {
  font-style: normal;
  margin-top: 40px
}
address a {
  overflow-wrap: anywhere
}
form {
  display: grid;
  gap: 15px
}
label {
  display: grid;
  gap: 6px
}
input,textarea {
  background: #fff;
  border: 1px solid #8098BE;
  border-radius: 0;
  width: 100%;
  padding: 12px;
  color: #192940
}
.consent {
  display: flex;
  gap: 10px;
  font-size: 14px;
  align-items: start
}
.consent input {
  width: 20px;
  height: 20px;
  flex: none
}
form button {
  border: 0;
  background: #153F8F;
  color: white;
  padding: 16px;
  cursor: pointer
}
[role=status] {
  font-size: 15px;
  margin: 0
}
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 5%;
  gap: 25px;
  font-size: 14px
}
footer .logo {
  color: #153F8F
}
@media(max-width:800px) {
  header {
    padding: 22px 6%;
    gap: 10px;
    flex-wrap: wrap
  }
  .logo {
    font-size: 27px
  }
  .speciality {
    order: 3;
    width: 100%;
    font-size: 14px
  }
  .head-link {
    font-size: 14px
  }
  nav {
    padding: 15px 6%;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 14px
  }
  .hero {
    padding: 35px 6% 45px;
    display: block;
    min-height: 0
  }
  .hero h1 {
    font-size: 61px;
    letter-spacing: -1px
  }
  .hero p {
    font-size: 16px
  }
  .hero p br {
    display: none
  }
  .hero .button {
    margin: 10px 0 30px
  }
  .circuit {
    max-width: 450px;
    margin: auto
  }
  .circuit svg {
    height: 300px
  }
  section:not(.hero) {
    padding: 60px 6%
  }
  h2 {
    font-size: 41px
  }
  .services-top {
    display: block
  }
  .services-top p {
    margin-bottom: 30px
  }
  .service-grid {
    grid-template-columns: 1fr
  }
  .service {
    min-height: 0;
    padding: 28px
  }
  .service h3 {
    margin-top: 12px
  }
  .symbol {
    position: absolute;
    bottom: 20px;
    right: 22px;
    font-size: 40px
  }
  .service p {
    padding-right: 35px
  }
  .boundary-diagram {
    gap: 10px;
    flex-direction: column;
    margin: 25px 0
  }
  .boundary-diagram>div {
    padding: 15px
  }
  .divider {
    padding: 16px 20px;
    max-width: none
  }
  .work ol {
    grid-template-columns: 1fr 1fr;
    gap: 25px
  }
  .before-after,.contact {
    grid-template-columns: 1fr;
    gap: 35px
  }
  address {
    margin-top: 25px
  }
  footer {
    flex-direction: column;
    align-items: start
  }
}
@media(max-width:360px) {
  .hero h1 {
    font-size: 53px
  }
  .work ol {
    grid-template-columns: 1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
}



/* Task 12 */
.svg-legend{display:none}.symbol{color:#153F8F}.hero h1{font-size:76px}.circuit{border-width:2px}.circuit svg{height:auto}
@media(max-width:850px){.circuit svg text{display:none}.svg-legend{display:block;font-size:14px;line-height:1.5;color:#153F8F;margin:8px 0}.circuit svg{height:205px}header{padding:14px 6%}.speciality{display:none}nav{padding:12px 6%;gap:8px 18px}.hero{padding:24px 6% 28px}.hero h1{font-size:40px;line-height:1.03;margin-bottom:14px}.hero h1 br{display:none}.hero p{font-size:15px;margin:12px 0}.hero .button{margin:0 0 18px;padding:11px 16px}.circuit{padding:10px}.circuit svg{height:205px}.circuit button{font-size:14px;padding:10px}.circuit p{font-size:14px}}

/* Этап 15: самостоятельная фотоподача */
.hero{grid-template-columns:1fr 1fr;gap:45px;padding-top:50px;padding-bottom:50px}.visual-hero{margin:0;height:610px;overflow:hidden}.visual-hero img{width:100%;height:100%;object-fit:cover}.services .visual-process{grid-column:1/-1;margin:40px 0 0}.visual-process img{width:100%;height:300px;object-fit:cover}.energy .visual-detail{margin:30px 0;grid-column:1/-1}.visual-detail img{width:100%;height:380px;object-fit:cover}.technical-inset{grid-column:1/-1;width:100%;margin-top:40px}.technical-inset .circuit{max-width:540px;margin:auto}.technical-inset svg{max-height:440px}.visual-process{clip-path:inset(0)}@media(max-width:850px){.hero{display:flex;flex-direction:column;padding:30px 6%;gap:25px}.visual-hero{width:100%;height:340px}.visual-process img,.visual-detail img{height:240px}}
.visual-process,.visual-detail{min-width:0}.visual-process img,.visual-detail img{display:block;max-width:100%}figcaption{font-size:14px;line-height:1.5;margin-top:10px}.visual-disclosure{font-size:14px;line-height:1.6;padding:20px 6%;margin:0}.technical-inset svg{width:100%;display:block}.technical-inset{min-width:0}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.visual-hero img{transform:none!important}}

/* Самокритика 15, проход 1 */
@media(max-width:360px){.visual-hero{height:250px}.hero{gap:18px}.hero h1{font-size:42px}.hero p{font-size:16px}}