* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  background: #FFF9DB;
  color: #303D45;
  font: 20px/1.45 "Yanone Kaffeesatz",sans-serif
}
a {
  color: inherit;
  text-decoration: none
}
a,button,input,textarea,summary {
  outline-offset: 5px
}
button,input,textarea {
  font: inherit
}
header {
  padding: 30px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid #D8D7C3
}
.brand {
  font-weight: 700;
  font-size: 29px;
  display: flex;
  gap: 12px;
  align-items: center
}
.target {
  font: 40px "Yanone Kaffeesatz";
  line-height: 1
}
nav {
  display: flex;
  gap: 30px;
  font-size: 18px
}
.head-contact {
  font-size: 17px;
  border-bottom: 1px solid #B19A37
}
.hero {
  display: grid;
  grid-template-columns: 65px 1.4fr 1fr;
  gap: 35px;
  align-items: center;
  min-height: 765px;
  padding: 65px 6% 85px
}
.staff {
  height: 560px;
  display: grid;
  grid-template-rows: repeat(8,1fr);
  position: relative;
  background: #fff;
  border: 1px solid #303D45
}
.staff i {
  background: repeating-linear-gradient(0deg,#303D45 0 8px,transparent 8px 18px);
  width: 60%;
  display: block;
  margin-left: 0
}
.staff i:nth-child(even) {
  margin-left: auto;
  background: repeating-linear-gradient(0deg,#B19A37 0 8px,transparent 8px 18px)
}
.staff>span {
  position: absolute;
  top: -33px;
  left: 0;
  font: 14px "Martian Mono";
  white-space: nowrap
}
.optics svg {
  width: 100%;
  display: block
}
.optics p {
  text-align: center;
  font: 14px/1.6 "Martian Mono"
}
.hero h1 {
  font: 700 86px/.97 "Yanone Kaffeesatz";
  margin: 0 0 30px;
  letter-spacing: -1px
}
.hero-copy p {
  font-size: 25px;
  margin: 0 0 30px
}
.button {
  display: inline-block;
  background: #303D45;
  color: #FFF9DB;
  padding: 15px 25px;
  font-size: 20px
}
section:not(.hero) {
  padding: 85px 7%
}
h2 {
  font: 700 56px/1.02 "Yanone Kaffeesatz";
  margin: 0 0 35px
}
h3 {
  font: 700 31px/1.1 "Yanone Kaffeesatz"
}
.survey {
  background: #fff
}
.survey-ledger {
  border-top: 3px solid #303D45
}
.ledger-head,.survey-ledger button {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.2fr;
  gap: 40px
}
.ledger-head {
  padding: 18px 25px;
  font: 14px "Martian Mono";
  background: #F5F5EE
}
.survey-ledger button {
  padding: 28px 25px;
  border: 0;
  border-bottom: 1px solid #D8D7C3;
  background: #fff;
  text-align: left;
  width: 100%;
  color: #303D45;
  cursor: pointer;
  align-items: center
}
.survey-ledger b {
  font-size: 29px;
  font-weight: 700
}
.survey-ledger span {
  font-size: 21px
}
.survey-ledger strong {
  font-size: 24px;
  font-weight: 400
}
.survey-ledger button[aria-pressed=true] {
  background: #FFF9DB;
  box-shadow: inset 7px 0 #B19A37
}
.survey-result {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.2fr;
  gap: 40px;
  margin-top: 28px;
  align-items: center;
  padding: 0 25px
}
.survey-result>span {
  font: 14px "Martian Mono"
}
.survey-result output {
  font-size: 25px
}
.survey-result a {
  font-size: 19px;
  text-decoration: underline
}
.fieldpack {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center
}
.field-doc {
  background: #fff;
  position: relative;
  padding: 40px;
  transform: rotate(2deg);
  border: 1px solid #D8D7C3;
  box-shadow: 8px 8px 0 #E6E1C5
}
.clip {
  width: 110px;
  height: 20px;
  background: #303D45;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%)
}
.field-doc h3 {
  margin: 0 0 25px
}
.field-doc ul {
  padding: 0;
  list-style: none;
  margin: 0
}
.field-doc li {
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid #D8D7C3
}
.field-doc b {
  font-weight: 700
}
.work {
  background: #303D45;
  color: #FFF9DB
}
.field-desk {
  display: grid;
  grid-template-columns: 1fr 190px 1fr;
  gap: 40px;
  align-items: center
}
.field-desk article {
  border: 1px solid #80908D;
  padding: 30px
}
.field-desk article>span {
  font: 14px "Martian Mono";
  color: #D8D7C3
}
.field-desk h3 {
  font-size: 36px;
  margin: 25px 0
}
.field-desk ol {
  padding-left: 22px
}
.field-desk li {
  padding: 9px 0;
  font-size: 21px
}
.transfer {
  font: 14px/1.8 "Martian Mono";
  text-align: center;
  border-top: 1px solid #B19A37;
  border-bottom: 1px solid #B19A37;
  padding: 20px 0
}
.result {
  background: #fff
}
.result-cells {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 55px
}
.result-cells article {
  padding: 10px 0;
  border-bottom: 5px solid #D8D7C3
}
.result-cells h3 {
  font-size: 31px
}
.result-cells p {
  font-size: 22px
}
.note {
  font-size: 14px
}
details {
  padding: 22px 0;
  border-top: 1px solid #D8D7C3
}
summary {
  font-size: 26px;
  cursor: pointer
}
details p {
  max-width: 800px
}
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  background: #ECEBD9
}
.contact p {
  max-width: 440px;
  font-size: 23px
}
.contact a {
  overflow-wrap: anywhere;
  font-size: 20px
}
form {
  display: grid;
  gap: 16px
}
label {
  display: grid;
  gap: 6px
}
input,textarea {
  width: 100%;
  padding: 12px;
  background: #fff;
  border: 1px solid #8A9794;
  border-radius: 0;
  color: #303D45
}
.consent {
  display: flex;
  gap: 10px;
  font-size: 17px
}
.consent input {
  width: 20px;
  height: 20px;
  flex: none
}
form button {
  background: #303D45;
  color: white;
  border: 0;
  padding: 17px;
  cursor: pointer
}
.contact [role=status] {
  font-size: 18px;
  margin: 0
}
footer {
  padding: 35px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  font-size: 18px
}
footer>a:first-child {
  font-size: 25px;
  font-weight: 700
}
footer span {
  font: 14px/1.5 "Martian Mono"
}
@media(max-width:850px) {
  header {
    padding: 22px 6%;
    flex-wrap: wrap;
    gap: 20px
  }
  .brand {
    font-size: 26px
  }
  .head-contact {
    display: none
  }
  nav {
    font-size: 17px;
    width: 100%;
    gap: 20px;
    flex-wrap: wrap
  }
  .hero {
    grid-template-columns: 28px 1fr;
    gap: 18px;
    padding: 40px 6% 45px;
    min-height: 0
  }
  .staff {
    height: 560px;
    grid-column: 1;
    grid-row: 1/3
  }
  .staff>span {
    font-size: 14px;
    transform: rotate(-90deg);
    transform-origin: left;
    top: 65px;
    left: -9px
  }
  .hero-copy {
    grid-column: 2;
    grid-row: 1
  }
  .hero h1 {
    font-size: 65px
  }
  .hero-copy p {
    font-size: 23px
  }
  .hero-copy p br {
    display: none
  }
  .button {
    font-size: 19px;
    margin-top: 0;
    padding: 13px 19px
  }
  .optics {
    grid-column: 2;
    grid-row: 2
  }
  .optics svg {
    max-height: 280px
  }
  .optics p {
    font-size: 14px;
    margin: 12px 0 0
  }
  section:not(.hero) {
    padding: 60px 6%
  }
  h2 {
    font-size: 43px
  }
  .ledger-head {
    display: none
  }
  .survey-ledger button {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px
  }
  .survey-ledger b {
    font-size: 28px
  }
  .survey-ledger span {
    font-size: 21px
  }
  .survey-ledger strong {
    font-size: 23px
  }
  .survey-result {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0
  }
  .survey-result output {
    font-size: 25px
  }
  .fieldpack {
    grid-template-columns: 1fr;
    gap: 35px
  }
  .field-doc {
    padding: 30px 25px;
    transform: rotate(1deg)
  }
  .field-doc li {
    grid-template-columns: 90px 1fr;
    gap: 10px
  }
  .field-desk {
    grid-template-columns: 1fr;
    gap: 20px
  }
  .field-desk article {
    padding: 25px
  }
  .transfer {
    max-width: 240px;
    margin: auto;
    width: 100%
  }
  .result-cells {
    grid-template-columns: 1fr;
    gap: 20px
  }
  .result-cells h3 {
    margin: 10px 0
  }
  .contact {
    grid-template-columns: 1fr;
    gap: 30px
  }
  .contact p {
    font-size: 22px
  }
  .contact a {
    font-size: 19px
  }
  footer {
    flex-direction: column;
    align-items: start
  }
}
@media(max-width:360px) {
  .hero h1 {
    font-size: 55px
  }
  .hero {
    padding-left: 7%;
    gap: 15px
  }
  .hero-copy p {
    font-size: 21px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
}



/* Task 12 */
.hero{padding-top:40px;padding-bottom:40px;min-height:760px}.optics svg{max-height:570px}.hero h1{font-size:100px;line-height:.95}.hero-copy p{font-size:26px}.optics p{font-family:"Yanone Kaffeesatz";font-size:20px}
@media(max-width:850px){.hero{min-height:0}header{padding-top:18px;padding-bottom:18px}.hero{padding:24px 6% 30px;gap:20px}.hero h1{font-size:68px}.hero h1 br{display:none}.hero-copy p{font-size:20px;margin:12px 0}.hero-copy p br{display:none}.button{padding:10px 15px}.staff{height:450px}.optics svg{max-height:230px;width:100%;display:block}.optics p{font-size:16px}}

/* Этап 15: самостоятельная фотоподача */
.hero{grid-template-columns:45px 1.2fr 1fr;gap:30px}.visual-hero{margin:0;height:570px;overflow:hidden}.visual-hero img{width:100%;height:100%;object-fit:cover}.survey .visual-process{margin:35px 0 0;grid-column:1/-1}.visual-process img{width:100%;height:340px;object-fit:cover}.fieldpack .visual-detail{margin:30px 0 0;grid-column:1/-1}.visual-detail img{width:100%;height:350px;object-fit:cover}.technical-inset{grid-column:1/-1}.technical-inset .optics{width:100%;max-width:470px;margin:30px auto}.visual-hero img{transition:object-position 1.2s}.visual-hero:hover img{object-position:60%}@media(max-width:850px){.hero{grid-template-columns:25px 1fr;gap:15px;padding:25px 6%}.hero-copy{grid-column:1/-1;grid-row:1}.hero h1{font-size:62px}.hero h1 br{display:none}.visual-hero{height:320px}.staff{height:320px}.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}}

/* Доработка 2: прибор остаётся в кадре при узком окне. */
.visual-hero img{object-position:78% 50%;transition:transform 1.2s ease,object-position 1.2s ease}.visual-hero:hover img{object-position:78% 50%}@media(prefers-reduced-motion:reduce){.visual-hero img{transition:none!important;transform:none!important}}
/* Самокритика: рейка не перекрывает текст, раздел задачи показывает и оптику. */
@media(min-width:851px){section.survey{padding-top:50px;padding-bottom:50px}.survey h2{font-size:48px;margin-bottom:25px}.survey-ledger button{padding-top:16px;padding-bottom:16px}.survey .visual-process{margin-top:24px}.survey .visual-process img{height:270px}}
@media(max-width:850px){.staff{grid-row:2;grid-column:1;align-self:stretch;height:auto;min-height:320px}.staff>span{display:none}.visual-hero{grid-row:2;grid-column:2}.hero-copy{grid-column:1/-1;grid-row:1}.hero-copy p{margin:16px 0}}

/* Самокритика 15, проход 1 */
.hero{grid-template-columns:1.15fr 1fr}@media(max-width:850px){.hero{display:flex;flex-direction:column}.hero-copy{order:0}.visual-hero{order:1;width:100%;height:320px}.hero h1{font-size:58px}}