.about-hero {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(42, 19, 14, .78), rgba(42, 19, 14, .46)),
    url("heroback.jpg") center/cover;
  color: white;
  display: grid;
  gap: 70px;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.about-hero .kicker { color: #f0c75e; }
.about-hero .inner-hero-copy { max-width: 760px; }
.about-hero .inner-hero-mark { display: none; }
.inner-hero-mark { align-items: center; display: flex; justify-content: center; position: relative; }
.inner-hero-mark::before { border: 1px solid rgba(255,255,255,.18); border-radius: 50%; content: ""; height: 420px; position: absolute; width: 420px; }
.inner-hero-mark img { filter: drop-shadow(0 24px 30px rgba(0,0,0,.2)); max-width: 440px; position: relative; width: 100%; }

.story-section {
  display: grid; gap: 45px; grid-template-columns: 90px .9fr 1.1fr; margin: auto; max-width: 1180px;
  padding: 130px 28px;
}
.story-number { color: var(--gold); font-family: var(--serif); font-size: 5rem; line-height: .8; }
.story-heading h2 { color: var(--brown); font-size: clamp(2.8rem, 5vw, 5rem); margin-top: 18px; }
.story-copy { border-left: 1px solid var(--line); color: var(--muted); font-size: 1.04rem; padding-left: 45px; }
.story-copy p + p { margin-top: 24px; }

.direction-section { display: grid; grid-template-columns: 1fr 1fr; }
.direction-card { color: white; min-height: 540px; padding: clamp(50px, 8vw, 110px); }
.direction-card.vision { background: var(--green); }
.direction-card.mission { background: var(--olive); }
.direction-card span { color: #f1d984; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.direction-card h2 { font-size: clamp(3rem, 5vw, 5rem); margin: 95px 0 25px; }
.direction-card p { color: rgba(255,255,255,.72); max-width: 490px; }

.quality-section { display: grid; grid-template-columns: 1fr 1fr; margin: 120px auto; max-width: 1180px; min-height: 620px; }
.quality-image { background: url("gallery/9.jpeg") center/cover; }
.quality-content { background: var(--paper); padding: clamp(45px, 7vw, 90px); }
.quality-content h2 { color: var(--brown); font-size: clamp(2.8rem, 5vw, 4.8rem); margin: 20px 0 45px; }
.quality-content ul { list-style: none; }
.quality-content li { border-top: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 40px 1fr; padding: 20px 0; }
.quality-content li:last-child { border-bottom: 1px solid var(--line); }
.quality-content li span { color: var(--teal); font-size: .7rem; font-weight: 700; }

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; padding-bottom: 0; }
  .inner-hero-mark img { max-width: 350px; }
  .story-section { grid-template-columns: 70px 1fr; }
  .story-copy { border-left: 0; grid-column: 1 / -1; padding-left: 0; }
  .direction-section, .quality-section { grid-template-columns: 1fr; }
  .quality-image { min-height: 480px; }
}

@media (max-width: 620px) {
  .inner-hero { padding: 70px 22px; }
  .inner-hero-mark::before { height: 300px; width: 300px; }
  .story-section { display: block; padding: 90px 20px; }
  .story-number { margin-bottom: 30px; }
  .story-copy { margin-top: 35px; }
  .direction-card { min-height: 470px; padding: 55px 25px; }
  .direction-card h2 { margin-top: 65px; }
  .quality-section { margin: 70px 0; }
  .quality-image { min-height: 360px; }
}