/* home-cta — FirstOKC layout adapted for shared, dashboard-driven Swifty markup. */
.first-v2-home section#home-cta.home-cta {
position: relative;
  padding: 100px 0 250px;
  margin-bottom: -150px;
  overflow: hidden;
  z-index: 1;
  background: color-mix(in srgb, var(--first-secondary) 75%, var(--first-white));
  font-family: var(--first-font-body);
}
.first-v2-home section#home-cta .cta-container {
max-width: 1560px;
  padding: 0 15px;
}
.first-v2-home section#home-cta .cta-columns-wrap {
display: flex;
  gap: 0;
}
.first-v2-home section#home-cta .cta-item-wrap {
width: 100%;
  margin: 0 20px;
  /* color: var(--first-on-primary); */
}
.first-v2-home section#home-cta .cta-box-img {
display: none;
}
.first-v2-home section#home-cta .cta-box-content {
padding: 150px 75px;
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--base-color);
}
/* Hover diamond, as live builds it: an octagon of secondary that scales down
   from 1.5 and fades in, a primary octagon inset 10px inside it, and a further
   secondary fill inset 12-13px. The middle layer is left showing as the thin
   dark line tracing the shape. */
.first-v2-home section#home-cta .box-bg {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
  opacity: 0;
  transform: scale(1.5);
  transition: var(--first-transition);
  pointer-events: none;
}
.first-v2-home section#home-cta .cta-item-wrap:hover .box-bg,
.first-v2-home section#home-cta .cta-item-wrap:focus-within .box-bg {
opacity: 1;
  transform: scale(1);
}
.first-v2-home section#home-cta .box-bg .box-bg-inner {
position: relative;
  width: 100%;
  height: 100%;
  clip-path: polygon(calc(25% + 10px) 0%, calc(75% - 10px) 0%, 100% calc(25% + 10px), 100% calc(75% - 10px), calc(75% - 10px) 100%, calc(25% + 10px) 100%, 0% calc(75% - 10px), 0% calc(25% + 10px));
}
.first-v2-home section#home-cta .box-bg .box-bg-inner::after {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--first-secondary);
  clip-path: polygon(calc(25% + 12px) 0%, calc(75% - 12px) 0%, 100% calc(25% + 13px), 100% calc(75% - 13px), calc(75% - 12px) 100%, calc(25% + 12px) 100%, 0% calc(75% - 13px), 0% calc(25% + 13px));
}

/* Copy and arrow sit above the diamond. */
.first-v2-home section#home-cta .section-title,
.first-v2-home section#home-cta .section-subtitle,
.first-v2-home section#home-cta .cta-btns {
position: relative;
  z-index: 1;
}
.first-v2-home section#home-cta .section-title {
margin: 0 0 55px;
  padding: 30px 0;
  font-family: var(--font-heading, "Playfair Display", Georgia, serif);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  /* color: var(--first-on-primary); */
  opacity: 0.5;
  transition: var(--first-transition);
}
.first-v2-home section#home-cta .section-title::before,
.first-v2-home section#home-cta .section-title::after {
content: "";
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  border-bottom: 1px solid currentColor;
}
.first-v2-home section#home-cta .section-title::before {
top: 0;
}
.first-v2-home section#home-cta .section-title::after {
bottom: 0;
}
.first-v2-home section#home-cta .section-subtitle {
margin: 45px 0 30px;
  font-family: var(--first-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 3px;
  text-transform: uppercase;
  /* color: var(--first-on-primary); */
  opacity: 0.5;
  transition: var(--first-transition);
}
.first-v2-home section#home-cta .cta-btns .cta-box-link {
margin: 5px auto;
  /* color: var(--first-on-primary); */
  opacity: 0.5;
}
.first-v2-home section#home-cta .cta-link-icon {
display: none;
}
.first-v2-home section#home-cta .cta-item-wrap > .cta-box-link {
position: absolute;
  inset: 0;
  z-index: 2;
}
.first-v2-home section#home-cta .cta-item-wrap:hover .section-title,
.first-v2-home section#home-cta .cta-item-wrap:hover .section-subtitle,
.first-v2-home section#home-cta .cta-item-wrap:hover .cta-btns .cta-box-link,
.first-v2-home section#home-cta .cta-item-wrap:focus-within .section-title,
.first-v2-home section#home-cta .cta-item-wrap:focus-within .section-subtitle,
.first-v2-home section#home-cta .cta-item-wrap:focus-within .cta-btns .cta-box-link {
opacity: 1;
}

/* Shared component adaptations. */

.first-v2-home section#home-cta .cta-item-wrap { position: relative; min-width: 0; flex: 1; }
.first-v2-home section#home-cta .cta-box-content { height: 100%; }
.first-v2-home section#home-cta .cta-btns a { position: relative; z-index: 3; }
.first-v2-home section#home-cta .cta-item-wrap > .cta-box-link { font-size: 0; }
.first-v2-home section#contact-cta { padding: 70px 24px; background: var(--base-color); color: var(--first-on-primary); }

/* Responsive section layout. */
@media screen and (max-width: 1675px) {
.first-v2-home section#home-cta .cta-container {
max-width: 1440px;
}
.first-v2-home section#home-cta .cta-box-content {
padding: 50px;
}
}
@media screen and (max-width: 1440px) {
.first-v2-home section#home-cta .cta-container {
max-width: 1280px;
}
.first-v2-home section#home-cta .section-title {
margin-bottom: 35px;
    font-size: 30px;
}
.first-v2-home section#home-cta .section-subtitle {
font-size: 10px;
}
}
@media screen and (max-width: 1366px) {
.first-v2-home section#home-cta .cta-container {
max-width: 1140px;
}
}
@media screen and (max-width: 1200px) {
.first-v2-home section#home-cta .cta-container {
max-width: 1000px;
}
.first-v2-home section#home-cta .cta-box-content {
padding: 50px 25px;
}
}
@media screen and (max-width: 992px) {
.first-v2-home section#home-cta .cta-container {
max-width: 100%;
    padding: 0 15px;
}
.first-v2-home section#home-cta.home-cta {
padding-bottom: 100px;
    margin-bottom: -50px;
}
.first-v2-home section#home-cta .cta-columns-wrap {
flex-direction: column;
    gap: 24px;
}
.first-v2-home section#home-cta .cta-item-wrap {
width: 100%;
    margin: 0 auto;
}
.first-v2-home section#home-cta .cta-box-content {
    padding: 70px 30px;
}
.first-v2-home section#home-cta .section-title {
margin-bottom: 50px;
}
.first-v2-home section#home-cta .section-subtitle {
margin-bottom: 50px;
    font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.first-v2-home section#home-cta .section-title {
line-height: 1.3;
}
.first-v2-home section#home-cta .section-subtitle {
min-height: 50px;
    margin-top: 0;
}
}