/* Exact logo sizing from deploy 6ade66cebf5192a3d198e8a1. */
.header-main .logo.logo-image-lockup {
  flex: 0 0 210px;
  width: 210px;
  min-width: 210px;
  height: 40px;
  margin-inline-start: 0;
}

.header-main .logo.logo-image-lockup > .header-logo-full-image {
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

@media (width <= 374px) {
  .header-main .logo.logo-image-lockup {
    flex-basis: 190px;
    width: 190px;
    min-width: 190px;
    height: 36px;
  }
}

@media (width >= 768px) {
  .header-main .logo.logo-image-lockup {
    flex-basis: 260px;
    width: 260px;
    min-width: 260px;
    height: 46px;
  }
}

@media (width >= 1024px) {
  .header-main .logo.logo-image-lockup {
    flex-basis: 285px;
    width: 285px;
    min-width: 285px;
    height: 50px;
  }
}

@media (width >= 1180px) {
  .header-main .logo.logo-image-lockup {
    flex-basis: 320px;
    width: 320px;
    min-width: 320px;
  }
}

/* Keep both strategy headings the same responsive size as the Golden Gate heading. */
#reseni .strategy-editorial-copy h3,
.golden-gate-band .golden-gate-copy h3 {
  font-family: "Castoro", Georgia, serif;
  font-size: clamp(1.75rem, 2.7vw, 2.55rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

#reseni .strategy-editorial-copy h3 {
  margin: 0 0 13px;
}

/* Full-width Golden Gate band between the downloads and contact sections. */
.golden-gate-band {
  width: 100%;
  background: #e8decf;
  padding: clamp(68px, 8vw, 112px) 0;
}

.golden-gate-band .golden-gate-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
  grid-template-areas:
    "copy stats"
    "brand stats"
    "note note";
  gap: 32px 72px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--preview-ink);
}

.golden-gate-band .golden-gate-copy {
  grid-area: copy;
  max-width: 700px;
}

.golden-gate-band .golden-gate-copy h3 {
  margin: 0 0 1rem;
  color: var(--preview-ink);
}

.golden-gate-band .golden-gate-copy p,
.golden-gate-band .golden-gate-stats dd,
.golden-gate-band .golden-gate-proof > small {
  color: var(--fisher-copy);
  font-family: var(--fisher-type);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

.golden-gate-band .golden-gate-copy p {
  margin: 0;
}

.golden-gate-band .golden-gate-stats {
  display: grid;
  grid-area: stats;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: center;
  gap: 34px 54px;
  margin: 0;
}

.golden-gate-band .golden-gate-stats > div {
  border: 0;
}

.golden-gate-band .golden-gate-stats dt {
  color: var(--preview-ink);
  font-family: "Castoro", Georgia, serif;
  font-size: clamp(1.75rem, 2.7vw, 2.55rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.golden-gate-band .golden-gate-brand {
  position: relative;
  grid-area: brand;
  width: min(330px, 100%);
  min-height: 72px;
}

.golden-gate-band .golden-gate-brand img {
  opacity: 0;
}

.golden-gate-band .golden-gate-brand::before {
  position: absolute;
  inset: 50% auto auto 0;
  width: min(310px, 92%);
  aspect-ratio: 1696.2 / 355.5;
  transform: translateY(-50%);
  background: var(--preview-ink);
  content: "";
  -webkit-mask: url("/assets/golden-gate-logo-inverse.svg") center / contain no-repeat;
  mask: url("/assets/golden-gate-logo-inverse.svg") center / contain no-repeat;
}

.golden-gate-band .golden-gate-proof > small {
  grid-area: note;
  font-size: 13px;
}

@media (width <= 900px) {
  .golden-gate-band .golden-gate-proof {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "brand" "stats" "note";
  }
}

@media (width <= 700px) {
  .golden-gate-band .golden-gate-stats {
    gap: 28px 22px;
  }
}