.section-cta {
  position: relative;
}
.section-cta::before {
  content: '';
  display: block;
  position: absolute;
  top: -1px;
  width: 100%;
  height: 2px;
  background-color: var(--theme-color-background);
  z-index: 2;
}

/* section-cta's own image wrapper — was .front-page__image, renamed
   since that name is generic and this markup/CSS is only ever used
   here. */
.section-cta__image {
  position: relative;
  /* height: calc(100svh - (var(--theme-section-padding) * 2)); */
  /* margin-bottom: var(--theme-section-padding); */
  display: flex;
  background-size: cover;
  background-position: center;
  min-height: 40svh;
}

/* Fades in on scroll — this overlay isn't the page-load hero. */
.section-cta__image-overlay {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: var(--theme-section-padding);
  color: #fff;
}

/* opacity:0 lives only inside this guard — outside it, a browser
   without animation-timeline: view() support (Safari, Firefox at time
   of writing) would never run the animation that restores opacity:1,
   leaving this overlay permanently invisible instead of just
   un-animated. */
@supports (animation-timeline: view()) {
  .section-cta__image-overlay {
    opacity: 0;
    transform: translateY(0);
    animation: reveal-image-overlay-cta linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}

@keyframes reveal-image-overlay-cta {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-cta__image-overlay p {
  max-width: 30rem;
  font-size: 1.125rem;
}

.section-cta .section-cta__image {
  border-top: 1px solid black;
}

.section-cta .section-cta__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--theme-color-primary) 50%, transparent);
  pointer-events: none;
}

/* section-cta's own frame — was .brand__frame/.brand__frame-inner.
   Not shared with any other section: each section that needs this
   inset+hairline-border+sticky-spacer shape gets its own scoped
   version instead of a site-wide "brand frame" utility. */
.section-cta__frame {
  margin: 0 var(--theme-section-padding);
}

.section-cta__frame::before,
.section-cta__frame::after {
  content: "";
  display: block;
  height: var(--theme-section-padding);
  background-color: var(--theme-color-background);
  position: sticky;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 2;
}

.section-cta__frame::after {
  z-index: 1;
  bottom: 0;
  top: auto;
  box-shadow: 0 -1px 0 0 black;
}

.section-cta__frame-inner {
  border: var(--theme-line-width) solid var(--theme-line-color);
  border-top-width: 0;
  overflow: clip;
  background-color: white;
}

/* sticky-cta.php rendered with root_class="section-cta__cta" — already
   inset by .section-cta__frame's own margin/border, so cancel the
   shared .brand-frame__cta positioning sticky-cta.css would otherwise
   apply and replicate just what this frame needs. Stays sticky — this
   bar sits near the bottom of the front-page, not right under a hero,
   so it doesn't pin over a large chunk of content the way
   section-hero__cta did (see that file's comment). */
.section-cta__cta {
  position: sticky;
  bottom: var(--theme-section-padding);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  height: var(--theme-header-height);
  color: var(--theme-color-text);
  box-sizing: content-box;
}

.section-cta__cta-inner {
  display: grid;
  border-bottom: var(--theme-line-width) solid var(--theme-line-color);
  grid-template-columns: repeat(var(--theme-grid-columns), 1fr);
  height: 100%;
  border-top-width: 0;
  box-sizing: content-box;
}

.section-cta__cta-cell {
  display: flex;
  align-items: center;
  padding: 0 var(--theme-section-padding);
  border-top: var(--theme-line-width) solid var(--theme-line-color);
}

.section-cta__cta-cell--action {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-color-dark);
  color: var(--brand-color-light);
  justify-content: center;
  padding: .2rem .3rem .2rem .2rem;
  border-left: var(--theme-line-width) solid var(--theme-line-color);
  border-top: var(--theme-line-width) solid var(--theme-line-color);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
}

.section-cta__cta-cell--action .button__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--theme-section-padding);
  transform: translateX(0);
  transition: transform 0.5s var(--theme-ease-signature);
}

.section-cta__cta-cell--action .button__label::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--theme-section-padding);
  background-color: var(--theme-color-accent);
  color: var(--theme-color-primary);
  transform: translateX(100%);
}

.section-cta__cta-cell--action:hover .button__label {
  transform: translateX(-100%);
}

.section-cta__cta-cell--text {
  background-color: white;
}

.section-cta__cta-text {
  margin: 0;
}

/* Accent touch on this one CTA — was .brand-frame__cta--accent. */
.section-cta__cta--accent .section-cta__cta-cell--action {
  background-color: var(--theme-color-primary);
  color: var(--brand-color-light);
  border-left-color: var(--theme-color-primary);
  border-top-color: var(--theme-color-primary);
}