.sf-cta {
  padding-block: 0;
  color: var(--cta-body-color);
  background: var(--section-background, var(--cta-background));
  isolation: isolate;
  min-height: clamp(17rem, 27vw, 24rem);
  align-items: center;
  display: grid;
  overflow: hidden;
  position: relative;
  --cta-image-overlay-opacity: 1;
  --cta-overlay-opacity: max(0.55, var(--media-overlay-opacity));
  --cta-gradient: var(--gradient-media-dark);
  --cta-panel-border-color: var(--sf-border-alt);
  --cta-panel-color: var(--sf-body-alt);
  --cta-panel-background: var(--sf-bg-dark);
  --cta-background: var(--sf-bg-dark);
  --cta-body-color: var(--sf-body-alt);
  --cta-headline-color: var(--sf-heading-alt);
  --cta-headline-size: var(--font-h2-size);
  --cta-eyebrow-color: var(--sf-primary);
}

.sf-cta[data-sf-tone="light"] {
  --cta-panel-border-color: color-mix(in srgb, var(--card-border-color) 72%, transparent);
  --cta-panel-color: var(--sf-body);
  --cta-panel-background: color-mix(in srgb, var(--sf-bg) 12%, transparent);
  --cta-background: var(--sf-bg);
  --cta-body-color: var(--sf-body);
  --cta-headline-color: var(--sf-heading);
  --cta-eyebrow-color: var(--sf-primary);
}

.sf-cta[data-sf-tone="dark"] .sf-cta__panel {
  --cta-panel-border-color: transparent;
  --cta-panel-background: transparent;
}

.sf-cta__panel,
.sf-cta__grid {
  color: var(--cta-panel-color);
  background: var(--cta-panel-background);
  border-radius: var(--card-radius-lg);
  border: var(--card-border-width) solid var(--cta-panel-border-color);
  overflow: hidden;
  min-height: clamp(14rem, 28vw, 22rem);
  gap: 2rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  display: grid;
  position: relative;
}

.sf-cta .sf-cta__panel {
  backdrop-filter: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  border: 0;
  overflow: visible;
  width: min(100%, 72rem);
  min-height: 0;
}

.sf-cta__image,
.sf-cta__shade {
  inset: 0;
  position: absolute;
}

.sf-cta__image {
  opacity: 0.18;
  object-fit: cover;
  max-width: none;
  height: 100%;
  width: 100%;
}

.sf-cta__shade {
  opacity: var(--section-overlay-opacity, var(--cta-overlay-opacity));
  background: var(--section-gradient, var(--cta-gradient));
}

.sf-cta > .sf-cta__image,
.sf-cta > .sf-cta__shade {
  inset: 0;
  position: absolute;
}

.sf-cta > .sf-cta__image {
  filter: saturate(0.94) contrast(0.96);
  opacity: 1;
  object-position: 64% center;
  object-fit: cover;
  max-width: none;
  height: 100%;
  width: 100%;
}

.sf-cta > .sf-cta__shade {
  opacity: 1;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--sf-bg-dark) 76%, transparent) 0%,
      color-mix(in srgb, var(--sf-bg-dark) 58%, transparent) 37%,
      color-mix(in srgb, var(--sf-bg-dark) 28%, transparent) 68%,
      color-mix(in srgb, var(--sf-bg-dark) 14%, transparent) 100%
    ),
    var(--section-gradient, var(--cta-gradient));
}

.sf-cta .container-global {
  z-index: 1;
  position: relative;
}

.sf-cta__inner {
  padding: clamp(1.5rem, 5vw, 3rem);
  width: 100%;
  gap: 2rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  display: grid;
  z-index: 1;
  position: relative;
}

.sf-cta .sf-cta__inner {
  padding: clamp(2rem, 5vw, 4rem) 0;
  gap: clamp(1.25rem, 2.8vw, 2rem);
  grid-template-columns: minmax(0, 42rem);
}

.sf-cta__copy {
  max-width: 720px;
}

.sf-cta .sf-cta__copy {
  max-width: 45rem;
}

.sf-cta__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: var(--field-font-weight, var(--font-weight-bold));
  font-size: var(--field-font-size, var(--font-label-size));
  color: var(--cta-eyebrow-color);

  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  display: block;
}

.sf-cta .sf-cta__eyebrow {
  color: var(--field-color, var(--sf-primary));
}

.sf-cta__eyebrow + .sf-cta__headline::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 14px;
  background: var(--cta-eyebrow-color);
}

.sf-cta__headline {
  text-decoration: var(--field-text-decoration, none);
  letter-spacing: 0;
  line-height: 1.08;
  font-style: var(--field-font-style, normal);
  font-weight: var(--field-font-weight, var(--font-weight-bold));
  font-size: var(--field-font-size, var(--cta-headline-size));
  font-family: var(--sf-font-heading), system-ui, sans-serif;
  color: var(--field-color, var(--cta-headline-color));
  margin: 0;
}

.sf-cta__description,
.sf-cta__body {
  text-decoration: var(--field-text-decoration, none);
  font-style: var(--field-font-style, normal);
  font-weight: var(--field-font-weight, inherit);
  font-size: var(--field-font-size, inherit);
  color: var(--field-color, var(--cta-body-color));
  max-width: 62ch;
  margin: 1rem 0 0;
}

.sf-cta .sf-cta__body {
  color: color-mix(in srgb, var(--cta-body-color) 88%, transparent);
  margin-top: 0.85rem;
  max-width: 48rem;
}

.sf-cta__actions {
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  display: flex;
}

.sf-cta .sf-cta__actions {
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 0;
}

.sf-cta__actions svg,
.sf-cta .btn-primary svg,
.sf-cta .btn-secondary svg {
  flex: 0 0 auto;
  height: 1rem;
  width: 1rem;
}

.sf-cta__phone {
  line-height: 1.2;
  font-size: var(--font-label-size);
  color: inherit;
  min-height: 2.75rem;
  gap: 0.45rem;
  align-items: center;
  display: inline-flex;
}

.sf-cta .sf-cta__phone {
  color: color-mix(in srgb, var(--cta-body-color) 90%, transparent);
  border-left: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  padding-left: clamp(1rem, 2vw, 1.35rem);
  min-height: 3rem;
}

.sf-cta .sf-cta__phone svg {
  height: 1.25rem;
  width: 1.25rem;
}

.sf-cta__phone-text {
  gap: 0.15rem;
  display: grid;
}

.sf-cta__phone strong {
  font-weight: var(--font-weight-bold);
  color: var(--cta-headline-color);
  display: block;
}

.sf-cta .sf-cta__phone strong {
  color: var(--cta-headline-color);
}

.sf-cta__banner-image,
.sf-cta__banner-shade {
  inset: 0;
  position: absolute;
}

.sf-cta__banner-image {
  filter: saturate(0.9) contrast(0.94);
  opacity: 1;
  object-fit: cover;
  max-width: none;
  height: 100%;
  width: 100%;
}

.sf-cta__banner-shade {
  opacity: 1;
  background: color-mix(in srgb, var(--sf-bg-dark) 85%, transparent);
}

.sf-cta__bg-image {
  filter: saturate(0.92) contrast(0.96);
  opacity: 1;
  object-fit: cover;
  max-width: none;
  height: 100%;
  width: 100%;
  inset: 0;
  position: absolute;
}

.sf-cta__media {
  box-shadow: var(--image-shadow);
  background: var(--sf-bg);
  border-radius: var(--image-radius);
  border: var(--card-border-width) solid var(--card-border-color);
  overflow: hidden;
  grid-row: 1 / span 2;
  grid-column: 2;
}

.sf-cta__media img {
  object-fit: cover;
  aspect-ratio: 4 / 3;
  width: 100%;
}

@media (max-width: 760px) {
  .sf-cta {
  padding-block: 0;
  min-height: clamp(23rem, 92vw, 30rem);
}

  .sf-cta__grid,
  .sf-cta__inner {
    grid-template-columns: 1fr;
  }

  .sf-cta__panel,
  .sf-cta__grid {
    min-height: 0;
  }

  .sf-cta .sf-cta__panel {
    width: 100%;
  }

  .sf-cta .sf-cta__inner {
  padding-block: clamp(2rem, 10vw, 3rem);
  min-height: inherit;
}

  .sf-cta .sf-cta__actions {
  flex-direction: column;
  align-items: flex-start;
}

  .sf-cta__media {
  grid-row: auto;
  grid-column: 1;
}

  .sf-cta > .sf-cta__image {
    object-position: 68% center;
  }

  .sf-cta > .sf-cta__shade {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--sf-bg-dark) 76%, transparent) 0%,
        color-mix(in srgb, var(--sf-bg-dark) 58%, transparent) 58%,
        color-mix(in srgb, var(--sf-bg-dark) 34%, transparent) 100%
      ),
      var(--section-gradient, var(--cta-gradient));
  }

  .sf-cta__phone {
    width: 100%;
  }

  .sf-cta .sf-cta__phone {
  border-left: 0;
  padding-left: 0;
}
}

.sf-cta {
  --cta-background: var(--sf-bg);
  --cta-body-color: var(--sf-body);
  --cta-headline-color: var(--sf-heading);
  --cta-eyebrow-color: var(--sf-primary);
  --cta-card-background: color-mix(in srgb, var(--sf-bg-alt) 65%, var(--sf-bg));
  --cta-card-border-color: color-mix(in srgb, var(--sf-primary) 20%, transparent);
  --cta-card-radius: 20px;
  --cta-card-shadow:
    0 12px 32px color-mix(in srgb, var(--sf-primary) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sf-bg) 68%, transparent);
  background: var(--cta-background);
  padding-block: clamp(4.5rem, 8vw, 6rem);
  min-height: 0;
}

.sf-cta > .sf-cta__image,
.sf-cta > .sf-cta__shade {
  display: none;
}

.sf-cta .sf-cta__panel {
  width: min(100%, var(--container-max, 72rem));
  background: var(--cta-card-background);
  border: 1px solid var(--cta-card-border-color);
  border-radius: var(--cta-card-radius);
  box-shadow: var(--cta-card-shadow);
  padding: clamp(2rem, 4vw, 3rem);
}

.sf-cta .sf-cta__inner {
  padding: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.sf-cta .sf-cta__actions {
  gap: 1rem;
}

.sf-cta .sf-cta__phone {
  border-left: 0;
  padding-left: 0;
  padding-inline: 1.25rem;
  min-height: 3rem;
  border-radius: var(--button-radius);
  border: 1px solid var(--sf-primary);
  color: var(--sf-primary);
  background: transparent;
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.sf-cta .sf-cta__phone:hover {
  background: color-mix(in srgb, var(--sf-primary) 8%, transparent);
}

.sf-cta .sf-cta__phone-text > span:first-child {
  display: none;
}

.sf-cta .sf-cta__phone strong::before {
  content: "Call ";
  font-weight: inherit;
}

@media (max-width: 760px) {
  .sf-cta {
    padding-block: clamp(3rem, 10vw, 4rem);
  }

  .sf-cta .sf-cta__panel {
    border-radius: var(--card-radius);
    padding: clamp(1.5rem, 6vw, 2rem);
  }

  .sf-cta .sf-cta__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.sf-cta[data-sf-gradient="hero_dark"] { --section-gradient: var(--gradient-hero-dark); }
.sf-cta[data-sf-gradient="primary_fade"] { --section-gradient: var(--gradient-primary-fade); }
.sf-cta[data-sf-gradient="media_dark"] { --section-gradient: var(--gradient-media-dark); }
.sf-cta[data-sf-gradient="primary_secondary"] { --section-gradient: var(--gradient-primary-secondary); }
.sf-cta[data-sf-gradient="surface"] { --section-gradient: var(--gradient-surface); }