.oa-hero {
  position: relative;
  background: #002229;
  overflow: hidden;
  color: var(--oa-text-white);
  box-sizing: border-box;
}
.oa-hero *, .oa-hero *::before, .oa-hero *::after { box-sizing: border-box; }
.oa-hero img { display: block; max-width: 100%; }
.oa-hero p { margin: 0; }

.oa-hero-bg { position: absolute; inset: 0; z-index: 0; }
.oa-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.14; }
.oa-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(227.66deg, rgba(0,26,31,.8) 17.7%, rgba(0,26,31,0) 49.6%),
    linear-gradient(270deg, rgba(0,20,23,0) 0%, rgba(0,26,31,.63) 100%);
}

.oa-hero-content-wrap {
  position: relative;
  z-index: 2;
  padding: 294px var(--oa-content-padding) 91px;
}

.oa-hero-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.oa-hero-left { flex: 1 1 480px; max-width: 806px; min-width: 0; }
.oa-hero-headline {
  font-family: var(--oa-font-heading);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.2;
  color: var(--oa-text-white);
  margin: 0 0 8px;
}
.oa-hero-headline .accent {
  font-family: var(--oa-font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 68px;
  color: var(--oa-green-500);
  letter-spacing: -2px;
}
.oa-hero-sub {
  color: #9ea5ad;
  font-size: 18px;
  letter-spacing: 0.18px;
  max-width: 635px;
  margin-top: 24px;
}

.oa-hero-buttons { display: flex; gap: 16px; align-items: center; margin-top: 40px; flex-wrap: wrap; }
.oa-hero-outline-btn {
  display: inline-block;
  border: 1px solid var(--oa-border-darkest);
  border-radius: var(--oa-radius-sm);
  padding: 14px 26px 13px;
  color: var(--oa-text-white);
  font-weight: 500;
  font-size: 16px;
  opacity: 0.85;
  background: transparent;
  font-family: var(--oa-font-body);
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, opacity .18s ease;
}
.oa-hero-outline-btn:hover {
  border-color: var(--oa-green-500);
  color: var(--oa-green-300);
  opacity: 1;
}

.oa-hero-right {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 2px 201px;
  align-items: start;
  column-gap: 20px;
  flex: 0 0 457px;
  width: 457px;
  height: 148px;
  min-width: 0;
  padding-top: 22px;
  isolation: isolate;
}
.oa-hero-right::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: calc(50% + 1px);
  right: 0;
  top: 80px;
  height: 54px;
  background: linear-gradient(
    90deg,
    rgba(0, 194, 150, .06) 0%,
    rgba(0, 194, 150, .22) 22%,
    rgba(0, 194, 150, .52) 52%,
    rgba(0, 194, 150, .72) 76%,
    rgba(0, 194, 150, .8) 100%
  );
  box-shadow:
    inset 42px 0 38px rgba(0, 35, 42, .2),
    0 0 28px rgba(0, 194, 150, .04);
}
.oa-hero-right::after {
  content: '';
  position: absolute;
  z-index: -2;
  left: 0;
  right: calc(0px - var(--oa-content-padding));
  top: 0;
  height: 148px;
  background: linear-gradient(
    90deg,
    rgba(0, 35, 42, 0) 0%,
    rgba(0, 47, 56, .08) 28%,
    rgba(0, 47, 56, .24) 66%,
    rgba(0, 47, 56, .38) 100%
  );
}
.oa-hero-divider-bar {
  width: 2px;
  height: 148px;
  margin-top: -22px;
  background: var(--oa-green-500);
  box-shadow: 0 0 10px rgba(0, 194, 150, .16);
}
.oa-hero-stat-value {
  font-family: var(--oa-font-mono);
  font-size: 44px;
  color: #ecedef;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.oa-hero-stat-label {
  font-family: var(--oa-font-mono);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--oa-text-white);
  opacity: 0.75;
  text-align: right;
  white-space: nowrap;
}

.oa-hero-logos-row { display: flex; align-items: center; gap: 42px; margin-top: 96px; flex-wrap: wrap; }
.oa-hero-logos-label {
  font-family: var(--oa-font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.28px;
  color: var(--oa-text-white);
  opacity: 0.5;
  white-space: nowrap;
}
.oa-logos-scroll { position: relative; overflow: hidden; flex: 1; min-width: 240px; border-left: 1px solid var(--oa-border-darkest); padding: 10px; }
.oa-logos-track { display: flex; gap: 70px; width: max-content; animation: oa-marquee 20s linear infinite; }
@keyframes oa-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.oa-logos-track img {
  height: 24px;
  width: auto;
  /* Client logos are uploaded by whoever edits the page and can be any color.
     brightness(0) flattens every opaque pixel to solid black (transparency is
     kept), invert(1) flips that to white, so every logo renders as a single
     uniform silhouette no matter what colors the original file used. */
  filter: brightness(0) invert(1);
  opacity: 0.55;
}
.oa-logos-scroll::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 144px;
  background: linear-gradient(to left, #001e24, rgba(0,30,36,0));
}

@media (max-width: 900px) {
  .oa-hero-main { flex-direction: column; align-items: flex-start; }
  .oa-hero-content-wrap { padding-top: 140px; }
  .oa-hero-right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 457px;
  }
}
@media (min-width: 901px) and (max-width: 1300px) {
  .oa-hero-content-wrap { padding-top: 160px; }
}

@media (min-width: 901px) and (max-width: 1440px) {
  .oa-hero-headline {
    font-size: 46px;
    line-height: 1.2;
  }
  .oa-hero-headline .accent {
    font-size: 58px;
    letter-spacing: -1.5px;
  }
}

/* .oa-hero-left's width isn't a simple function of the viewport — .oa-hero-right
   is a fixed 457px (flex-shrink: 0). Below ~1070px there's no room for both side
   by side, so .oa-hero-right wraps onto its own row and .oa-hero-left gets its
   full 806px cap (fine at 46px/58px, unchanged here). From ~1071px both fit on
   one row again, but .oa-hero-left only gets whatever's left over — as little as
   ~500-610px — until there's enough room to stop shrinking it around 1330px+.
   At a fixed 46px/58px that squeeze is narrow enough for "your business." (the
   accent phrase, same size as "your") to lose "business." to an orphan line.
   (Tried container query units here first so the size would track the column's
   real width automatically, but container-type: inline-size on .oa-hero-left
   broke its flex sizing entirely in the wrapped ≤1070px case above — the column
   collapsed to 0 width. Not worth that risk, so this is a plain, conservative
   override instead: 36px/45.5px is the smallest this range ever needs, checked
   against its narrowest point, so it's safe everywhere in between even though
   it's smaller than necessary for most of the range.) */
@media (min-width: 1071px) and (max-width: 1330px) {
  .oa-hero-headline { font-size: 36px; }
  .oa-hero-headline .accent { font-size: 45.5px; }
}

@media (max-width: 767px) {
  .oa-hero-content-wrap { padding-top: 124px; padding-bottom: 64px; }
  .oa-hero-main { gap: 48px; }
  .oa-hero-left { flex-basis: auto; width: 100%; }
  .oa-hero-headline { font-size: 36px; line-height: 1.14; }
  .oa-hero-headline .accent { font-size: 45px; letter-spacing: -1px; }
  .oa-hero-sub { font-size: 16px; line-height: 1.5; }
  .oa-hero-buttons { width: 100%; margin-top: 32px; }
  .oa-hero-buttons .oa-btn,
  .oa-hero-outline-btn { width: 100%; }
  .oa-hero-buttons .oa-btn-label { flex: 1; justify-content: center; }
  .oa-hero-outline-btn { text-align: center; white-space: normal; }
  .oa-hero-right {
    grid-template-columns: minmax(0, 1fr) 2px 86px;
    column-gap: 16px;
    flex: 0 0 auto;
    width: 100%;
    height: 112px;
    min-width: 0;
    padding-top: 14px;
  }
  .oa-hero-right::before {
    left: calc(100% - 102px);
    right: 0;
    top: 60px;
    height: 42px;
    background: linear-gradient(
      90deg,
      rgba(0, 194, 150, .06) 0%,
      rgba(0, 194, 150, .24) 26%,
      rgba(0, 194, 150, .56) 60%,
      rgba(0, 194, 150, .78) 100%
    );
    box-shadow: inset 28px 0 24px rgba(0, 35, 42, .18);
  }
  .oa-hero-right::after { right: -20px; height: 112px; }
  .oa-hero-divider-bar { height: 112px; margin-top: -14px; }
  .oa-hero-stat-value { font-size: 36px; line-height: 1.15; }
  .oa-hero-stat-label {
    align-self: start;
    padding-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .oa-hero-logos-row { align-items: flex-start; gap: 20px; margin-top: 64px; }
  .oa-hero-logos-label { width: 100%; white-space: normal; }
  .oa-logos-scroll { width: 100%; min-width: 0; }
}