.oa-thero {
  position: relative;
  background: #f6f7f8;
  box-sizing: border-box;
}
.oa-thero *, .oa-thero *::before, .oa-thero *::after { box-sizing: border-box; }
.oa-thero p, .oa-thero h1 { margin: 0; }

.oa-thero-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f6f7f8;
  border-left: 1px solid var(--oa-border-light);
  border-right: 1px solid var(--oa-border-light);
  border-bottom: 1px solid var(--oa-border-light);
  padding: 96px var(--oa-content-padding);
  overflow: hidden;
}

.oa-thero-corner {
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: var(--oa-border-light);
  pointer-events: none;
}
.oa-thero-corner-bl { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.oa-thero-corner-br { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.oa-thero-headline {
  font-family: var(--oa-font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: var(--oa-text-dark);
}
.oa-thero-headline .accent {
  font-family: var(--oa-font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 52px;
  color: var(--oa-green-500);
  letter-spacing: -1px;
}

@media (max-width: 767px) {
  .oa-thero-frame { padding: 56px 20px; }
  .oa-thero-headline { font-size: clamp(30px, 8.5vw, 36px); }
  .oa-thero-headline .accent { font-size: clamp(34px, 9.5vw, 42px); }
}

@media (max-width: 380px) {
  .oa-thero-frame { padding-left: 16px; padding-right: 16px; }
}