* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  background: #FCFAFB;
  color: #2E3035;
  font: 18px/1.5 "Montserrat",sans-serif
}
a {
  color: inherit;
  text-decoration: none
}
button,input,textarea {
  font: inherit
}
a,button,input,textarea,summary {
  outline-offset: 5px
}
header {
  padding: 28px 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E4D3DA
}
.brand {
  font: 700 27px/1.03 IBM Plex Mono;
  color: #6F2037
}
.brand span {
  display: block;
  font: 14px "Montserrat";
  margin-top: 10px
}
.header-right {
  display: flex;
  gap: 45px;
  align-items: center
}
nav {
  display: flex;
  gap: 28px;
  font-size: 16px
}
.contact-link {
  font-size: 16px;
  border-bottom: 1px solid #6F2037
}
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 720px;
  padding: 35px 7% 65px;
  gap: 65px
}
.specimen svg {
  width: 100%;
  display: block
}
.specimen-label {
  display: block;
  text-align: center;
  font-size: 15px;
  color: #6F2037
}
.hero h1 {
  font: 700 72px/1.02 IBM Plex Mono;
  margin: 0 0 25px;
  color: #6F2037;
  letter-spacing: -2px
}
.hero p {
  font-size: 20px
}
.button {
  display: inline-block;
  background: #6F2037;
  color: white;
  padding: 16px 24px;
  margin-top: 20px
}
section:not(.hero) {
  padding: 85px 7%
}
h2 {
  font: 400 46px/1.12 IBM Plex Mono;
  letter-spacing: -.8px;
  margin: 0 0 35px;
  color: #6F2037
}
h3 {
  font: 400 30px/1.2 IBM Plex Mono
}
.tests {
  background: #F0E7EC
}
.test-index {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 70px;
  align-items: start
}
.materials {
  display: grid
}
.materials button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #C9ADB8;
  color: #6F2037;
  text-align: left;
  cursor: pointer;
  padding: 22px 15px;
  font: 400 29px IBM Plex Mono
}
.materials button[aria-pressed=true] {
  background: #6F2037;
  color: white
}
.materials span {
  font: 16px "Montserrat";
  display: block;
  margin-top: 7px
}
.test-sheet {
  background: #fff;
  padding: 35px 40px;
  box-shadow: 10px 10px 0 #E4D3DA
}
.sheet-label {
  font-size: 14px;
  color: #7F5C68
}
.test-sheet h3 {
  font-size: 48px;
  margin: 15px 0
}
.test-sheet p {
  max-width: 460px
}
.test-sheet dl div {
  border-top: 1px solid #E4D3DA;
  padding: 17px 0
}
.test-sheet dt {
  font-weight: 700;
  color: #6F2037
}
.test-sheet dd {
  margin: 5px 0 0;
  font-size: 16px
}
.test-sheet a {
  display: inline-block;
  border-bottom: 1px solid #6F2037;
  margin-top: 10px;
  font-size: 16px
}
.sampling {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px
}
.sampling>div>p {
  max-width: 460px
}
.sample-envelope {
  padding: 30px;
  border: 1px solid #C9ADB8;
  background: linear-gradient(135deg,#F0E7EC 0 35px,transparent 36px)
}
.sample-envelope h3 {
  color: #6F2037;
  margin: 0
}
.sample-envelope ul {
  padding-left: 22px
}
.sample-envelope li {
  padding: 8px 0;
  border-bottom: 1px dotted #C9ADB8
}
.sample-envelope p {
  font-size: 16px
}
.work {
  background: #6F2037;
  color: #fff
}
.work h2 {
  color: #fff
}
.chain {
  display: flex;
  gap: 35px
}
.chain article {
  flex: 1;
  border-top: 2px solid #C56A81;
  padding-top: 20px
}
.chain b {
  font: 400 29px IBM Plex Mono
}
.chain p {
  font-size: 17px
}
.protocol {
  max-width: 950px;
  margin-left: auto;
  border: 1px solid #C9ADB8;
  background: #fff;
  padding: 30px 40px
}
.protocol-title {
  font: 400 30px IBM Plex Mono;
  margin: 0 0 15px;
  color: #6F2037
}
.protocol>div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 25px;
  padding: 15px 0;
  border-top: 1px solid #E4D3DA
}
.protocol p {
  margin: 0
}
.protocol span {
  font-weight: 700
}
.documents {
  background: #F0E7EC
}
.note {
  font-size: 14px
}
details {
  padding: 22px 0;
  border-top: 1px solid #C9ADB8
}
summary {
  cursor: pointer;
  font-size: 22px
}
details p {
  max-width: 800px
}
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px
}
.contact a {
  overflow-wrap: anywhere
}
.contact aside p {
  max-width: 450px
}
form {
  display: grid;
  gap: 17px
}
label {
  display: grid;
  gap: 6px
}
input,textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #B497A3;
  background: #fff;
  border-radius: 0
}
.consent {
  display: flex;
  font-size: 14px;
  gap: 10px
}
.consent input {
  width: 20px;
  height: 20px;
  flex: none
}
form button {
  background: #6F2037;
  color: white;
  border: 0;
  padding: 17px;
  cursor: pointer
}
[role=status] {
  margin: 0;
  font-size: 15px
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #E4D3DA;
  padding: 30px 6%;
  gap: 25px;
  font-size: 15px
}
footer b {
  font: 700 24px IBM Plex Mono;
  color: #6F2037
}
@media(max-width:850px) {
  header {
    padding: 24px 6%;
    align-items: start
  }
  .brand {
    font-size: 23px
  }
  .header-right {
    display: block;
    text-align: right
  }
  nav {
    display: grid;
    gap: 9px;
    font-size: 14px
  }
  .contact-link {
    display: none
  }
  .hero {
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
    padding: 35px 6% 40px;
    gap: 20px;
    align-items: stretch
  }
  .hero h1 {
    font-size: 52px;
    letter-spacing: -1px
  }
  .hero h1 br:last-child {
    display: none
  }
  .hero p {
    font-size: 17px
  }
  .hero p br {
    display: none
  }
  .hero .button {
    margin-top: 10px
  }
  .specimen {
    max-width: 390px;
    width: 100%;
    margin: auto
  }
  .specimen svg {
    height: 310px
  }
  .specimen-label {
    font-size: 14px
  }
  section:not(.hero) {
    padding: 60px 6%
  }
  h2 {
    font-size: 35px
  }
  .test-index,.sampling,.contact {
    grid-template-columns: 1fr;
    gap: 35px
  }
  .test-sheet {
    padding: 25px
  }
  .materials button {
    font-size: 26px;
    padding: 18px 15px
  }
  .test-sheet h3 {
    font-size: 40px
  }
  .chain {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px
  }
  .protocol {
    padding: 25px
  }
  .protocol>div {
    grid-template-columns: 1fr;
    gap: 8px
  }
  .protocol-title {
    font-size: 26px
  }
  .contact a {
    font-size: 16px
  }
  footer {
    flex-direction: column;
    align-items: start;
    gap: 10px
  }
  footer p {
    margin: 0
  }
}
@media(max-width:360px) {
  .hero h1 {
    font-size: 45px
  }
  .chain {
    grid-template-columns: 1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
}



/* Task 12 */
body{background:#F3F5F6;color:#202A33}.hero{border-top:8px solid #202A33;grid-template-columns:1fr 1.15fr;gap:45px}.hero h1{font-size:52px;line-height:1.14;letter-spacing:-2px}h2{font-size:38px}h3{font-size:25px}.specimen{background:#E0E7EB}.specimen-label{color:#202A33}.tests{background:#fff}.button{border-radius:0}.test-picker button{border-radius:0}
@media(max-width:850px){.hero{display:flex;gap:25px}.hero h1{font-size:34px;letter-spacing:-1px}.hero h1 br{display:none}h2{font-size:30px}h3{font-size:23px}}

/* Этап 15: самостоятельная фотоподача */
.hero{grid-template-columns:1.1fr 1fr;gap:60px}.visual-hero{margin:0;height:590px;overflow:hidden}.visual-hero img{width:100%;height:100%;object-fit:cover}.tests .visual-process{grid-column:1/-1;margin:40px 0 0}.visual-process img{width:100%;height:330px;object-fit:cover}.sampling .visual-detail{margin:40px 0 0;grid-column:1/-1;border-bottom:6px solid #6F2037}.visual-detail img{display:block;width:100%;height:350px;object-fit:cover}.technical-inset{grid-column:1/-1}.technical-inset .specimen{max-width:430px;margin:25px auto}.visual-hero img{transition:filter .7s}.visual-hero:hover img{filter:contrast(1.12)}@media(max-width:850px){.hero{display:flex;flex-direction:column-reverse;gap:25px;padding:30px 6%}.hero h1{font-size:39px}.visual-hero{width:100%;height:330px}.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:850px){.visual-hero{height:275px}}@media(max-width:360px){.visual-hero{height:240px}.hero h1{font-size:32px}.hero-copy p{font-size:16px}}