* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  background: #EDF0F2;
  color: #202B34;
  font: 17px/1.55 "Inter",sans-serif
}
a {
  color: inherit;
  text-decoration: none
}
button,input,textarea {
  font: inherit
}
button,a,input,textarea,summary {
  outline-offset: 5px
}
button {
  cursor: pointer
}
header {
  height: 106px;
  margin: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #A3B2BC;
  gap: 24px
}
.logo {
  font: 700 29px "Yanone Kaffeesatz"
}
.logo span {
  display: block;
  font: 14px "Inter";
  margin-top: 4px
}
nav {
  display: flex;
  gap: 30px
}
nav a:hover,footer a:hover {
  text-decoration: underline
}
.header-action {
  border-bottom: 2px solid #BE352C;
  padding: 10px 0
}
.hero {
  height: 760px;
  position: relative;
  isolation: isolate;
  padding: 44px 5% 32px;
  overflow: hidden
}
.hero h1 {
  font: 700 clamp(70px,9.6vw,148px)/.91 "Yanone Kaffeesatz";
  letter-spacing: -5px;
  margin: 0;
  position: relative;
  z-index: 2;
  max-width: 640px
}
.beam {
  position: absolute;
  width: 66%;
  right: -3%;
  top: 135px;
  z-index: -1
}
.hero-bottom {
  position: absolute;
  bottom: 45px;
  left: 5%;
  right: 5%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px
}
.hero-bottom p {
  max-width: 450px
}
.button {
  display: inline-block;
  padding: 17px 25px;
  background: #BE352C;
  color: #fff;
  border: 0;
  text-align: center;
  font-weight: 700
}
.button:hover {
  background: #972B24
}
section:not(.hero) {
  padding: 85px 7%
}
h2 {
  font: 700 50px/1.05 "Yanone Kaffeesatz";
  margin: 0 0 36px
}
h3 {
  font-size: 24px
}
.production {
  background: #fff
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 60px
}
.section-head p {
  max-width: 400px;
  margin: 0
}
.catalog {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px
}
.catalog button {
  border: 0;
  border-bottom: 5px solid transparent;
  background: #EDF0F2;
  text-align: left;
  padding: 28px 24px;
  color: #202B34;
  font: 700 26px "Yanone Kaffeesatz"
}
.catalog button[aria-pressed=true] {
  border-color: #BE352C
}
.catalog span {
  display: block;
  font: 16px "Inter";
  margin-top: 10px
}
.catalog svg {
  display: block;
  width: 100%;
  height: 190px;
  margin-top: 30px
}
.selection {
  margin-bottom: 0
}
.packing {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
  gap: 70px
}
.tag {
  background: #fff;
  transform: rotate(-4deg);
  padding: 35px;
  border-left: 14px solid #BE352C;
  font-size: 26px
}
.packing li {
  margin: 18px 0
}
.workflow {
  background: #202B34;
  color: #fff
}
.workflow ol {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 35px;
  padding-left: 25px
}
.workflow li {
  padding-left: 6px
}
.workflow b {
  font-size: 22px
}
.workflow p {
  color: #D9E1E6
}
.control dl {
  margin: 0
}
.control dl div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border-top: 1px solid #A3B2BC;
  padding: 25px 0;
  gap: 30px
}
dt {
  font-weight: 700
}
dd {
  margin: 0
}
.papers {
  background: #fff
}
.note {
  font-size: 14px;
  color: #596772
}
details {
  border-top: 1px solid #A3B2BC;
  padding: 20px 0
}
summary {
  cursor: pointer;
  font-size: 21px
}
details p {
  max-width: 760px
}
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px
}
.contact p {
  max-width: 480px
}
.contact a {
  overflow-wrap: anywhere;
  text-decoration: underline
}
form {
  display: grid;
  gap: 18px
}
label {
  display: grid;
  gap: 7px
}
input,textarea {
  width: 100%;
  border: 1px solid #82949E;
  background: transparent;
  border-radius: 0;
  padding: 12px;
  color: inherit
}
.consent {
  display: flex;
  align-items: flex-start;
  font-size: 14px
}
.consent input {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 2px 8px 0 0
}
[role=status] {
  font-size: 15px;
  margin: 0
}
footer {
  background: #fff;
  padding: 30px 5%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 15px
}
@media(max-width:800px) {
  header {
    height: auto;
    padding: 22px 0;
    flex-wrap: wrap
  }
  nav {
    order: 3;
    width: 100%;
    gap: 20px;
    font-size: 14px
  }
  .header-action {
    font-size: 14px
  }
  .hero {
    height: 760px;
    padding-top: 35px
  }
  .hero h1 {
    font-size: 98px;
    letter-spacing: -3px
  }
  .beam {
    width: 105%;
    top: 245px;
    right: -10%
  }
  .hero-bottom {
    display: block;
    bottom: 35px
  }
  .hero-bottom p {
    font-size: 16px
  }
  .hero-bottom .button {
    margin-top: 10px
  }
  section:not(.hero) {
    padding: 60px 6%
  }
  h2 {
    font-size: 39px
  }
  .section-head {
    display: block
  }
  .section-head p {
    margin-bottom: 30px
  }
  .catalog {
    grid-template-columns: 1fr
  }
  .catalog button {
    position: relative;
    min-height: 180px;
    padding-right: 45%;
    font-size: 25px
  }
  .catalog svg {
    position: absolute;
    right: 0;
    top: 15px;
    width: 45%;
    height: 145px;
    margin: 0
  }
  .packing,.contact {
    grid-template-columns: 1fr;
    gap: 35px
  }
  .workflow ol {
    grid-template-columns: 1fr 1fr
  }
  .control dl div {
    grid-template-columns: 1fr;
    gap: 10px
  }
  footer {
    flex-direction: column
  }
  .contact h2 {
    margin-bottom: 20px
  }
}
@media(max-width:370px) {
  .hero h1 {
    font-size: 84px
  }
  .logo {
    font-size: 25px
  }
  .workflow ol {
    grid-template-columns: 1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
}
@media(max-width:800px) {
  .hero {
    height: 660px
  }
  .beam {
    top: 210px
  }
}
@media(max-width:370px) {
  .hero h1 {
    font-size: 74px
  }
}



/* Task 12 */
.hero h1{font-weight:700} .wordmark{font-weight:700}
@media(max-width:850px){.hero h1{font-size:95px}}

/* Этап 15: самостоятельная фотоподача */
.hero{height:760px;background:#202B34;color:white;padding-top:55px}.hero h1{font-size:clamp(90px,10vw,145px);letter-spacing:-3px}.visual-hero{position:absolute;inset:0;margin:0;z-index:-1;overflow:hidden}.visual-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,25,32,.88),transparent 85%),linear-gradient(0deg,rgba(16,25,32,.8),transparent 50%)}.visual-hero img{width:100%;height:100%;object-fit:cover}.hero-bottom{z-index:1}.production .visual-process{margin:45px 0 0;max-width:78%}.control .visual-detail{margin:30px 0 0;max-width:750px}.visual-process img,.visual-detail img{width:100%;height:350px;object-fit:cover}.visual-process{border-left:8px solid #BE352C}@media(max-width:850px){.hero{height:690px}.hero h1{font-size:85px}.visual-hero img{object-position:65%}.production .visual-process{max-width:100%}.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){.hero{height:630px}.hero h1{font-size:75px}}