/* ==========================================================================
   00 — Design Tokens / CSS Custom Properties
   --------------------------------------------------------------------------
   Define all brand colors, fonts, radii, and transitions here.
   Reference these variables in NEW CSS going forward.
   Existing CSS still uses hardcoded values — migrate gradually.
   ========================================================================== */

:root {
    /* --- Brand Colors --- */
    --color-primary:      #453cd3;  /* Purple — primary brand */
    --color-pink:         #d45180;  /* Pink — secondary brand */
    --color-teal:         #5cd9d6;  /* Teal — accent / hover */
    --color-light-blue:   #00b4e0;  /* Light blue — accent */
    --color-navy:         #1f4494;  /* Navy — co-op, PPC pages */

    /* --- Neutral Colors --- */
    --color-white:        #ffffff;
    --color-black:        #000000;
    --color-gray-light:   #f4f4f4;
    --color-gray-mid:     #bcbcbc;
    --color-gray-dark:    #878787;
    --color-gray-border:  #ddd;

    /* --- Typography --- */
    --font-display:       rift, sans-serif;
    --font-body:          'sofia-pro', sans-serif;
    --font-proxima:       'proxima-nova', sans-serif;

    /* --- Border Radius --- */
    --radius-sm:          0.3rem;
    --radius-md:          0.8rem;
    --radius-lg:          3rem;

    /* --- Transitions --- */
    --transition-fast:    0.2s ease-in-out;
    --transition-base:    0.3s ease-in-out;
    --transition-slow:    0.6s all;
}
/* ==========================================================================
   01 — Base Styles
   --------------------------------------------------------------------------
   Global resets, element-level defaults, and broad structural helpers
   that apply across the entire site.
   ========================================================================== */


/* --- Utility --- */

.hidden-important {
    display: none !important;
}

.relative {
    position: relative;
}

.unordered-list-style {
    list-style: disc;
    padding-left: 1.25em;
}


/* --- Image Alignment (WordPress classic) --- */

img.alignright {
    float: right;
    margin: 0 0 1em;
    margin-inline-start: 2em;
    margin-inline-end: 0;
}

img.alignleft {
    float: left;
    margin: 1em 0 0;
    margin-inline-start: 0;
    margin-inline-end: 2em;
}


/* --- Content Lists (blog/post body) --- */

p + ul {
    margin-bottom: 1em;
}

main .content ul:not(.accordion):not(.menu) {
    list-style: disc outside;
    padding-top: 0;
    padding-left: 2em;
}

main .content ul:not(.accordion):not(.menu) li > ul {
    padding-left: 4em;
}

main .content ul:not(.accordion):not(.menu) li > ul > li {
    list-style: circle;
}

main .content ul:not(.accordion):not(.menu) li > ul > li > ul > li {
    list-style: disc;
}

main .content ul:not(.accordion):not(.menu) li > ul > li > ul > li > ul > li {
    list-style: circle;
}


/* --- Responsive Video (custom .responsive-video wrapper) --- */

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 0 auto;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* --- Vimeo / WordPress Embed Block --- */

.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.wp-block-embed iframe {
    max-width: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border: 0;
}


/* --- Social Sharing (AddThis — blog posts only) --- */

body:not(.single-post) .a2a_floating_style {
    display: none;
}


/* --- GDPR Consent Popup --- */

.pi_tracking_opt_in_yes {
    font-size: 1em;
    background: #453cd3;
    border-radius: 0.3rem;
    padding: 0.1rem 0.5rem;
    color: #fff;
    -webkit-background-clip: initial;
    -webkit-text-stroke: 0;
    transition: 0.6s all;
    display: inline-flex;
}


/* ==========================================================================
   GLOBAL BUTTONS
   ========================================================================== */

/* Shared base */
.btn-primary,
.btn-primary--teal,
.btn-secondary,
.btn-secondary--dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 22px;
    border-radius: 0.8rem;
    border-width: 0.3rem;
    border-style: solid;
    font-family: 'rift', sans-serif;
    font-weight: 600;
    font-size: inherit;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: 0.3s all;
    cursor: pointer;
}

/* Primary — blue */
.btn-primary {
    background: #3F33C7;
    color: #fff;
    border-color: #3F33C7;
}

.btn-primary:hover {
    background: #2e26a0;
    border-color: #2e26a0;
    color: #fff;
}

/* Primary — teal */
.btn-primary--teal {
    background: var(--color-teal);
    color: #000;
    border-color: var(--color-teal);
}

.btn-primary--teal:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Secondary — white border (for dark backgrounds) */
.btn-secondary {
    background: none;
    color: #fff;
    border-color: #fff;
}

.btn-secondary:hover {
    background: #fff;
    color: #000;
}

/* Secondary — dark border (for light backgrounds) */
.btn-secondary--dark {
    background: none;
    color: #000;
    border-color: #000;
}

.btn-secondary--dark:hover {
    background: #000;
    color: #fff;
}
/* ==========================================================================
   02 — Typography
   --------------------------------------------------------------------------
   Heading sizes, font styles, responsive type, and text utility classes.
   ========================================================================== */


/* --- Heading Sizes (global responsive overrides) --- */

@media (min-width: 768px) {
    .h3, h3 {
        font-size: 4.5rem;
    }
}

@media (min-width: 1157px) {
    .h3, h3 {
        font-size: 6rem;
    }
}


/* --- Blog / Post Content Headings --- */

.post-content .content h2 {
    font-size: 4rem;
    margin-bottom: 0.5em;
}

.post-content .content h3 {
    font-size: 3rem;
    margin-bottom: 1em;
    margin-top: 1em;
}


/* --- Eyebrow --- */

.eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-teal);
    margin-bottom: 0.75rem;
}


/* --- Responsive Heading Utilities --- */

.responsive-h3 {
    font-size: clamp(30px, 3vw, 55px);
}

.responsive-h4 {
    margin-bottom: 1em;
    font-size: clamp(18px, 1.45vw, 26px);
}


/* --- Display / Outline Text --- */

.outline-text {
    font-family: rift, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1;
    font-size: 6rem !important;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgb(0 0 0);
}


/* --- Color Utilities --- */

.pink-text {
    color: #d45180;
}

.four-m-pink {
    color: #d45180;
}

.lt-blue-4m {
    color: #00b4e0;
}

.pink-h3-big {
    color: #d45180;
    font-size: 2.4em;
}

.retro {
    text-shadow: 2px 2px 0 #ffa7c7, 4px 4px 0 #ffbcd3, 2px 2px 2px rgba(206, 89, 55, 0);
    color: #D65282;
}


/* --- Blockquote --- */

.blockquote-dynamik {
    border-left: 2px solid #00B8B0 !important;
    padding: 0 0.5em;
    margin: 1em 10px;
    color: #005F62;
    font-size: 26px !important;
    line-height: 118%;
    font-weight: 700;
}


/* --- Text Transform --- */

.lowercase {
    text-transform: lowercase !important;
}


/* --- Small Text --- */

.asterik-retro {
    font: bold 0.55em/1 sans-serif;
}

.asterik {
    font-size: 12px;
}
/* ==========================================================================
   03 — Layout
   --------------------------------------------------------------------------
   Flexbox helpers, width/spacing utilities, and responsive visibility.
   ========================================================================== */


/* --- Positioning --- */

.section {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .section {
        padding-top: calc(6rem + 6vh);
        padding-bottom: calc(6rem + 6vh);
    }
}

@media (max-width: 1199px) {
    .section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

.section > .container {
    position: relative;
}


/* --- Justify Utilities --- */

.justify-evenly {
    justify-content: space-evenly;
}

.justify-start {
    justify-content: flex-start;
}


/* --- Flexbox Utilities --- */

.flex-c {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.flex-cvert {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.flex-lvert {
    display: flex;
    align-content: left;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.flex-start {
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.flex-align-normal {
    align-items: normal !important;
}

.flex-start-s {
    align-items: flex-start;
}

/* Responsive flex direction breakpoints */
@media screen and (max-width: 1200px) {
    .flex-cvert-1200 {
        flex-direction: column;
    }

    .flex-cvert-1200 .wp-block-column {
        justify-content: center;
        display: flex;
        text-align: left;
    }
}

@media screen and (max-width: 1024px) {
    .flex-cvert-tablet {
        flex-direction: column;
    }
}

@media screen and (max-width: 783px) {
    .flex-col-783 {
        flex-direction: column;
    }
}


/* --- Width Utilities --- */

@media (min-width: 767px) {
    .sm\:w-1\/3 {
        width: 33.3333%;
    }

    .sm\:w-2\/3 {
        width: 66.6666%;
    }

    .sm\:w-1\/2 {
        width: 50%;
    }

    .sm\:w-3\/5 {
        width: 60%;
    }
}

@media (min-width: 768px) {
    .md\:w-3\/4 {
        width: 75%;
    }
}

@media (min-width: 1025px) {
    .lg\:w-1\/4 {
        width: 25%;
    }
}

@media (min-width: 1025px) {
    .lg\:w-1\/6 {
        width: 16.6666%;
    }
}



/* --- Gap Utilities --- */
/* Existing in theme: gap-6 (1.5rem), gap-12 (3rem), gap-16 (4rem), lg:gap-24 (6rem) */

.gap-2  { gap: 0.5rem; }
.gap-4  { gap: 1rem; }
.gap-8  { gap: 2rem; }
.gap-20 { gap: 5rem; }
.gap-24 { gap: 6rem; }

@media (min-width: 1025px) {
    .lg\:gap-8  { gap: 2rem; }
    .lg\:gap-12 { gap: 3rem; }
    .lg\:gap-16 { gap: 4rem; }
    .lg\:gap-20 { gap: 5rem; }
}


.w-60 {
    width: 60%;
}

.w-100 {
    width: 100%;
}

.mx-width83 {
    max-width: 82.3%;
}

@media screen and (max-width: 1024px) {
    .mx-width83 {
        max-width: calc(100% - 3rem);
    }
}

.mw-400px {
    max-width: 400px;
}

.mw-50 {
    max-width: 50%;
}


/* --- Embed / Float --- */

.embed-right {
    float: right;
    margin: 1em 0 1em 1em;
    width: 50%;
}

@media (max-width: 1025px) {
    .embed-right {
        float: none;
        margin: 0;
        width: 100%;
    }
}


/* --- Spacing Utilities --- */

.mb-0 {
    margin-bottom: 0;
}

.mt-0 {
    margin-top: 0;
}

.margin-auto {
    margin: auto;
}

.margin0 {
    margin: 0;
}

.margin-t25px {
    margin-top: 25px;
}

.marginb-only {
    margin-bottom: max(30px, 6vw);
    margin-top: 0;
}

.margint-only {
    margin-top: max(30px, 6vw);
    margin-bottom: 0;
}

/* padding-0 and padding0 are equivalent — use padding-0 going forward */
.padding-0,
.padding0 {
    padding: 0;
}

.padding-1em {
    padding: 2em; /* Note: named 1em but value is 2em — preserved as-is */
}

.padding-2rem {
    padding: 2rem;
}

.padding-3rem {
    padding: 3rem;
}

.padding-4rem {
    padding: 4rem;
}

.padding-horizontal {
    padding-left: 2em;
    padding-right: 2em;
}

.paddingl-15px {
    padding-left: 15px;
}


/* --- Font Weight --- */

.fw600 {
    font-weight: 600;
}


/* --- Visibility Breakpoints --- */

@media only screen and (max-width: 1024px) {
    .hide-ctab-lg-md {
        display: none;
    }
}

@media only screen and (min-width: 1024px) {
    .hide-ctab-sm {
        display: none;
    }
}
/* ==========================================================================
   04 — Components
   --------------------------------------------------------------------------
   Reusable UI components: buttons, cards, lists, badges, media, modals.
   ========================================================================== */


/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Purple CTA button */
.cta-purple {
    padding: 0.5em 1em;
    background: #453cd3;
    border-radius: 0.3rem;
    transition: 0.6s all;
    color: #fff;
    cursor: pointer;
}

.cta-purple:hover {
    background: #5cd9d6;
}

/* Blog inline CTA links */
a.blog-ctab {
    background: #453cd3;
    color: #fff;
    padding: 0.5em;
    border-radius: 0.3rem;
    font-weight: 600;
}

a.blog-ctab-teal {
    background: #5cd9d6;
    color: #fff !important;
}

a.blog-ctab-teal:hover {
    color: #fff;
    background: #453cd3;
}

/* Health page CTA */
.health-ctab {
    color: #fff;
    padding: 0.5em;
    border: 0.3rem solid white !important;
    font-weight: 600;
    margin-top: 7.5%;
    border-radius: 0.8rem;
    transition: 0.3s all;
}

.health-ctab:hover {
    text-decoration: none;
    opacity: 1 !important;
    background: #fff;
    color: #453cd3;
}

/* Animated gradient button (Marcom Summit / event promo) */
.promo-buttons {
    display: flex;
}

.p-button-wrapper {
    position: relative;
}

.p-single-button {
    display: block;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 16px 32px;
    background-color: #000;
    color: #fff;
    border-radius: 50px;
    border: 0;
    cursor: pointer;
}

.button-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    background: linear-gradient(90deg, #57c2b9 0%, #1f4494 30.43%, #00b4e0 68.23%, #d45180 100%);
    background-size: 600% 600%;
    border-radius: 50px;
    animation: AnimateBorder 4s ease infinite;
    -webkit-animation: AnimateBorder 4s ease infinite;
    -moz-animation: AnimateBorder 4s ease infinite;
    z-index: -1;
    transform: translate(-5px, -5px);
    transition: filter 0.4s ease-in;
}

.p-button-wrapper:hover .button-bg {
    filter: blur(10px);
    transition: filter 0.4s ease-in;
}

@media (max-width: 768px) {
    #promo-hero .promo-buttons {
        flex-direction: column;
        gap: 4em;
    }

    .p-button-wrapper:first-child {
        margin-right: 0;
    }
}

/* Co-op buttons */
.co-op-button {
    background: #000;
    color: #fff !important;
    transition: all 0.4s ease-in-out;
    -webkit-appearance: none;
    font-family: 'sofia-pro', sans-serif;
    font-weight: 700;
    text-transform: none;
    margin: 0.5em 0;
    font-size: 0.8em;
    padding: 2rem 3rem;
    text-align: center;
    line-height: 1;
    max-width: 200px;
}

.co-op-button:hover {
    background: #fff;
    color: #000 !important;
    border: solid 2px #000;
}

.co-op-button-pink {
    background: transparent;
    color: #fff !important;
    border: solid 2px #fff;
    transition: all 0.4s ease-in-out;
    -webkit-appearance: none;
    font-family: 'sofia-pro', sans-serif;
    font-weight: 700;
    text-transform: none;
    margin: 0.5em 0;
    font-size: 0.8em;
    padding: 2rem 3rem;
    text-align: center;
    line-height: 1;
    max-width: 200px;
}

.co-op-button-pink:hover {
    color: white !important;
    background: #d45180;
}

/* Talent sidebar button */
.talent-button {
    display: inline-block;
    background-color: #4238c7;
    color: white;
    padding: 10px 16px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.talent-button:hover {
    background-color: #5cd9d6;
}

/* Gravity Form upload-style link button */
.box-link-btn-gform-cs {
    background: #d8d8d8;
    border: 1px solid;
    color: #a0a0a0 !important;
    border-radius: 0.3rem;
    z-index: -1;
    transition: 0.6s all;
    padding: 5.5rem;
    margin: 1em 0;
    text-align: center;
    display: block;
}

.box-link-btn-gform-cs::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("https://dev.4media-group.com/wp-content/uploads/2025/02/Upload-Icon-Gray.svg");
    background-size: contain;
    margin-right: 15px;
    vertical-align: middle;
}


/* ==========================================================================
   PURPLE BACKGROUND CARD
   --------------------------------------------------------------------------
   NOTE: .bg-purple, .bg-purple-4m4h, .bg-purple-4m4pa, .bg-testimonial are
   all the same component. Future TODO: consolidate to one .bg-purple class.
   ========================================================================== */

.bg-purple,
.bg-testimonial {
    background: #453cd3;
    padding: 3em;
    border-radius: 3rem;
}

.bg-purple h4 {
    color: #fff;
    font-size: 4rem;
}

@media screen and (max-width: 1024px) {
    .bg-purple h4 {
        font-size: 3rem;
    }
}

@media screen and (max-width: 500px) {
    .bg-purple h4 {
        font-size: 2rem;
    }
}

.bg-testimonial h4 {
    font-size: 3rem;
    color: #fff;
}

.bg-testimonial p {
    font-size: 2rem;
    color: #fff;
    font-weight: 500;
}


/* ==========================================================================
   LISTS
   ========================================================================== */

/* Checkmark list */
.checkmark-list {
    list-style: none;
    padding-left: 0;
    margin-left: 1em;
}

.checkmark-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
    padding-bottom: 1em;
}

.checkmark-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9%;
    width: 24px;
    height: 24px;
    background-image: url(https://dev.4media-group.com/wp-content/uploads/2024/07/checked.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

/* Partner+ bullet list */
ul.bullet-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.bullet-list li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

svg.bullet-icon {
    margin-right: 0.5rem;
    fill: none;
    stroke: #d25785;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.03px;
    max-width: 50px;
}

/* 4M4H list */
.list-4m4h-container {
    margin-left: 2rem;
    margin-right: 2rem;
}

.list-4m4h li {
    padding: 1.3rem 0;
    font-size: 2.2rem;
    border-bottom: 1px solid #231F21;
}

/* Single column responsive list (used on 4M4H + 4M4PA pages) */
.list-4m4h-columns {
    width: 75%;
}

@media (max-width: 768px) {
    .list-4m4h-columns {
        width: 90%;
    }
}

@media (max-width: 450px) {
    .list-4m4h-columns {
        width: 100%;
    }
}


/* ==========================================================================
   MEDIA / IMAGE COMPONENTS
   ========================================================================== */

.rounded-2x3 img {
    border-radius: 3rem;
    margin-bottom: 10px;
}

.blog-embed-container {
    max-width: 60%;
    text-align: center;
    margin: 0 auto;
}

.health-headshots {
    max-width: 300px;
}

.health-headshots figcaption {
    text-align: center;
}

.health-headshots img {
    border-radius: 3rem;
    box-shadow: 10px 10px 15px 0 #888888;
}

.health-blog-cont {
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    font-size: 1.8rem;
}

.health-blog-cont img {
    border-radius: 3rem;
    margin-bottom: 2rem;
    box-shadow: 10px 10px 15px 0 #888888;
}

@media screen and (max-width: 780px) {
    .health-blog-cont {
        font-size: 2.2rem;
    }
}

/* Vimeo mobile embed */
.vimeo-embed-mob {
    padding: 75% 0 0 0;
    position: relative;
}

@media screen and (max-width: 1500px) {
    .vimeo-embed-mob {
        padding: 100% 0 0 0;
    }
}

@media screen and (max-width: 1200px) {
    .vimeo-embed-mob {
        padding: 125% 0 0 0;
    }
}

@media screen and (max-width: 781px) {
    .vimeo-embed-mob {
        padding: 90% 0 0 0;
    }
}


/* ==========================================================================
   PEOPLE / TEAM
   ========================================================================== */

.health-bios {
    max-width: 400px;
    font-size: 18px;
}

.pa-bios {
    font-size: 16px;
}

.health-jtitles {
    max-width: 400px;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 1.5em;
}

/* Single person page */
.single .details h5 {
    font-size: 2rem;
}

/* Bio preview with fade */
.bio-preview {
    position: relative;
    height: 160px;
    overflow: hidden;
}

p.bio-preview::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
}

.bio-preview p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

@media screen and (max-width: 781px) {
    .bio-preview {
        height: auto;
    }
}


/* ==========================================================================
   CO-OP PAGE COMPONENTS
   ========================================================================== */

.co-op-header-h2 {
    font-size: 3em;
    line-height: 1.45;
    text-shadow: 0 1px 0 #000;
    color: #1f4494;
    font-family: 'proxima-nova', sans-serif !important;
    font-weight: 700;
}

.blue-gradient-bg {
    background-image: linear-gradient(to right, #69c7c8, #08b6de);
    background-repeat: repeat-x;
}

.pink-gradient-bg {
    background-image: linear-gradient(to right, #1f4494, #d45180);
    background-repeat: repeat-x;
}

.co-op-stat-image {
    margin-bottom: 15px;
}

@media (max-width: 781px) {
    .co-op-stat-image {
        max-width: 150px;
    }
}

.co-op-partners-logo {
    max-width: 345px;
}

@media (max-width: 781px) {
    .co-op-partners-logo {
        max-width: 125px;
    }
}

.package-card-container {
    display: flex;
    justify-content: center;
}

.package-card {
    max-width: 55%;
    margin: 0 auto;
}

@media (max-width: 1440px) and (min-width: 1024px) {
    .package-card {
        max-width: 75%;
    }
}

@media (max-width: 1024px) and (min-width: 425px) {
    .package-card {
        max-width: 80%;
    }
}

@media (max-width: 425px) {
    .package-card {
        max-width: 100%;
    }
}

.date-color-background {
    flex-basis: 15%;
    height: 200px;
    font-size: 1.85em;
    font-weight: 900;
    color: #fff;
    text-align: center;
}

@media (max-width: 1024px) and (min-width: 425px) {
    .date-color-background {
        font-size: 1.1em;
    }
}

@media (max-width: 781px) {
    .date-color-background {
        height: 75px;
    }
}

.co-op-full-width-row {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    color: white;
}

.co-op-fullc-date {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
}

/* Co-op gallery grid */
.gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    grid-gap: 1.5rem;
}

.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
    height: 100%;
    width: 100%;
    background-image: url("https://dev.4media-group.com/wp-content/uploads/2024/06/J13190_Hassle_Free_Meals_Co-Op_Screen.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.8rem;
}

.gallery__item--2 {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 5;
    background-color: #57c2b9;
    height: 100%;
    width: 100%;
    border-radius: 0.8rem;
}

.gallery__item--3 {
    grid-column-start: 6;
    grid-column-end: 8;
    grid-row-start: 1;
    grid-row-end: 5;
    height: 100%;
    width: 100%;
    border-radius: 0.8rem;
    background-image: url("https://dev.4media-group.com/wp-content/uploads/2024/06/Smart_Holiday_Shopping_Co-op_November_2022.png");
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery__item--4 {
    grid-column-start: 8;
    grid-column-end: 9;
    grid-row-start: 2;
    grid-row-end: 5;
    background-color: #1f4494;
    height: 100%;
    width: 100%;
    border-radius: 0.8rem;
}

.gallery__item--5 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 8;
    height: 100%;
    width: 100%;
    border-radius: 0.8rem;
    background-image: url("https://dev.4media-group.com/wp-content/uploads/2024/06/J13296_Home_Improvement_with_Chip_Wade_Co-Op_Screen.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery__item--6 {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 5;
    grid-row-end: 9;
    height: 100%;
    width: 100%;
    border-radius: 0.8rem;
    background-image: url("https://dev.4media-group.com/wp-content/uploads/2024/06/single-talent-woman.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery__item--7 {
    grid-column-start: 6;
    grid-column-end: 9;
    grid-row-start: 5;
    grid-row-end: 9;
    background-image: url("https://dev.4media-group.com/wp-content/uploads/2024/06/J11413D_Kia_EV_101_Co-Op_Screen.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    border-radius: 0.8rem;
}


/* ==========================================================================
   PROMO / EVENT COMPONENTS (Marcom Summit)
   ========================================================================== */

.promo-hero {
    background: url(https://dev.4media-group.com/wp-content/uploads/2024/10/marcom-summit-hero-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6em 2em;
}

#promo-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.promo-hero-logo {
    margin-bottom: 3em;
    width: clamp(200px, 32vw, 350px);
}

#promo-hero h1 {
    margin-bottom: 0.5em;
    max-width: 1000px;
    font-family: rift, sans-serif;
    font-weight: bold;
    font-size: clamp(55px, 5vw, 80px);
}

#promo-hero p {
    margin-bottom: 4em;
    font-size: 1.2em;
    max-width: 800px;
}

.promo-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 2em 0;
}

.promo-emphasize {
    font-size: 1.5em;
}

.promo-container a {
    color: #d45180;
    font-weight: bold;
}

.promo-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.promo-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.promo-image {
    flex: 0 0 75px;
    display: none;
}

.promo-image .image {
    width: 100%;
    height: auto;
    min-width: 75px;
    border-radius: 50%;
    object-fit: cover;
}

.promo-row .date {
    font-weight: bold;
    font-size: 1.5em;
    flex: 0 0 120px;
    text-align: center;
    line-height: 1.2em;
}

.promo-row .text {
    max-width: 600px;
    flex-grow: 1;
}

@media screen and (max-width: 781px) {
    .promo-mobile-text {
        font-size: 1.4em;
    }

    .promo-row {
        display: flex;
        align-items: flex-start;
        gap: 0;
        flex-direction: column;
    }

    .promo-row .date {
        flex: 0 0 0;
    }

    .promo-row .text {
        max-width: 100%;
        width: 100%;
        font-size: 1.2em;
    }
}

/* Marcom deal cards */
.marcom-deal-container {
    margin-left: 0;
    padding-left: 0;
}

.marcom-deal {
    background: linear-gradient(130deg, #1f4494, #00b4e0);
    height: 550px;
    border-radius: 0 2em 2em 0;
    padding: 0 49px;
    margin-bottom: 15px;
    width: auto;
}

.marcom-deal h3 {
    color: white;
    text-align: center;
    font-size: clamp(30px, 4vw, 100px);
    margin: 0.25em 0;
}

.marcom-deal p {
    color: white;
    text-align: center;
    font-size: clamp(16px, 3vw, 25px);
    padding: 25px 0 0 0;
    margin: 0;
}

.marcom-deal hr {
    width: 100%;
    height: 8px;
    background: #fff;
    border: none;
    border-radius: 5px;
    padding-top: 10px;
}

@media (max-width: 1024px) and (min-width: 781px) {
    .marcom-deal h3 {
        font-size: clamp(20px, 5vw, 70px);
    }
}

@media screen and (max-width: 780px) {
    .marcom-deal {
        background-color: #1F4494;
        height: 450px;
        border-radius: 0 2em 2em 0;
        padding: 0 49px;
    }

    .marcom-deal h3 {
        font-size: clamp(30px, 10vw, 120px);
    }

    .marcom-deal p {
        font-size: clamp(20px, 2vw, 25px);
    }
}

@media screen and (max-width: 375px) {
    .marcom-deal h3 {
        font-size: clamp(28px, 4vw, 70px);
    }

    .marcom-deal p {
        font-size: clamp(16px, 3vw, 25px);
    }
}

/* Marcom checklist */
.checkmark-list-container-marcom {
    display: flex;
    justify-content: center;
}

.checkmark-list-container-marcom li {
    list-style-type: none;
    font-size: clamp(16px, 4vw, 30px);
}

.list-container-marcom-left {
    padding: 0 18rem 0 0;
}

.list-container-marcom-middle {
    padding: 0 15rem 0 0;
}

@media screen and (max-width: 1440px) {
    .list-container-marcom-left,
    .list-container-marcom-middle {
        padding: 0;
    }
}

@media screen and (max-width: 780px) {
    .checkmark-list-container-marcom li {
        font-size: clamp(14px, 3vw, 30px);
    }

    .checkmark-list-container-marcom {
        flex-direction: column;
    }
}

/* Jake Marcom presenter section */
.jake-marcom-h2 {
    font-size: 1.3em;
    color: #D45180;
    font-style: italic;
}

.jake-marcom-big-text {
    font-size: 1.3em;
    font-weight: 500;
    line-height: 1.2em;
    margin-bottom: 1em;
}

.jake-marcom-more-info {
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.jake-marcom-more-info .arrow-static {
    display: inline-block;
    color: black;
    transition: transform 0.2s ease;
}

.jake-marcom-more-info:hover .arrow-static {
    transform: translateY(4px);
}

/* Countdown timer */
.countdown-container {
    padding: 0.5em;
    background: #00b4e0;
}

.countdown {
    text-align: center;
    color: #fff;
}

.countdown div {
    display: inline-block;
    margin: 0 10px;
}

.countdown div span {
    display: block;
    font-size: 4rem;
    font-weight: bold;
    line-height: 1.2em;
}

.countdown .label {
    font-size: 1.6rem;
}

@media (max-width: 48rem) {
    .countdown div span {
        font-size: 1.5rem;
    }

    .label {
        font-size: 0.875rem;
    }
}

@media (max-width: 30rem) {
    .countdown div {
        margin: 0 0.25rem;
    }

    .countdown div span {
        font-size: 1.25rem;
    }

    .label {
        font-size: 0.75rem;
    }
}

/* Dot pulse animation indicator */
span.dot-effect {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 10px 0;
    background: #5CD8D5;
    border-radius: 100%;
    flex-shrink: 0;
    margin-right: 1em;
    animation: pulse-shadow 3s 2s linear infinite;
}

span.dot-effect:before {
    animation: pulse 3s 1s linear infinite;
}

span.dot-effect:after,
span.dot-effect:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #D55182;
    border-radius: 100%;
    left: 0;
}


/* ==========================================================================
   POPUP CONTENT STYLES
   ========================================================================== */

.popup H1 {
    font-size: 4.5rem;
    margin-bottom: 20px;
}

.popup H2 {
    font-size: 3rem;
}

.popup p {
    font-size: 20px;
}

.popup .small-text {
    font-size: 0.8rem;
}

.popup .pink-text {
    color: #D45180;
}

.popup .white-text {
    color: #fff;
}

.popup .D-blue-background {
    background-color: #1F4494 !important;
}

.popup .center-left-column {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    word-wrap: break-word;
}


/* ==========================================================================
   AWARDS GRID (About Us page)
   ========================================================================== */

.awards-section {
    padding: 50px;
    text-align: center;
}

.award-section-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.award-section-subtitle {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 30px;
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    padding: 2em 1em 1em;
}

.award {
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid #000;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 180px;
}

.award:hover {
    transform: scale(1.05);
}

.award img {
    max-width: 250px;
    width: 70%;
    height: auto;
    margin-bottom: 10px;
}

.award h3 {
    font-size: 1.8rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.award:hover h3 {
    transform: translateY(-15px);
}

.award p {
    position: relative;
    font-size: 1.5rem;
    bottom: 20px;
    transform: scale(0.5);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: #333;
    font-weight: bold;
}

.award:hover p {
    opacity: 1;
    transform: scale(1);
}

.award.no-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}


/* ==========================================================================
   AMP PRODUCT PAGE COMPONENTS
   ========================================================================== */

.amp-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
    background-size: 400% 400%;
    animation: gradientAnimation 10s ease infinite;
    color: white;
    text-align: center;
    overflow: hidden;
}

.amp-hero-title {
    font-size: 3rem;
    margin: 0;
    padding: 0 1rem;
    line-height: 1.2;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .amp-hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .amp-hero-title {
        font-size: 1.8rem;
    }
}

.jump-to-form-cta {
    text-align: center;
    margin: 2rem 0;
}

.jump-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #0073e6;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.jump-button:hover {
    background-color: #005bb5;
}

.amp-price-info {
    padding: 3rem 1rem;
    text-align: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 3rem 0;
    background: linear-gradient(45deg, #1F4494, #00B4E0);
    color: #fff;
}

.amp-price-info h2 {
    font-size: 3.8rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.amp-price {
    font-size: 5.5rem;
    font-weight: 800;
}

.amp-price.animate-bounce {
    animation: bounce-glow 0.6s ease;
}

.process-overview {
    padding: 3rem 1rem;
    text-align: center;
}

.process-overview h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.process-overview h3 {
    margin-top: 0 !important;
}

.process-list {
    counter-reset: step;
    margin: 0 auto;
    padding: 0;
}

.process-overview .process-list li {
    counter-increment: step;
    list-style: none;
    background-color: #fff;
    border: 1px solid #000;
    padding: 2rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    text-align: left;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.process-list li::before {
    content: counter(step);
    position: absolute;
    top: 50%;
    left: -4em;
    transform: translateY(-50%);
    width: 2.5em;
    height: 2.5em;
    border: 1px solid #000;
    color: #000;
    background-color: #fff;
    border-radius: 50%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    padding: 0;
    line-height: 1;
}

.process-list h3 {
    margin-left: 3rem;
    margin-top: 0;
}

.process-list h4 {
    margin-top: 0;
    margin-bottom: 0.5em !important;
}

.process-overview .process-list p {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .process-list li::before {
        display: none;
    }
}

/* AMP talent sidebar */
.amp-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 33.33%;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    transform: translateX(100%);
    opacity: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.amp-sidebar.amp-open {
    transform: translateX(0);
    opacity: 1;
}

@media (max-width: 1024px) {
    .amp-sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .amp-sidebar {
        width: 100%;
    }
}

.amp-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 1em;
}

.amp-sidebar-header h2 {
    font-size: 2em;
    margin: 1em 0;
    color: #1f4494;
}

#close-sidebar {
    font-size: 1em;
    border: none;
    cursor: pointer;
    background: #ebebeb;
    padding: 0 0.5em 0.2em;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

#close-sidebar:hover {
    background-color: #d6d6d6;
}

@media (max-width: 991px) {
    #close-sidebar {
        font-size: 2em;
    }

    .amp-sidebar {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

.amp-talent-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    padding-bottom: 15px;
    width: 100%;
    transition: transform 0.4s ease-in-out;
}

.amp-sidebar.viewing-details .amp-talent-list {
    display: none;
}

.amp-talent-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
    border: 1px solid #ddd;
}

.amp-talent-item:hover {
    background: #f5f5f5;
}

.amp-talent-item img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    object-position: center;
    background-color: #f0f0f0;
}

@media (max-width: 768px) {
    .amp-talent-item {
        padding: 16px;
        font-size: 18px;
    }

    .amp-talent-item img {
        width: 70px;
        height: 70px;
    }
}

.amp-talent-detail {
    position: absolute;
    width: 100%;
    background: white;
    padding: 20px;
    top: 0;
    left: 0;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    overflow-y: auto;
    display: none;
}

.amp-sidebar.viewing-details .amp-talent-detail {
    display: block;
    transform: translateX(0);
}

.amp-talent-detail.hidden { display: none; }

#back-to-list {
    margin-bottom: 10px;
    border: none;
    color: #fff;
    cursor: pointer;
    background: #00b4e0;
    padding: 0.1em 0.5em 0.2em;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

#back-to-list:hover {
    background: #039cc1;
}

#talent-detail {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    box-sizing: border-box;
}

#talent-sidebar::-webkit-scrollbar {
    width: 8px;
}

#talent-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

#talent-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

h2#talent-name {
    font-size: 2em;
}

.talent-title {
    font-size: 1em;
    color: #555;
    margin-top: 5px;
    font-weight: 400;
    font-style: italic;
}

.talent-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Talent bio sidebar content */
#talent-bio h4 {
    margin: 0.8em 0;
}

#talent-bio p + p {
    margin-top: 0.5em;
}

#talent-bio ul > li {
    list-style: disc;
}

#talent-bio ul {
    padding-left: 2em;
}

.amp-no-scroll {
    overflow: hidden;
    height: 100vh;
}

body.amp-sidebar-open {
    width: 100%;
    height: 100%;
    overflow: visible;
    touch-action: none;
}

/* Image zoom overlay (lightbox) */
.image-zoom-overlay {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.image-zoom-overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}

.image-zoom-overlay.show {
    display: flex;
}

.image-lightbox.hidden { display: none; }

button#open-talent-sidebar {
    bottom: 20px;
    right: 20px;
    background: #00b4e0;
    color: white;
    font-family: 'sofia-pro';
    font-weight: 700;
    text-transform: capitalize;
    font-size: 2rem !important;
    border-radius: 4em;
    padding: 0.2em 1em 0.5em !important;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 10px;
    min-width: 175px;
    width: 100%;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    z-index: 999;
}

#open-talent-sidebar .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    position: relative;
    transition: transform 0.3s ease;
}

#open-talent-sidebar .icon-hamburger {
    transition: transform 0.3s ease;
}

button#open-talent-sidebar:hover .icon-hamburger {
    transform: translateX(-4px);
}
/* ==========================================================================
   05 — Blocks
   --------------------------------------------------------------------------
   Gutenberg core block overrides, custom ACF block styles, and
   WordPress template section styles (hero, title bar, landing pages).
   ========================================================================== */


/* --- Header / Title Bar --- */

@media (min-width: 1025px) {
    .title-bar .title {
        white-space: nowrap;
    }

    .title {
        white-space: initial;
    }
}

@media screen and (max-width: 991px) {
    .title-bar-background {
        padding: 9rem 2rem 4rem;
    }
}


/* --- Home Page --- */

.post-links article .icon span svg {
    height: 1.1em;
}


/* --- Content Image Left (custom block with scroll animation) --- */

@media (max-width: 991px) {
    .content-image-left figure.image {
        margin-bottom: 2em;
    }
}

.content-image-left .image {
    border-radius: 0 3rem 3rem 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    transition: 2s all;
}

.content-image-left .image img {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    transition: 2s all;
}

.content-image-left .image.is-inview {
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
}


/* --- Full Width Background Block --- */

.fwb {
    background-image: url(https://dev.4media-group.com/wp-content/uploads/2024/04/4M4h-page-section-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100% !important;
    padding: 4rem 0;
}

.fwb p {
    color: white;
    text-align: center;
    font-size: 16px;
    padding: 0 0 0.3rem;
    max-width: 1200px;
}


/* --- Landing Page Title Bar Block --- */

.lp-title-bar .title {
    z-index: 1;
}

.lp-title-bar h1 {
    font-size: 8rem;
    font-weight: 800;
}

.title .lp-subtitle {
    z-index: 1;
    font-family: rift, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1;
    font-size: 4rem;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgb(255, 255, 255);
}


/* --- Tagline Title Block --- */

.tagline-title h3 {
    line-height: 1em;
    font-size: clamp(40px, 4vw, 64px);
    text-align: center;
    color: #000000;
}


/* --- Expertise Subhead (4M4H page) --- */

.expertise-subhead {
    max-width: 50%;
    font-size: clamp(16px, 2vw, 20px);
}

@media (max-width: 1000px) {
    .expertise-subhead {
        max-width: 90%;
    }
}


/* --- Border Radius Utility (block images) --- */

.rounding-4m {
    border-radius: 3rem 0 0 3rem;
}


/* --- Accordion --- */

.accordion li .content {
    color: #242424;
}


/* --- Instagram Embed Block (blog post) --- */

.instagram-wrapper {
    display: flex;
    justify-content: center;
    padding: 2em 0;
}

.instagram-wrapper blockquote.instagram-media {
    display: inline-block !important;
    margin: 0 auto !important;
    max-width: 540px !important;
    width: 100% !important;
}


/* --- Flexible Two-Column Layout Block --- */

.flex-container {
    display: flex;
}

.flex-column {
    width: 50%;
    padding: 2em;
}

@media (max-width: 1350px) {
    .flex-container {
        flex-direction: column;
    }

    .flex-column {
        width: 100%;
        padding: 1em;
    }
}


/* ==========================================================================
   DEV BLOCKS — SMT PPC Page
   --------------------------------------------------------------------------
   Styles for blocks in templates/blocks/dev/
   ========================================================================== */


/* --- Shared PPC Button --- */

.btn-ppc {
    display: inline-flex;
    align-items: center;
    background: var(--color-teal);
    color: #000;
    padding: 2rem 5rem;
    margin-top: 2rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 2rem;
    text-decoration: none;
    transition: var(--transition-fast);
    cursor: pointer;
}

.btn-ppc:hover {
    background: var(--color-primary);
    color: #fff;
}


/* --- Split Hero --- */

.split-hero {
    background-color: #0B1D2E;
    color: #fff;
    position: relative;
    overflow: hidden;
    /* s-padding handles bottom; top extended to clear fixed nav */
    padding-top: calc(max(30px, 6vw) + 9rem);
}

/* Diagonal gradient overlay — colour-only mode (no bg image) */
.split-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 29, 46, 0.97) 50%, rgba(11, 29, 46, 0.65));
    z-index: 0;
}

/* Background image + overlay */
.split-hero--has-image::before {
    display: none;
}

.split-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.split-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.split-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11,29,46,0.82) 0%, rgba(11,29,46,0.55) 45%, rgba(11,29,46,0.85) 70%, rgba(11,29,46,0.95) 100%),
        linear-gradient(180deg, rgba(11,29,46,0.2) 0%, rgba(11,29,46,0.5) 100%);
}

/* Stats row */
.split-hero__stats {
    padding-top: 2.4rem;
    margin-top: 0.4rem;
    margin-bottom: 2.4rem;
    border-top: 1px solid rgba(92, 217, 214, 0.2);
}

.split-hero__stats-inner {
    width: 100%;
}

.split-hero__stats-label {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-teal);
    margin-bottom: 1.4rem;
}

.split-hero__stats-row {
    display: flex;
    gap: 3.2rem;
}

.split-hero__stat {
    display: flex;
    flex-direction: column;
}

.split-hero__stat-value {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 3vw, 3.8rem);
    font-weight: 700;
    color: var(--color-teal);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.split-hero__stat-label {
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 767px) {
    .split-hero__stats-row {
        flex-direction: column;
        gap: 2rem;
    }

    .split-hero__stat-value {
        font-size: 4rem;
    }

    .split-hero__stat-label {
        font-size: 1.6rem;
    }
}

@media (min-width: 1025px) {
    .split-hero {
        padding-top: calc(max(30px, 6vw) + 6rem);
    }
}

.split-hero .container {
    padding-left: max(2rem, 5vw);
    padding-right: max(2rem, 5vw);
}

.split-hero .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    position: relative;
    z-index: 1;
    align-items: center;
}

/* Eyebrow — color/weight override for dark hero bg */
.split-hero .eyebrow {
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Headline */
.split-hero__headline {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 7rem);
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 1.5rem;
    max-width: 680px;
}

/* Subheadline */
.split-hero__subheadline {
    font-size: 1.8rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    max-width: 560px;
}

/* Checklist — teal checkmark bullets via CSS */
.split-hero__checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.split-hero__checklist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.split-hero__checklist-item::before {
    content: '';
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    background-color: var(--color-teal);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 8l4 4 8-8'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 8l4 4 8-8'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

/* Card — glass style (colour bg) */
.split-hero__card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    padding: 2.5rem;
    color: #fff;
}

/* Card — darker when hero has a background image */
.split-hero--has-image .split-hero__card {
    background: rgba(11, 29, 46, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.split-hero__card-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.split-hero__card-sub {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2rem;
}

.split-hero__no-form {
    color: rgba(255, 255, 255, 0.45);
    font-size: 1.2rem;
}

/* Gravity Form inputs inside the glass card */
.split-hero__card .gform_wrapper input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.split-hero__card .gform_wrapper textarea,
.split-hero__card .gform_wrapper select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-family: var(--font-body) !important;
}

.split-hero__card .gform_wrapper input::placeholder,
.split-hero__card .gform_wrapper textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.split-hero__card .gform_wrapper .gfield_label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.split-hero__card .gform_wrapper .gform_submit_button,
.split-hero__card .gform_wrapper input[type="submit"] {
    background: var(--color-teal) !important;
    color: #0B1D2E !important;
    border: none !important;
    font-weight: 700 !important;
    width: 100% !important;
    border-radius: var(--radius-sm) !important;
}

.split-hero__card .gform_wrapper .gform_submit_button:hover,
.split-hero__card .gform_wrapper input[type="submit"]:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    .split-hero .row {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}


/* --- Trust Bar --- */

.trust-bar {
    background: #f9f9f9;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 3rem 0;
}

.trust-bar__eyebrow {
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
}

.trust-bar__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 3rem;
}

.trust-bar__logo-item img {
    max-height: 40px;
    width: auto;
    filter: grayscale(1) opacity(0.55);
    transition: var(--transition-fast);
}

.trust-bar__logo-item img:hover {
    filter: grayscale(0) opacity(1);
}


/* --- Features Grid --- */

.features-grid {
    background: #0d1b35;
    padding: 8rem 0;
}

.features-grid .eyebrow {
    color: var(--color-teal);
}

.features-grid__title {
    color: var(--color-white);
    font-family: var(--font-display);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.features-grid__subtitle {
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.features-grid__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 4rem 0 2rem;
}

.features-grid__item {
    position: relative;
    overflow: hidden;
    flex: 0 0 calc(33.333% - 1.4rem);
    padding: 3rem;
    background: #162140;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    transition: border-color 0.6s ease, box-shadow 0.6s ease, opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: translateY(24px);
}

.features-grid__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.features-grid__item.is-active {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 1px var(--color-teal), 0 8px 32px rgba(92, 217, 214, 0.15);
}

.features-grid__item.is-active .features-grid__ghost-num {
    color: rgba(92, 217, 214, 0.12);
}


.features-grid__ghost-num {
    position: absolute;
    top: -1rem;
    right: 1.5rem;
    font-family: var(--font-display);
    font-size: 13rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
    transition: color 0.6s ease;
    pointer-events: none;
    user-select: none;
}

.features-grid__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.features-grid__icon svg,
.features-grid__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    fill: var(--color-teal);
}

.features-grid__item-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.features-grid__item-desc {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0;
}

.features-grid__cta {
    margin-top: 3rem;
}

@media (max-width: 991px) {
    .features-grid__item {
        flex: 0 0 calc(50% - 1rem);
    }
}

@media (max-width: 640px) {
    .features-grid__item {
        flex: 0 0 100%;
    }
}


/* --- Numbered Steps --- */

.numbered-steps {
    background: var(--color-gray-light);
}

.numbered-steps__header {
    text-align: center;
    margin-bottom: 4rem;
}

.numbered-steps__title {
    margin: 0 0 1rem;
}

.numbered-steps__sub {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 66.67%;
}

.numbered-steps__list {
    max-width: 96rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.numbered-steps__card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
    padding: 3.6rem 4rem 3.6rem 6rem;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.numbered-steps__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.numbered-steps__circle {
    position: absolute;
    left: -2.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background: var(--color-gray-light);
    border: 2px solid #1f2e45;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.numbered-steps__circle span {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: #1f2e45;
    line-height: 1;
}

.numbered-steps__body {
    flex: 1;
}

.numbered-steps__step-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-black);
    margin: 0 0 0.6rem;
    line-height: 1.2;
}

.numbered-steps__step-desc {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.numbered-steps__cta {
    margin-top: 4rem;
}

@media (max-width: 640px) {
    .numbered-steps__card {
        padding-left: 4rem;
    }

    .numbered-steps__circle {
        left: -2rem;
        width: 4rem;
        height: 4rem;
    }

    .numbered-steps__circle span {
        font-size: 1.8rem;
    }
}


/* --- Process Steps --- */

.process-steps__track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 4rem;
    position: relative;
}

.process-steps__track::before {
    content: '';
    position: absolute;
    top: 2.4rem;
    left: calc(16.5% + 2.4rem);
    right: calc(16.5% + 2.4rem);
    height: 2px;
    background: linear-gradient(to right, var(--color-teal), var(--color-primary));
}

.process-steps__step {
    flex: 1;
    text-align: center;
    padding: 0 1.5rem;
    position: relative;
}

.process-steps__number {
    width: 4.8rem;
    height: 4.8rem;
    background: #0a1c3a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
}

.process-steps__step-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.process-steps__step-desc {
    font-size: 1.3rem;
    color: #666;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .process-steps__track {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .process-steps__track::before {
        display: none;
    }

    .process-steps__step {
        width: 100%;
    }
}


/* --- Use Cases --- */

.use-cases {
    background: var(--color-gray-light);
    overflow: hidden;
}

.use-cases__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: stretch;
}

/* Image column — slides in from left, extends off page like content-image-left */
.use-cases__image-col {
    min-height: 40rem;
    overflow: hidden;
    border-radius: 0 3rem 3rem 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    transition: 2s all;
}

.use-cases__image-col.is-inview {
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
}

.use-cases__image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    transition: 2s all;
}

.use-cases__image-col.is-inview img {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.use-cases__content-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.use-cases__content-col--full {
    grid-column: 1 / -1;
}

.use-cases__intro {
    margin-bottom: 3rem;
}

.use-cases__heading {
    line-height: 1.1;
    margin: 0;
}

/* List */
.use-cases__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
}

.use-cases__list--cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
}

.use-cases__list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2.2rem;
    color: #333;
    line-height: 1.4;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-gray-border);
}

.use-cases__list-item:first-child {
    border-top: 1px solid var(--color-gray-border);
}

.use-cases__list--cols-2 .use-cases__list-item:nth-child(2) {
    border-top: 1px solid var(--color-gray-border);
}

.use-cases__list-item::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--color-teal);
    border-radius: 50%;
    flex-shrink: 0;
}

.use-cases__industries {
    font-size: 1.6rem;
    color: #555;
    font-style: italic;
    margin: 0;
}

@media (max-width: 767px) {
    .use-cases__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .use-cases__image-col {
        min-height: 28rem;
    }
}


/* --- Case Studies --- */

.case-studies__title-wrap {
    margin-bottom: 3rem;
}

.case-studies__title {
    margin: 0;
    font-family: var(--font-display);
    text-transform: uppercase;
}

.case-studies__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.case-studies__card {
    background: #0d1b35;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.case-studies__card-image {
    height: 220px;
    background-color: #162140;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.case-studies__card-content {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.case-studies__tag {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-teal);
    margin-bottom: 1rem;
}

.case-studies__company {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    line-height: 1.15;
    margin-bottom: 1.2rem;
}

.case-studies__desc {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.case-studies__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 2.5rem 0;
}

.case-studies__stats {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.case-studies__stat {
    display: flex;
    flex-direction: column;
}

.case-studies__stat-value {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-teal);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.case-studies__stat-label {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
}

.case-studies__cta {
    margin-top: 2rem;
}

@media (max-width: 991px) {
    .case-studies__grid {
        grid-template-columns: 1fr;
    }
}


/* --- Content Image List --- */

.content-image-list {
    background: var(--color-gray-light);
}

.content-image-list__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: stretch;
}

.content-image-list__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-image-list__heading {
    line-height: 1.1;
    margin: 0 0 1.5rem;
}

.content-image-list__sub {
    font-size: 2.2rem;
    font-weight: 600;
    color: #555;
    line-height: 1.6;
    margin: 0 0 2.5rem;
}

/* Checklist */
.content-image-list__list {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.content-image-list__item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 2.2rem;
    color: #333;
    line-height: 1.4;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--color-gray-border);
}

.content-image-list__item:first-child {
    border-top: 1px solid var(--color-gray-border);
}

.content-image-list__cta {
    margin-top: 3rem;
}

.content-image-list__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--color-teal);
    color: #0B1D2E;
}

.content-image-list__check svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* Image column — outer col animates, inner wrapper clips + rounds */
.content-image-list__image-col {
    min-height: 40rem;
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
    transition: 2s all;
}

.content-image-list__image-col.is-inview {
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0);
}

.content-image-list__image-inner {
    overflow: hidden;
    border-radius: 3rem 0 0 3rem;
    width: 100%;
    height: 100%;
    min-height: 40rem;
}

.content-image-list__image-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    -webkit-transform: translate3d(-110%, 0, 0);
    transform: translate3d(-110%, 0, 0);
    transition: 2s all;
}

.content-image-list__image-col.is-inview .content-image-list__image-inner img {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@media (max-width: 767px) {
    .content-image-list__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .content-image-list__image-col {
        min-height: 28rem;
        order: -1;
    }
}


/* --- FAQ Accordion --- */

.faq-accordion__layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5rem;
    align-items: start;
}


.faq-accordion__rule {
    width: 36px;
    height: 2px;
    background: var(--color-teal);
    margin-bottom: 1.5rem;
}

.faq-accordion__heading {
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.faq-accordion__body {
    font-size: 1.8rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

.faq-accordion__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .faq-accordion__layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}


/* ==========================================================================
   Dev Blocks — Mobile minimum font size (16px / 1.6rem)
   Body copy and titles in dev blocks should never go below 16px.
   Decorative labels (stat-label, tag, eyebrow) intentionally excluded.
   ========================================================================== */

@media (max-width: 767px) {
    .split-hero__subheadline,
    .split-hero__checklist-item,
    .split-hero__card-sub,
    .split-hero__no-form,
    .split-hero__stat-value,
    .use-cases__list-item,
    .use-cases__industries,
    .case-studies__desc,
    .content-image-list__sub,
    .content-image-list__item,
    .numbered-steps__step-desc,
    .numbered-steps__step-title,
    .process-steps__step-title,
    .process-steps__step-desc,
    .faq-accordion__body {
        font-size: 1.6rem;
    }
}
/* ==========================================================================
   06 — Forms
   --------------------------------------------------------------------------
   Gravity Forms overrides, custom contact form, internal form inputs,
   and all form-related styles across the site.
   ========================================================================== */


/* ==========================================================================
   GLOBAL FORM INPUTS
   ========================================================================== */

form input:not([type=submit]),
form textarea,
form select {
    border: 1px solid #000;
    border-radius: 3px;
}

form select {
    font-size: 1.6rem;
    border-bottom: 1px solid #000;
    transition: 0.3s all;
}

form input[type=submit] {
    font-family: 'sofia-pro';
    font-weight: 700;
    text-transform: capitalize;
    padding: 1rem 2rem 1.5rem 2rem !important;
    font-size: 3rem !important;
}


/* ==========================================================================
   CONTACT FORM (custom #contact-form)
   ========================================================================== */

.sf-form-group {
    width: 100%;
}

.col-form-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

form#contact-form {
    display: flex;
    flex-direction: column;
}

.col-form-field .form-input-container {
    flex: 1;
    margin-right: 10px;
    text-align: right;
}

.form-input-container:last-child {
    margin: 0;
}

.sf-form-group input,
.sf-form-group textarea,
.sf-form-group select {
    width: 100%;
    margin-bottom: 20px;
    padding: 1rem !important;
}

.form-input-container input[type=text] {
    width: 100%;
}

.sf-form-group .hidden_sub_label {
    clip: rect(1px, 1px, 1px, 1px);
    word-wrap: normal !important;
    border: 0;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.form-input-container input.toggle-field {
    margin-left: 2em;
    width: 94%;
}


/* ==========================================================================
   GRAVITY FORMS — GLOBAL OVERRIDES
   ========================================================================== */

/* Submit button */
.gform_wrapper.gravity-theme .gform_footer input {
    background: #453cd3;
    font-size: 1.8em;
    border-radius: 0.3rem;
    padding: 0.1rem 2rem;
    color: #fff;
    -webkit-background-clip: initial;
    -webkit-text-stroke: 0;
    transition: 0.6s all;
}

.gform_wrapper.gravity-theme .gform_footer:hover input.gform_button {
    background: #5cd9d6;
}

/* Image choice label fix */
.gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice label {
    display: inline-block !important;
}

/* Description spacing fix */
.gform_wrapper.gravity-theme .gform-desc-fix .gfield_description {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Gravity Forms image choice checked state */
.gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice:where(:has(input:checked))::after {
    background-color: #57c2b9 !important;
}

/* Validation container hidden (form 13) */
div#gform_13_validation_container,
div#validation_message_13_1,
div#validation_message_13_2 {
    display: none;
}


/* ==========================================================================
   GRAVITY FORM #31 — Creative Video Form
   ========================================================================== */

#gform_31 h3.gsection_title {
    margin-bottom: 0 !important;
    color: #d45280;
    font-size: 4rem;
}

#gform_31 .gsection_description {
    padding: 0;
    margin: 0;
}

#gform_fields_31 .gfield_description {
    padding: 0;
    margin: 0;
}


/* ==========================================================================
   GRAVITY FORM #33 — AMP Product Order Form
   ========================================================================== */

#gform_33 {
    scroll-margin-top: 100px;
}

#gfield_description_33_40 {
    display: none;
}

#field_33_40 .gfield_checkbox {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    max-width: 100%;
    margin: auto;
}

/* Image choice layout for form 33 */
#gform_wrapper_33.gravity-theme .ginput_container_image_choice .gfield-choice-image-wrapper {
    background: #f3f3f3;
}

#gform_wrapper_33.gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice {
    position: relative !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 110px !important;
    inline-size: initial;
    max-inline-size: initial;
    min-inline-size: initial;
}

#gform_wrapper_33.gform_wrapper.gravity-theme .ginput_container_image_choice .gfield-choice-image {
    border-radius: 0.3rem;
}

#gform_33 .gform_wrapper.gravity-theme .ginput_container_image_choice .gfield-choice-image {
    width: 100% !important;
    max-width: 150px !important;
    height: auto !important;
}

@media (max-width: 991px) {
    #gform_wrapper_33.gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice {
        width: 48% !important;
    }
}

@media (max-width: 768px) {
    #gform_wrapper_33.gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice {
        width: 100% !important;
    }

    #gform_wrapper_33.gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice label {
        font-size: 1em;
    }
}

/* Multi-choice checkbox styling (AMP market select) */
.amp-multi-choice .gchoice {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    display: flex !important;
    align-items: center;
    transition: all 0.2s ease-in-out;
    position: relative;
    cursor: pointer;
}

.amp-multi-choice .gchoice:hover {
    background: #e8e8e8;
    cursor: pointer;
}

.amp-multi-choice .gchoice:has(input[type="checkbox"]:checked) {
    background: #57c2b9;
}

.amp-multi-choice .gchoice input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    flex-shrink: 0;
}

.amp-multi-choice .gchoice label {
    font-weight: 600;
    padding: 0 10px;
    cursor: pointer;
    display: block !important;
}

/* Hide filtered-out talent choices via JS */
.talent-image-select .gchoice.talent-hidden {
    display: none !important;
}


/* ==========================================================================
   GRAVITY FORM #43 — AMP Survey
   ========================================================================== */

#gform_43 th.gsurvey-likert-choice-label {
    font-size: 0.7em;
}

#gform_43 legend.gfield_label.gform-field-label,
#gform_43 label.gfield_label.gform-field-label {
    font-size: 0.9em;
}


/* ==========================================================================
   PARTNER+ CLIENT INTAKE FORM
   ========================================================================== */

h3.pp-plus-form-header {
    color: #d45080;
    margin-bottom: 0 !important;
    font-family: 'sofia-pro';
    text-transform: none;
}

h3.pp-plus-form-header:after {
    width: 100%;
    content: "";
    height: 1px;
    display: block;
    background-color: #000;
    margin-top: 0.5em;
}

button#gform_browse_button_38_96 {
    background: #bcbcbc;
    padding: 0.5em 1em;
    border-radius: 3px;
    color: #000;
    transition: all ease 0.2s;
}

button#gform_browse_button_38_96:hover {
    background: #453cd3;
    color: #fff;
}
/* ==========================================================================
   07 — Third-Party Plugins
   --------------------------------------------------------------------------
   Style overrides for: Popup Maker, Swiper, Job List.
   Keep plugin overrides isolated here so they're easy to find and update.
   ========================================================================== */


/* ==========================================================================
   POPUP MAKER
   ========================================================================== */

/* --- Webinar Popup (theme 7942 / content-only) --- */

.pum-theme-7942 .pum-container,
.pum-theme-content-only .pum-container {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.pum-theme-7942 .pum-content + .pum-close,
.pum-theme-content-only .pum-content + .pum-close {
    color: #247664;
    font-size: 1.5em;
    font-weight: 400;
    background: #47e5c2;
    border-radius: 0;
    padding-bottom: 0.4em;
    display: inline-block;
    line-height: 0;
    width: 20px;
    height: 25px;
}

.pum-theme-7942 .pum-content + .pum-close:hover,
.pum-theme-content-only .pum-content + .pum-close:hover {
    background: #247664;
    color: #091f1a;
}

.pum-content.popmake-content > p > a:hover {
    opacity: 1;
}

.pum-content.popmake-content a:hover img {
    animation: pulse 0.6s infinite;
}

/* --- Promo Popup (default theme 7935) --- */

.pum-theme-7935 .pum-content + .pum-close,
.pum-theme-default-theme .pum-content + .pum-close {
    background: none;
    box-shadow: none;
    color: #000;
    font-size: 1.5em;
    padding: 0.3em;
    line-height: 0;
}

.pum-theme-7935 .pum-content + .pum-close:hover {
    color: #453bd3;
}

/* --- Popup popmake-7997 (Promo bar) --- */

div#popmake-7997 {
    background: #f4f4f4;
    padding: 2em;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 2px solid #5f5f5f;
    border-left: none;
}

div#popmake-7997 .pum-content {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: bold;
}

div#popmake-7997 .pum-content p {
    margin-top: 0;
    font-size: 1.2em;
}

div#popmake-7997 .pum-content p:first-child {
    display: flex;
    align-items: center;
    margin-right: 2em;
}

div#popmake-7997 .pum-content .pp-promo-ctab {
    background: #453cd3;
    color: #fff;
    padding: 0.5em;
    border-radius: 0.3rem;
    font-weight: 600;
    text-wrap: nowrap;
}

@media screen and (max-width: 781px) {
    div#popmake-7997 .pum-content {
        flex-direction: column;
    }

    div#popmake-7997 .pum-content p:first-child {
        margin: 0 0 2em 0;
    }
}

/* --- Bio popups (4M4PA team, IDs 8699/8720/8722/8724) --- */

div#popmake-8699,
div#popmake-8724,
div#popmake-8720,
div#popmake-8722 {
    padding: 5rem;
}

.popmake-content p:nth-of-type(2) {
    font-size: clamp(10px, 3vw, 16px);
}


/* ==========================================================================
   SWIPER (AMP product pages)
   ========================================================================== */

.page-id-9923 .swiper-container,
.page-id-11144 .swiper-container {
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
}

.page-id-9923 .swiper-wrapper,
.page-id-11144 .swiper-wrapper {
    display: flex;
    align-items: center;
}

.page-id-9923 .swiper-slide,
.page-id-11144 .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
}

.page-id-9923 .swiper-slide img,
.page-id-11144 .swiper-slide img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.page-id-9923 .swiper-zoom-container img,
.page-id-11144 .swiper-zoom-container img {
    transition: transform 0.3s ease-in-out;
}

.page-id-9923 .swiper-button-next,
.page-id-9923 .swiper-button-prev,
.page-id-11144 .swiper-button-next,
.page-id-11144 .swiper-button-prev {
    color: #6bc7c8;
}

.page-id-9923 .swiper-pagination,
.page-id-11144 .swiper-pagination {
    position: absolute;
    bottom: 10px;
}

@media (max-width: 768px) {
    .page-id-9923 .swiper-container,
    .page-id-11144 .swiper-container {
        max-width: 100%;
    }

    .page-id-9923 .swiper-slide img,
    .page-id-11144 .swiper-slide img {
        max-height: 250px;
    }
}


/* ==========================================================================
   JOB LIST
   ========================================================================== */

.job-single a {
    color: #d45180;
    font-weight: 700;
}

@media (min-width: 768px) {
    .job-single h3 {
        font-size: 3.5rem;
    }
}
/* ==========================================================================
   08 — Page-Specific Styles
   --------------------------------------------------------------------------
   Scoped overrides for individual pages/posts. Use .page-id-XXXX or
   .postid-XXXX selectors to prevent unintended global side effects.

   Add new page sections following the pattern below:
     /* --- Page Name (page-id-XXXX) --- * /
   ========================================================================== */


/* ==========================================================================
   BLOG — General Blog Post Styles
   ========================================================================== */

.post-content .content p > a:not(.btn),
.post-content .content ul li > a:not(.btn),
.post-content .content ol li > a:not(.btn) {
    color: #d45180;
    font-weight: 700;
}

.post-content .content p {
    margin-bottom: 1em;
}


/* ==========================================================================
   HOME PAGE (page-id-6771) — Blog block gap override
   ========================================================================== */

.page-id-6771 .is-layout-flex.wp-container-10.wp-block-columns {
    gap: 30px;
}


/* ==========================================================================
   SMT/PSA/RMT LANDING PAGES (page-id-4524, 4968, 4962)
   ========================================================================== */

.page-id-4524 h1,
.page-id-4968 h1,
.page-id-4962 h1 {
    padding-bottom: 100px !important;
    padding-top: 60px !important;
}

.page-id-4524 ul,
.page-id-4968 ul,
.page-id-4962 ul {
    list-style: none;
}


/* ==========================================================================
   SPECIFIC POST — postid-2299
   ========================================================================== */

.postid-2299 .title-bar-image .lg\:w-7\/12 {
    width: 80%;
}


/* ==========================================================================
   SPECIFIC POST — postid-5104
   ========================================================================== */

.postid-5104 .pullq {
    align-items: center;
    display: flex;
    padding: 0;
}

.postid-5104 .is-layout-flow.wp-block-column.content p {
    margin: 0;
}


/* ==========================================================================
   SPECIFIC POST — postid-7553
   ========================================================================== */

.postid-7553 h2 {
    font-size: 4rem;
}


/* ==========================================================================
   CO-OP PAGE (page-id-7335)
   ========================================================================== */

.page-id-7335 section[data-scroll-section-id="section10"] {
    background-image: url(https://dev.4media-group.com/wp-content/uploads/2024/06/co-op-packages_bg.png);
    padding: 20px;
}


/* ==========================================================================
   PPC LANDING PAGE (page-id-8149)
   ========================================================================== */

.page-id-8149 section.lp-title-bar {
    height: 800px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.page-id-8149 .lp-title-bar h1 {
    font-size: clamp(55px, 5vw, 80px);
}

.page-id-8149 .lp-subtitle span {
    font-size: clamp(38px, 4vw, 56px);
}

@media only screen and (max-width: 768px) {
    .page-id-8149 section.lp-title-bar {
        height: 600px;
    }
}


/* ==========================================================================
   PPC LANDING PAGE (page-id-9178)
   ========================================================================== */

.page-id-9178 section.lp-title-bar {
    height: 800px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.page-id-9178 .lp-title-bar h1 {
    font-size: clamp(55px, 5vw, 80px);
}

.page-id-9178 .lp-subtitle span {
    font-size: clamp(38px, 4vw, 56px);
}

@media only screen and (max-width: 768px) {
    .page-id-9178 section.lp-title-bar {
        height: 600px;
    }
}


/* ==========================================================================
   PR PAGE (page-id-10057)
   ========================================================================== */

/* Hide scroll indicator on PR page hero */
.page-id-10057 .scroll.uppercase.text-lg.font-bold.absolute.left-6.bottom-0.z-10.cursor-pointer.pointer-events-auto {
    display: none;
}


/* ==========================================================================
   PROMOS / EVENT PAGES (page-id-9290, page-id-9587)
   --------------------------------------------------------------------------
   These are landing pages that hide the main site header.
   ========================================================================== */

.page-id-9290 header,
.page-id-9587 header {
    display: none;
}


/* ==========================================================================
   CONTACT / PARTNER+ PAGE (page-id-5398)
   ========================================================================== */

.page-id-5398 .wp-block-columns {
    margin-bottom: 0;
}


/* ==========================================================================
   PARTNER+ FORM PAGE (page-id-5543)
   ========================================================================== */

.page-id-5543 section.title-bar-background.overflow-hidden.text-white {
    background-image: none;
    background-color: #1F4494;
}


/* ==========================================================================
   AMP PRODUCT PAGES (page-id-9923, page-id-11144)
   ========================================================================== */

.page-id-9923 .gform_wrapper.gravity-theme .gfield_label,
.page-id-11144 .gform_wrapper.gravity-theme .gfield_label {
    font-size: 1.2em;
}

.page-id-9923 .post-content .content h3,
.page-id-11144 .post-content .content h3 {
    font-size: 4rem;
    margin-bottom: 1em;
}

.page-id-9923 .gform_wrapper.gravity-theme #field_33_19 .gfield_label,
.page-id-9923 .gform_wrapper.gravity-theme #field_33_46 .gfield_label,
.page-id-9923 .gform_wrapper.gravity-theme #field_33_47 .gfield_label {
    font-size: 1em;
}

.page-id-11144 .gform_wrapper.gravity-theme #field_33_19 .gfield_label,
.page-id-11144 .gform_wrapper.gravity-theme #field_33_46 .gfield_label,
.page-id-11144 .gform_wrapper.gravity-theme #field_33_47 .gfield_label {
    font-size: 1em;
}


/* ==========================================================================
   PARTNER+ CLIENT INTAKE FORM PAGE (page-id-3476)
   ========================================================================== */

.page-id-3476 div.gfield_description {
    color: #6c6c6c;
}

.page-id-3476 div.gfield_description li {
    font-size: 16px;
}

.page-id-3476 .gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: 25px;
}

.page-id-3476 .gform_wrapper.gravity-theme .gfield_label {
    font-size: 2.5rem;
}

.page-id-3476 p > a:not(.btn):hover {
    color: black !important;
    opacity: 1;
}


/* ==========================================================================
   SPECIFIC BLOG POSTS
   ========================================================================== */

/* postid-7101 */
.postid-7101 #section3 {
    margin-top: 0;
}

/* postid-1217, postid-1212 — hide meta */
.postid-1217 .meta,
.postid-1212 .meta {
    display: none;
}

/* postid-7705 — case study caption */
.postid-7705 div.Caption {
    display: none !important;
}

/* postid-11062 — job listing remote field override */
.postid-11062 .flex-1.h6.details p:nth-of-type(3) {
    visibility: hidden;
    position: relative;
}

.postid-11062 .flex-1.h6.details p:nth-of-type(3)::after {
    content: "Hybrid";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

/* postid-11589 — blog post column padding */
.postid-11589 .wp-block-columns.container.row.justify-center.w-full.lg\:w-2\/3.padding-0.mb-0.is-layout-flex.wp-container-core-columns-is-layout-9d6595d7.wp-block-columns-is-layout-flex {
    padding: 0 20px;
}

/* COO bio post */
.COO-title {
    margin-top: 0.5em;
}

/* Blog post with centered paragraph max-width */
/* WARNING: p.has-text-align-center is a broad selector — scoped to postid-11589 context */
.postid-11589 p.has-text-align-center {
    max-width: 400px;
}

/* Media training blog post — heading overrides */
.post-content .content h2.lowercase-header {
    font-size: 5rem !important;
    margin-bottom: 0.5em !important;
    font-family: rift, sans-serif;
}

/* m1em spacing utility (awards blog post) */
.m1em {
    margin-top: 1em;
    margin-bottom: 1em;
}


/* ==========================================================================
   4MEDIA4HEALTH PAGE (microsite)
   ========================================================================== */

/* Purple background card — 4M4H variant
   TODO: consolidate with .bg-purple in 04-components.css */
.bg-purple-4m4h {
    background: #453cd3;
    padding: 3em;
    border-radius: 3rem;
}

.bg-purple-4m4h h4 {
    font-size: clamp(2em, 3vw, 4em);
    color: white;
}

.w-60-4m4h {
    width: 60%;
}

@media (max-width: 768px) {
    .w-60-4m4h {
        width: 100%;
    }
}


/* ==========================================================================
   4MEDIA4PUBLIC AFFAIRS PAGE (microsite)
   ========================================================================== */

/* Purple background card — 4M4PA variant
   TODO: consolidate with .bg-purple in 04-components.css */
.bg-purple-4m4pa {
    background: #453cd3;
    padding: 3em;
    border-radius: 3rem;
}

.bg-purple-4m4pa h4 {
    font-size: clamp(10px, 3vw, 4em);
    color: white;
}

.w-60-4m4pa {
    width: 60%;
}

@media (max-width: 768px) {
    .w-60-4m4pa {
        width: 100%;
    }
}


/* ==========================================================================
   EVENT SIDE TAB (currently hidden — set to display:none)
   ========================================================================== */

#promo-side-tab {
    display: none; /* Hidden — uncomment body to re-enable */
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: #043986;
    color: white;
    padding: 10px;
    border-radius: 5px 0 0 5px;
    font-size: 16px;
    font-weight: bold;
    z-index: 1000;
    cursor: pointer;
    transition: right 0.3s ease;
    align-items: center;
}

#promo-side-tab .toggle-icon {
    font-size: 18px;
    margin-right: 5px;
}

#promo-side-tab .tab-links {
    display: none;
    flex-direction: column;
}

#promo-side-tab.open .tab-links {
    display: flex;
}

#promo-side-tab .tab-link {
    color: white;
    text-decoration: none;
    margin: 5px 0;
}

#promo-side-tab.open {
    right: 0;
}

@media (max-width: 768px) {
    #promo-side-tab {
        padding: 8px;
        font-size: 14px;
        right: 10px;
    }
}
/* ==========================================================================
   09 — Animations
   --------------------------------------------------------------------------
   All @keyframes and animation helper classes.
   NOTE: The original CSS had two conflicting @keyframes pulse definitions.
   Only the fuller scale3d version is kept here — it is what browsers used.
   ========================================================================== */


/* --- Pulse (used by dot-effect, popup image hover, .pulse class) --- */

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        -ms-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}


/* --- Pulse Shadow (used by span.dot-effect) --- */

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(226, 101, 64, 0.4);
    }

    100% {
        box-shadow: 0 0 0 7px rgba(226, 101, 64, 0);
    }
}


/* --- Animate Border (used by .button-bg animated gradient button) --- */

@-webkit-keyframes AnimateBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@-moz-keyframes AnimateBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes AnimateBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* --- Gradient Animation (used by .amp-hero background) --- */

@keyframes gradientAnimation {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* --- Bounce Glow (used by .amp-price.animate-bounce) --- */

@keyframes bounce-glow {
    0% {
        transform: scale(1);
        text-shadow: none;
    }

    30% {
        transform: scale(1.2);
        text-shadow: 0 0 10px rgba(0, 115, 230, 0.5);
    }

    60% {
        transform: scale(0.95);
        text-shadow: 0 0 5px rgba(0, 115, 230, 0.3);
    }

    100% {
        transform: scale(1);
        text-shadow: none;
    }
}