/* =========================================================
   TBS Video Editing Agency Page — Widget Styles
   Brand colors: #17B0B5 (medium cyan) / #197095 (dark cyan)
   ========================================================= */

.tbs-vep-wrap.tbs-vep-wrap {
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

.tbs-vep-wrap.tbs-vep-wrap * {
    box-sizing: border-box;
}

/* ── SCROLL-REVEAL ANIMATION BASELINE ────────────────────── */
/* Opacity/transform intentionally carry no !important — GSAP drives the
   actual animation via inline styles (tbs-video-editing-page-script.js) and
   would be paralyzed if the stylesheet fought it with !important. These
   rules only set the pre-animation "hidden" starting point so there's no
   flash of fully-visible content before GSAP/ScrollTrigger takes over. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-reveal.tbs-vep-reveal {
    opacity: 0;
    transform: translateY(32px);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-reveal-scale.tbs-vep-reveal-scale {
    opacity: 0;
    transform: scale(0.92);
}

/* Editor exemption: never leave content invisible while building the page
   in Elementor, regardless of whether GSAP has run yet. */
body.elementor-editor-active .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-reveal.tbs-vep-reveal,
body.elementor-editor-active .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-reveal-scale.tbs-vep-reveal-scale {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-reveal.tbs-vep-reveal,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-reveal-scale.tbs-vep-reveal-scale {
        opacity: 1;
        transform: none;
    }
}

/* ── HERO ───────────────────────────────────────────────── */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero {
    position: relative;
    overflow: hidden;
    padding: 100px 40px;
    background-color: #F2FAFB;
    background-repeat: no-repeat;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    /* stretch (the flex default) instead of center — makes the media column
       match the text column's height dynamically, whatever the copy length. */
    align-items: stretch;
    gap: 120px;
    max-width: 1180px;
    /* Needed so this still spans the full section width once the "Section
       Height" control turns .tbs-vep-hero itself into a flex container to
       vertically center this — without it, a flex item shrink-to-fits by
       default instead of filling its row, squeezing the two-column layout
       inside down to whatever the content happens to need. Harmless when
       .tbs-vep-hero stays a normal block (the default, unsized case). */
    width: 100%;
    margin: 0 auto;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45%;
    max-width: 45%;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-heading {
    margin: 0 0 20px;
    font-size: 44px;
    line-height: 1.18;
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-subheading {
    font-size: 17px;
    line-height: 1.75;
    color: #2B5F6B;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-subheading p {
    margin: 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-subheading strong {
    font-weight: 700;
    color: #0E2A33;
}

/* ── BUTTONS ─────────────────────────────────────────────── */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 32px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    border-radius: 10px;
    background-image: linear-gradient(135deg, #17B0B5, #197095);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(23, 112, 149, 0.28);
    transition: background-image 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-btn:hover,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-btn:focus-visible {
    background-image: linear-gradient(135deg, #197095, #17B0B5);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(23, 112, 149, 0.36);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-btn-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* background-color and text color are intentionally NOT set here —
       both are owned entirely by the "Button Background" / "Button Hover
       Background" / "Button Text Color" Elementor controls, which always
       emit their own default values at this exact selector's specificity.
       A static fallback here would tie with them and the winner would
       depend on unpredictable stylesheet load order instead of the value
       actually chosen. */
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-whatsapp-btn:hover,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-whatsapp-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37, 211, 102, 0.36);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-whatsapp-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/* ── DECORATIVE GLOW BLOBS ───────────────────────────────── */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-glow-1 {
    width: 340px;
    height: 340px;
    top: -120px;
    right: -80px;
    background: radial-gradient(circle, rgba(23, 176, 181, 0.35), rgba(23, 176, 181, 0) 70%);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-glow-2 {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: -80px;
    background: radial-gradient(circle, rgba(25, 112, 149, 0.30), rgba(25, 112, 149, 0) 70%);
}

/* ── DECORATIVE PLAY-BUTTON MOTIF ────────────────────────── */
/* Shown in the media column when no image is uploaded (and the media
   column itself is enabled). A pulsing play button with two "film frame"
   corner accents, echoing the growth-chart card treatment used on the
   Local SEO page's Hero but themed for video editing instead. */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-motif {
    --tbs-vep-motif-color-1: #17B0B5;
    --tbs-vep-motif-color-2: #197095;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    width: 100%;
    border-radius: 24px;
    background-image: linear-gradient(
        135deg,
        var(--tbs-vep-motif-color-1),
        var(--tbs-vep-motif-color-2),
        var(--tbs-vep-motif-color-1)
    );
    background-size: 220% 220%;
    animation: tbs-vep-motif-gradient-shift 9s ease-in-out infinite;
    box-shadow: 0 24px 60px rgba(10, 45, 58, 0.28);
    overflow: hidden;
}

/* Slow, continuous gradient drift across the motif card — the "premium"
   animated-gradient feel, purely on background-position so it never
   fights the play icon's own gradient fill. */
@keyframes tbs-vep-motif-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Soft diagonal light sweep drifting across the card, on top of the
   gradient shift — reads as a subtle glossy/premium highlight. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-motif::before {
    content: '';
    position: absolute;
    inset: -50%;
    z-index: 1;
    background: linear-gradient(
        75deg,
        transparent 40%,
        rgba(255, 255, 255, 0.16) 50%,
        transparent 60%
    );
    animation: tbs-vep-motif-sweep 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes tbs-vep-motif-sweep {
    0%   { transform: translateX(-30%); }
    50%  { transform: translateX(30%); }
    100% { transform: translateX(-30%); }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-grad-stop-1 {
    stop-color: var(--tbs-vep-motif-color-1);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-grad-stop-2 {
    stop-color: var(--tbs-vep-motif-color-2);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-motif-play-icon {
    position: relative;
    z-index: 3;
    width: 25%;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(10, 45, 58, 0.4));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: tbs-vep-play-breathe 3.6s ease-in-out infinite;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-motif:hover .tbs-vep-motif-play-icon {
    transform: scale(1.08);
}

@keyframes tbs-vep-play-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-motif-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    animation: tbs-vep-ring-pulse 3s ease-out infinite;
    z-index: 2;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-motif-ring-2 {
    animation-delay: 1.5s;
}

@keyframes tbs-vep-ring-pulse {
    0%   { transform: scale(0.4); opacity: 0.7; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Two corner "film frame" brackets, referencing a video timeline/viewfinder. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-motif-frame {
    position: absolute;
    width: 46px;
    height: 46px;
    border: 3px solid rgba(255, 255, 255, 0.55);
    z-index: 2;
    animation: tbs-vep-frame-float 4.5s ease-in-out infinite;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-motif-frame-1 {
    top: 14%;
    left: 12%;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 6px;
    animation-delay: 0s;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-motif-frame-2 {
    bottom: 14%;
    right: 12%;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 6px;
    animation-delay: 2.2s;
}

@keyframes tbs-vep-frame-float {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50%      { transform: translateY(-8px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-motif {
        animation: none;
        background-position: 0% 50%;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-motif::before {
        animation: none;
        opacity: 0;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-motif-play-icon {
        animation: none;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-motif-ring {
        animation: none;
        opacity: 0;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-motif-frame {
        animation: none;
    }
}

/* ── WHY THE EDIT MATTERS SECTION ────────────────────────── */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why {
    position: relative;
    background-color: #ffffff;
    padding: 90px 40px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-inner {
    display: flex;
    align-items: center;
    gap: 56px;
    max-width: 1180px;
    margin: 0 auto;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-text {
    flex: 0 0 65%;
    max-width: 65%;
    text-align: left;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-media {
    flex: 0 0 35%;
    max-width: 35%;
    overflow: hidden;
    border-radius: 24px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-heading {
    margin: 0 0 20px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-body {
    font-size: 17px;
    line-height: 1.75;
    color: #41485A;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-body p {
    margin: 0 0 18px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-body p:last-child {
    margin-bottom: 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-body strong {
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    /* object-fit intentionally not set here — owned entirely by the
       "Image Fit" control, same pattern as the Hero's hero-img. */
}

/* Decorative film-strip placeholder shown when no image is uploaded:
   a vertical strip of "sprocket hole" frames with a soft highlight
   scanning down over them, plus a small clapperboard icon. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-motif {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    width: 100%;
    background-image: linear-gradient(160deg, #17B0B5, #197095);
    overflow: hidden;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-motif-strip {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 10% 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-motif-frame {
    width: 60%;
    height: 12%;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-motif-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 26%;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    animation: tbs-vep-why-scan 4.5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes tbs-vep-why-scan {
    0%   { transform: translateY(-40%); }
    50%  { transform: translateY(280%); }
    100% { transform: translateY(-40%); }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-motif-clapper-icon {
    position: relative;
    z-index: 2;
    width: 24%;
    height: auto;
    filter: drop-shadow(0 8px 14px rgba(10, 45, 58, 0.35));
    animation: tbs-vep-play-breathe 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-motif-scan {
        animation: none;
        opacity: 0;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-motif-clapper-icon {
        animation: none;
    }
}

/* ── WHY CHOOSE US SECTION ───────────────────────────────── */
/* Image-left / checklist-right. Closes out the page as a final
   trust-building beat after the Pricing section. White background (not
   the usual #F2FAFB tint) so it reads as visually distinct from the
   Pricing section's own tinted backdrop directly above it. */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose {
    position: relative;
    background-color: #FFFFFF;
    padding: 90px 40px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-inner {
    display: flex;
    align-items: center;
    gap: 56px;
    max-width: 1180px;
    margin: 0 auto;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-media {
    position: relative;
    flex: 0 0 38%;
    max-width: 38%;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-text {
    flex: 0 0 62%;
    max-width: 62%;
    text-align: left;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-heading {
    margin: 0 0 24px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    /* object-fit intentionally not set here — owned entirely by the
       "Image Fit" control, same pattern as .tbs-vep-why-img. */
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #17B0B5, #197095);
    box-shadow: 0 6px 14px rgba(23, 112, 149, 0.28);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-icon svg {
    width: 16px;
    height: 16px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-content {
    padding-top: 3px;
    font-size: 16px;
    line-height: 1.7;
    color: #41485A;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-title {
    font-weight: 700;
    color: #0E2A33;
}

/* Decorative "trust badge" placeholder shown when no image is uploaded:
   a central shield-check medallion with a slow-orbiting ring of small
   checkmark satellites, on a glassy animated-gradient card matching the
   Hero/Services motif's premium treatment. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    width: 100%;
    border-radius: 24px;
    background-image: linear-gradient(
        150deg,
        #197095,
        #17B0B5,
        #197095
    );
    background-size: 220% 220%;
    animation: tbs-vep-motif-gradient-shift 9s ease-in-out infinite;
    box-shadow: 0 24px 60px rgba(10, 45, 58, 0.28);
    overflow: hidden;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.28),
        transparent 60%
    );
    animation: tbs-vep-choose-glow-pulse 4.5s ease-in-out infinite;
}

@keyframes tbs-vep-choose-glow-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-orbit {
    position: absolute;
    z-index: 1;
    width: 62%;
    height: 62%;
    animation: tbs-vep-choose-orbit-spin 16s linear infinite;
}

@keyframes tbs-vep-choose-orbit-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-sat {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 6px 14px rgba(10, 45, 58, 0.28);
    /* Counter-rotate each satellite so its checkmark icon always stays
       upright while the orbit itself spins. */
    animation: tbs-vep-choose-orbit-spin 16s linear infinite reverse;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-sat svg {
    width: 16px;
    height: 16px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-sat-1 { top: -15px;  left: 50%; margin-left: -15px; }
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-sat-2 { top: 50%;    right: -15px; margin-top: -15px; }
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-sat-3 { bottom: -15px; left: 50%; margin-left: -15px; }
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-sat-4 { top: 50%;    left: -15px; margin-top: -15px; }

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-shield-icon {
    position: relative;
    z-index: 2;
    width: 30%;
    height: auto;
    filter: drop-shadow(0 8px 14px rgba(10, 45, 58, 0.35));
    animation: tbs-vep-play-breathe 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif {
        animation: none;
        background-position: 0% 50%;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-glow {
        animation: none;
        opacity: 0.8;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-orbit,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-sat {
        animation: none;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif-shield-icon {
        animation: none;
    }
}

/* ── SEE OUR CLIENTS SECTION ─────────────────────────────── */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients {
    position: relative;
    background-color: #F2FAFB;
    padding: 80px 40px;
    overflow: hidden;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-inner {
    max-width: 720px;
    margin: 0 auto 44px;
    text-align: center;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-heading {
    margin: 0 0 12px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-subheading {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #41485A;
}

/* Marquee viewport — edge-fade mask so logos appear to scroll in/out of a
   soft gradient rather than being hard-clipped at the container edge.
   container-type: inline-size makes this element's own (already
   padding/max-width-constrained) rendered width queryable as `cqw` below,
   so each logo slot sizes off what's actually visible here — not the raw
   browser viewport, which would be wrong once the marquee is narrower than
   the screen (e.g. inside a padded/max-width section, or a normal-width
   column in the Elementor editor). */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-marquee {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    container-type: inline-size;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 64px,
        #000 calc(100% - 64px),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 64px,
        #000 calc(100% - 64px),
        transparent 100%
    );
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-track {
    --tbs-vep-clients-per-view: 6;
    --tbs-vep-clients-duration: 30s;
    display: flex;
    align-items: center;
    width: max-content;
    animation-name: tbs-vep-clients-scroll-left;
    animation-duration: var(--tbs-vep-clients-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-track-right {
    animation-name: tbs-vep-clients-scroll-right;
}

/* Pause on hover/focus so visitors can actually look at a logo (and to
   give keyboard users a stable target before tabbing into a linked logo). */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-marquee:hover .tbs-vep-clients-track,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-marquee:focus-within .tbs-vep-clients-track {
    animation-play-state: paused;
}

/* Each duplicated .tbs-vep-clients-set is one full pass of the logo list,
   and the TRACK holds two of them back-to-back — so the track's own width
   is 2x one set's width. Translating the track by -50% (not -100%) is what
   moves it by exactly one set's width, landing precisely on the start of
   the duplicate set for a seamless loop; -100% overshoots past the
   duplicate entirely and exposes empty space before it snaps back to 0,
   which read as a visible "glitch". */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

@keyframes tbs-vep-clients-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes tbs-vep-clients-scroll-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sized off the "Logos Per View" control (--tbs-vep-clients-per-view),
       as a share of the marquee VIEWPORT's own rendered width (100cqw,
       via container-type: inline-size on .tbs-vep-clients-marquee above)
       — not the raw browser viewport, which would size logos wrong inside
       a padded/max-width section or a narrower editor column. */
    width: calc(100cqw / var(--tbs-vep-clients-per-view));
    max-width: 220px;
    padding: 0 28px;
    box-sizing: border-box;
    /* Transparent by default so each logo floats directly on the section
       background instead of sitting in a visible white "chip". Overridden
       by the "Logo Card Background" Style control if the user wants one. */
    background-color: transparent;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-logo-img {
    display: block;
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    filter: grayscale(0);
    opacity: 1;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-grayscale .tbs-vep-clients-logo-img {
    filter: grayscale(1);
    opacity: 0.6;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-grayscale .tbs-vep-clients-logo:hover .tbs-vep-clients-logo-img,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-grayscale .tbs-vep-clients-logo:focus-within .tbs-vep-clients-logo-img {
    filter: grayscale(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-track {
        animation: none;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-set[aria-hidden="true"] {
        display: none;
    }
}

/* ── VIDEO EDITING SERVICES SECTION ──────────────────────── */
/* Style reference: tbs-local-seo-page's "Why Choose Us" section — same
   numbered-timeline list language (connector line + gradient number
   badges), mirrored here as .tbs-vep-services-*. */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services {
    position: relative;
    /* White by default (not the #F2FAFB tint) so it reads as visually
       distinct from the "See Our Clients" section directly above it. */
    background-color: #FFFFFF;
    padding: 90px 40px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-inner {
    display: flex;
    align-items: center;
    gap: 56px;
    max-width: 1180px;
    margin: 0 auto;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-text {
    flex: 0 0 58%;
    max-width: 58%;
    text-align: left;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-media {
    position: relative;
    flex: 0 0 42%;
    max-width: 42%;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-heading {
    margin: 0 0 20px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-intro {
    font-size: 17px;
    line-height: 1.75;
    color: #41485A;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-intro p {
    margin: 0 0 16px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-intro p:last-child {
    margin-bottom: 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-intro strong {
    font-weight: 700;
    color: #0E2A33;
}

/* Numbered "timeline" list — a connecting line runs behind the number
   badges down the left edge, linking each service to the next. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-item {
    --tbs-vep-services-connector: rgba(23, 112, 149, 0.2);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 17px;
    width: 2px;
    bottom: -26px;
    background-color: var(--tbs-vep-services-connector);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-num {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #17B0B5, #197095);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(23, 112, 149, 0.28);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-content {
    padding-top: 6px;
    font-size: 16px;
    line-height: 1.7;
    color: #41485A;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-title {
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    /* object-fit and border-radius intentionally not set here — both owned
       entirely by the "Image Fit" / "Corner Radius" Style controls. */
}

/* Decorative "edit timeline" placeholder: a waveform of bars with a
   playhead continuously scrubbing across them, in a glassy animated-
   gradient card matching the Hero motif's premium treatment. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-motif {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    width: 100%;
    border-radius: 24px;
    background-image: linear-gradient(
        135deg,
        #17B0B5,
        #197095,
        #17B0B5
    );
    background-size: 220% 220%;
    animation: tbs-vep-motif-gradient-shift 9s ease-in-out infinite;
    box-shadow: 0 24px 60px rgba(10, 45, 58, 0.28);
    overflow: hidden;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-motif-waveform {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 62%;
    height: 34%;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-motif-bar {
    flex: 1 1 auto;
    height: var(--tbs-vep-bar-h, 50%);
    min-width: 3px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.55);
    animation: tbs-vep-services-bar-pulse 2.4s ease-in-out infinite;
    transform-origin: center;
}

@keyframes tbs-vep-services-bar-pulse {
    0%, 100% { transform: scaleY(0.7); opacity: 0.6; }
    50%      { transform: scaleY(1); opacity: 1; }
}

/* Playhead — a bright vertical line scrubbing left-to-right across the
   waveform on loop, exactly like an editor's timeline cursor. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-motif-playhead {
    position: absolute;
    top: 33%;
    bottom: 33%;
    left: 19%;
    width: 2px;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    animation: tbs-vep-services-playhead-scrub 4.5s ease-in-out infinite;
}

@keyframes tbs-vep-services-playhead-scrub {
    0%   { left: 19%; }
    50%  { left: 81%; }
    100% { left: 19%; }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-motif-clip-icon {
    position: absolute;
    top: 14%;
    right: 14%;
    z-index: 1;
    width: 15%;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(10, 45, 58, 0.35));
    animation: tbs-vep-play-breathe 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-motif {
        animation: none;
        background-position: 0% 50%;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-motif-bar {
        animation: none;
        transform: scaleY(1);
        opacity: 0.85;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-motif-playhead {
        animation: none;
        left: 50%;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-motif-clip-icon {
        animation: none;
    }
}

/* ── PRODUCTION PROCESS SECTION ──────────────────────────── */
/* Deliberately its own visual language — a dark "chapter break" between
   the light sections around it — with a zig-zag image/text layout and a
   single animated path threading down behind every step. New pattern for
   this widget, no Local SEO equivalent to mirror. */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process {
    position: relative;
    background-color: #0E2A33;
    padding: 100px 40px;
    overflow: hidden;
}

/* Two soft brand-color glows, echoing the Hero's glow blobs, so this dark
   section still feels like part of the same page system. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process::before,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    pointer-events: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process::before {
    width: 420px;
    height: 420px;
    top: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(23, 176, 181, 0.28), rgba(23, 176, 181, 0) 70%);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process::after {
    width: 380px;
    height: 380px;
    bottom: -140px;
    right: -100px;
    background: radial-gradient(circle, rgba(25, 112, 149, 0.28), rgba(25, 112, 149, 0) 70%);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-heading {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto 72px;
    text-align: center;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-list {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 0 auto;
}

/* The connecting path SVG stretches the full height of the step list and
   sits behind every row. Its viewBox is generated in PHP to closely match
   the real rendered proportions (a fixed width against step-count x a
   fixed per-step height) and preserveAspectRatio is left at its uniform
   default, so the curve is never stretched non-uniformly — an earlier
   version used preserveAspectRatio="none" against a near-square viewBox,
   which distorted the stroke into chunky, uneven dashes. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* A thin, solid (no dasharray) stroke with a soft glow reads as a clean
   signal line. Its own gradient fades opacity in/out along the full
   length; layered on top, a single flowing "comet" segment (one long dash
   + one long gap, so only ONE bright segment ever exists rather than many
   small dashes) continuously travels the path's length for the moving
   highlight, instead of scrolling a chunky dash pattern. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-path {
    filter: drop-shadow(0 0 6px rgba(23, 176, 181, 0.45));
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-path-stop {
    stop-color: #17B0B5;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-path-comet {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    /* pathLength="1000" on the element (PHP) normalizes stroke-dasharray/
       -offset to 1000 units regardless of the curve's real length, so
       travelling exactly -1000 is always one full, seamless pass — the
       120-unit bright dash re-enters at the top the instant it exits the
       bottom, whatever the step count. */
    animation: tbs-vep-process-comet-travel 6s linear infinite;
}

@keyframes tbs-vep-process-comet-travel {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -1000; }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    min-height: 260px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step:not(:last-child) {
    margin-bottom: 40px;
}

/* Zig-zag: odd steps (1st, 3rd, ...) put text on the left / image on the
   right; even steps mirror it. row-reverse flips the visual order without
   touching source order, which keeps the DOM in natural reading order for
   assistive tech regardless of which side an item visually lands on. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step-right {
    flex-direction: row-reverse;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step-text {
    position: relative;
    flex: 0 0 44%;
    max-width: 44%;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step-media {
    flex: 0 0 44%;
    max-width: 44%;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-num {
    display: block;
    margin-bottom: 14px;
    background-image: linear-gradient(135deg, #17B0B5, #197095);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-title {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
}

/* Glassmorphism image frame: translucent gradient card behind the image,
   with a soft brand-colored glow — the "premium/modern" treatment
   requested, distinct from every other section's plain image treatment. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-img-wrap {
    position: relative;
    padding: 14px;
    border-radius: 20px;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(23, 176, 181, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(23, 176, 181, 0.08) inset;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step:hover .tbs-vep-process-img-wrap {
    transform: translateY(-6px);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-img {
    display: block;
    width: 100%;
    height: 220px;
    border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-path-comet {
        animation: none;
        opacity: 0;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-img-wrap {
        transition: none;
    }
}

/* ── PORTFOLIO / SHOWREEL CAROUSEL SECTION ───────────────── */
/* Swiper (loaded from CDN, see techabyte-official-site-plugin.php) drives
   the mechanics; everything here is presentation on top of its stock
   markup/classes (.swiper, .swiper-wrapper, .swiper-slide,
   .swiper-pagination, .swiper-pagination-bullet[-active]). */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio {
    position: relative;
    background-color: #FFFFFF;
    padding: 90px 40px;
    overflow: hidden;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-inner {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-heading {
    margin: 0 0 12px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-subheading {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #41485A;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-carousel-wrap {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    /* Room either side for the arrow buttons, which sit outside the
       carousel viewport itself rather than overlapping the first/last
       slide. */
    padding: 0 56px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-swiper {
    /* Swiper needs overflow:hidden on its own root for the horizontal
       slide mechanism (otherwise every slide stays visible, overflowing
       the page) — but clipping the box tight against the cards flattens
       each card's soft box-shadow into a hard rectangular cutoff right at
       this edge, which read as a glitchy "ghost strip" under the cards.
       Padding on all four sides (not just bottom, for the pagination dots)
       gives the shadow's blur room to fade out naturally before the clip
       line, so overflow:hidden only ever cuts empty space, never the
       shadow itself. */
    overflow: hidden;
    padding: 24px 4px 44px;
}

/* Modern "glossy" card: a subtle 1px light border (glass-edge highlight),
   a bottom-anchored gradient scrim baked into the media itself (rather
   than a hard-edged solid caption bar) so the title reads directly over
   the footage, and a lift + brighten on hover instead of just a shadow
   bump — reads as a premium video-tile UI (Netflix/Apple TV-ish) rather
   than a plain bordered box. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background-color: #0E2A33;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 34px rgba(14, 42, 51, 0.18);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(23, 176, 181, 0.35);
    box-shadow: 0 26px 50px rgba(14, 42, 51, 0.28), 0 0 0 1px rgba(23, 176, 181, 0.12);
}

/* Thin diagonal gloss sweep across the top of the card — the "glossy"
   surface highlight, purely decorative and non-interactive. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0) 22%
    );
    pointer-events: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: #0E2A33;
    overflow: hidden;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card:hover .tbs-vep-portfolio-card-poster {
    transform: scale(1.06);
}

/* Gradient scrim anchored to the bottom of the media, so the caption sits
   directly over the footage instead of a separate hard-edged bar below
   it — the modern "video tile" look. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    z-index: 1;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(6, 22, 27, 0.55) 55%,
        rgba(6, 22, 27, 0.92) 100%
    );
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Once JS swaps the poster for a live <iframe>/<video> (see
   initPortfolioCarousels() in tbs-video-editing-page-script.js), the
   poster and play button are hidden rather than removed — cheaper than a
   DOM removal and instantly reversible if the visitor navigates the
   slide away and back. The caption + its scrim are hidden too (:has() on
   the card, since the caption is a sibling of .tbs-vep-portfolio-card-media
   rather than nested inside it) so the title/category don't sit on top of
   an actual playing video. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-media.tbs-vep-is-playing .tbs-vep-portfolio-card-poster,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-media.tbs-vep-is-playing .tbs-vep-portfolio-play-btn,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-media.tbs-vep-is-playing::after {
    opacity: 0;
    pointer-events: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card:has(.tbs-vep-is-playing) .tbs-vep-portfolio-card-caption {
    opacity: 0;
    pointer-events: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-media iframe,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Always-visible escape hatch overlaid on an embedded YouTube/Vimeo
   player — a cross-origin embed can fail silently INSIDE its own iframe
   (wrong domain not on the video's embed allow-list, private/removed
   video, etc.) with no way for this page's JS to detect it, so rather
   than trying to detect the failure, a working link to the original
   watch page is always available on top of the player. Sits at the
   bottom-right, above the iframe (z-index + later in DOM order — see
   tbsVepPlayCard() in the JS), so it never blocks the video controls
   themselves in the rest of the frame. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-embed-fallback-link {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: rgba(14, 42, 51, 0.82);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-embed-fallback-link:hover,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-embed-fallback-link:focus-visible {
    background-color: #17B0B5;
    transform: translateY(-2px);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-play-btn svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card:hover .tbs-vep-portfolio-play-btn {
    transform: scale(1.1);
}

/* Positioned absolutely against .tbs-vep-portfolio-card (its closest
   positioned ancestor) rather than nested inside .tbs-vep-portfolio-card-
   media in markup — since media is the card's only flex child and fills
   it entirely, this still lands exactly over the bottom gradient scrim
   above, reading as text-on-footage instead of a separate hard-edged bar
   glued underneath the video (the old layout). */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 20px 18px 18px;
    transition: opacity 0.3s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-category {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: rgba(23, 176, 181, 0.16);
    border: 1px solid rgba(23, 176, 181, 0.4);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5FE3E8;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    /* The caption now sits directly over video footage rather than a
       solid dark bar, so it needs its own contrast/legibility guarantee
       independent of whatever the underlying frame looks like. */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ── ARROWS ───────────────────────────────────────────────── */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-arrow {
    position: absolute;
    /* Nudged down slightly from center to compensate for the swiper's own
       top padding (added to give card shadows room — see
       .tbs-vep-portfolio-swiper) shifting the cards down a few px. */
    top: 46%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #ffffff;
    color: #0E2A33;
    box-shadow: 0 10px 24px rgba(14, 42, 51, 0.18);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-arrow svg {
    width: 20px;
    height: 20px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-arrow:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(14, 42, 51, 0.26);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-arrow-prev {
    left: 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-arrow-next {
    right: 0;
}

/* ── PAGINATION DOTS ──────────────────────────────────────── */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-pagination.swiper-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    background-color: rgba(14, 42, 51, 0.2);
    opacity: 1;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-pagination .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: 4px;
    background-color: #17B0B5;
}

/* ── PRICING PACKAGES SECTION ────────────────────────────── */
/* Modernized responsive table, same overall structure as
   tbs-local-seo-page's small-business table section (desktop table / mobile
   card stack) but restyled: gradient header row, floating rounded card
   with its own shadow instead of a flat bordered box, and a "Recommended"
   ribbon + highlighted row/card for whichever plan sets plan_featured. */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing {
    position: relative;
    background-color: #F2FAFB;
    padding: 90px 40px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-inner {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-heading {
    margin: 0 0 40px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #0E2A33;
}

/* The "floating card" treatment: the table itself sits inside a
   rounded, shadowed wrapper rather than being a flat bordered grid — the
   part of this section that reads as "modern/slick" rather than a plain
   data table. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-wrap {
    text-align: left;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(14, 42, 51, 0.12);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-grid {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-grid thead th {
    padding: 20px 26px;
    background-image: linear-gradient(135deg, #0E2A33, #197095);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-grid tbody tr {
    background-color: #ffffff;
    transition: background-color 0.2s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-grid tbody tr:not(:last-child) td {
    border-bottom: 1px solid rgba(14, 42, 51, 0.08);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-grid tbody tr:hover {
    background-color: #EAF7F8;
}

/* The featured plan's row gets a tinted background AND a left accent
   bar, so it reads as "the one to pick" at a glance even before noticing
   the ribbon text. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-grid tbody tr.tbs-vep-pricing-row-featured {
    position: relative;
    background-color: #F2FAFB;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-grid tbody tr.tbs-vep-pricing-row-featured td:first-child {
    box-shadow: inset 3px 0 0 #17B0B5;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-grid td {
    padding: 22px 26px;
    vertical-align: top;
    font-size: 15px;
    line-height: 1.6;
    color: #41485A;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-plan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-plan-label {
    font-size: 16px;
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-ribbon {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background-image: linear-gradient(135deg, #17B0B5, #197095);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    padding: 16px 36px;
    border-radius: 10px;
    background-color: #25D366;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-cta:hover,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-cta:focus-visible {
    background-color: #1EBE57;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37, 211, 102, 0.36);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-cta-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/* Mobile card stack — hidden above the breakpoint (see RESPONSIVE below),
   same swap technique as tbs-local-seo-page's table section. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-cards {
    display: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-card {
    position: relative;
    text-align: left;
    padding: 22px 20px;
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow: 0 10px 28px rgba(14, 42, 51, 0.1);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-card-featured {
    background-color: #F2FAFB;
    box-shadow: 0 14px 34px rgba(14, 42, 51, 0.16), inset 3px 0 0 #17B0B5;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-card .tbs-vep-pricing-ribbon {
    margin-bottom: 10px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-card-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-card-fields {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-card-field {
    padding-top: 12px;
    border-top: 1px solid rgba(14, 42, 51, 0.08);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-card-field:first-child {
    padding-top: 0;
    border-top: 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-card-field dt {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #7C8794;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-card-field dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #41485A;
}

/* ── CLIENT TESTIMONIALS SECTION ─────────────────────────── */
/* The very last section on the page. Identical Swiper carousel mechanics
   and card treatment to the Portfolio/Showreel carousel above (same
   shared JS init — see initSwiperCarousels() in
   tbs-video-editing-page-script.js) — only the class prefix and caption
   content (client name/role instead of category/title) differ. Tinted
   `#F2FAFB` background so it reads as distinct from the white "Why
   Choose Us" section directly above it. */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials {
    position: relative;
    background-color: #F2FAFB;
    padding: 90px 40px;
    overflow: hidden;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-inner {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-heading {
    margin: 0 0 12px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-subheading {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #41485A;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-carousel-wrap {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 56px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-swiper {
    /* Same shadow-clipping fix as the Portfolio carousel — see its own
       comment for the full explanation. */
    overflow: hidden;
    padding: 24px 4px 44px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background-color: #0E2A33;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 34px rgba(14, 42, 51, 0.18);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(23, 176, 181, 0.35);
    box-shadow: 0 26px 50px rgba(14, 42, 51, 0.28), 0 0 0 1px rgba(23, 176, 181, 0.12);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0) 22%
    );
    pointer-events: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: #0E2A33;
    overflow: hidden;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card:hover .tbs-vep-testimonials-card-poster {
    transform: scale(1.06);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    z-index: 1;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(6, 22, 27, 0.55) 55%,
        rgba(6, 22, 27, 0.92) 100%
    );
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-media.tbs-vep-is-playing .tbs-vep-testimonials-card-poster,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-media.tbs-vep-is-playing .tbs-vep-testimonials-play-btn,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-media.tbs-vep-is-playing::after {
    opacity: 0;
    pointer-events: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card:has(.tbs-vep-is-playing) .tbs-vep-testimonials-card-caption {
    opacity: 0;
    pointer-events: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-media iframe,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-play-btn svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card:hover .tbs-vep-testimonials-play-btn {
    transform: scale(1.1);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 20px 18px 18px;
    transition: opacity 0.3s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-name {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-card-role {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #5FE3E8;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ── ARROWS ───────────────────────────────────────────────── */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-arrow {
    position: absolute;
    top: 46%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #ffffff;
    color: #0E2A33;
    box-shadow: 0 10px 24px rgba(14, 42, 51, 0.18);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-arrow svg {
    width: 20px;
    height: 20px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-arrow:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(14, 42, 51, 0.26);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-arrow-prev {
    left: 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-arrow-next {
    right: 0;
}

/* ── PAGINATION DOTS ──────────────────────────────────────── */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-pagination.swiper-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    background-color: rgba(14, 42, 51, 0.2);
    opacity: 1;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-pagination .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: 4px;
    background-color: #17B0B5;
}

/* ── FAQ SECTION ──────────────────────────────────────────── */
/* The very last section on the page. Two-column layout (image/placeholder
   graphic left, heading + accordion list right) — same pattern as
   tbs-local-seo-page's FAQ reference. Native <details>/<summary> is the
   source of truth for open/closed state (works even with JS/animations
   disabled); tbs-video-editing-page-script.js only layers a smooth
   height animation on top via the Web Animations API. */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq {
    position: relative;
    background-color: #FFFFFF;
    padding: 90px 40px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-inner {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    max-width: 1180px;
    margin: 0 auto;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-media {
    position: relative;
    flex: 0 0 38%;
    max-width: 38%;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-heading {
    margin: 0 0 28px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    /* object-fit intentionally not set here — owned entirely by the
       "Image Fit" control, same pattern as the other sections' -img. */
}

/* Decorative "chat bubble" placeholder shown when no image is uploaded: a
   gently bobbing speech bubble holding a question-mark icon, with two
   small satellite dots fading in/out beside it. */
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-motif {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    width: 100%;
    border-radius: 24px;
    background-image: linear-gradient(150deg, #17B0B5, #197095);
    overflow: hidden;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-motif-bubble {
    position: relative;
    z-index: 1;
    animation: tbs-vep-faq-bubble-bob 3.6s ease-in-out infinite;
}

@keyframes tbs-vep-faq-bubble-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-motif-mark-icon {
    display: block;
    width: 88px;
    height: auto;
    filter: drop-shadow(0 8px 14px rgba(10, 45, 58, 0.35));
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-motif-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    animation: tbs-vep-faq-dot-fade 3.6s ease-in-out infinite;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-motif-dot-1 {
    top: 22%;
    left: 20%;
    animation-delay: 0.3s;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-motif-dot-2 {
    bottom: 24%;
    right: 18%;
    width: 8px;
    height: 8px;
    animation-delay: 1.1s;
}

@keyframes tbs-vep-faq-dot-fade {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 0.9; transform: scale(1); }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    padding: 8px 16px;
    border-radius: 999px;
    background-color: #ffffff;
    color: #0E2A33;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(14, 42, 51, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-motif-bubble {
        animation: none;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-motif-dot {
        animation: none;
        opacity: 0.6;
    }
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-item {
    border-radius: 14px;
    background-color: #F2FAFB;
    box-shadow: 0 6px 18px rgba(14, 42, 51, 0.06);
    overflow: hidden;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    cursor: pointer;
    list-style: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-question::-webkit-details-marker {
    display: none;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-question-text {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: #0E2A33;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-icon {
    --tbs-vep-faq-icon-color: #ffffff;
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #17B0B5, #197095);
    transition: transform 0.25s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-icon::before,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--tbs-vep-faq-icon-color);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-icon::before {
    width: 12px;
    height: 2px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-icon::after {
    width: 2px;
    height: 12px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-item[open] .tbs-vep-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-answer {
    padding: 0 26px 24px;
    font-size: 16px;
    line-height: 1.75;
    color: #41485A;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-answer p {
    margin: 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-answer strong {
    font-weight: 700;
    color: #0E2A33;
}

/* ── FINAL CTA SECTION ───────────────────────────────────── */
/* The very last section on the page. */

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta {
    position: relative;
    overflow: hidden;
    padding: 96px 40px;
    background-image: linear-gradient(125deg, #17B0B5, #197095);
    text-align: center;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-glow-1 {
    width: 340px;
    height: 340px;
    top: -120px;
    left: -80px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-glow-2 {
    width: 300px;
    height: 300px;
    bottom: -100px;
    right: -80px;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-heading {
    margin: 0 0 20px;
    font-size: 40px;
    line-height: 1.22;
    font-weight: 700;
    color: #ffffff;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-text {
    font-size: 17px;
    line-height: 1.75;
    /* color intentionally NOT set here — owned entirely by the "Text Color"
       Elementor control (cta_text_color), same rationale as the other
       sections' body-text color controls. */
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-text p {
    margin: 0;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-text strong {
    font-weight: 700;
    color: #ffffff;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-btn {
    display: inline-block;
    margin-top: 36px;
    padding: 17px 40px;
    border-radius: 10px;
    background-color: #ffffff;
    color: #197095;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(10, 45, 58, 0.25);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-btn:hover,
.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-btn:focus-visible {
    background-color: #0E2A33;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(10, 45, 58, 0.35);
}

.tbs-vep-wrap.tbs-vep-wrap .tbs-vep-btn-text-short {
    display: none;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero {
        padding: 72px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-inner {
        gap: 36px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-heading {
        font-size: 36px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-subheading {
        font-size: 16px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why {
        padding: 64px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-inner {
        gap: 36px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-heading {
        font-size: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose {
        padding: 64px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-inner {
        gap: 36px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-heading {
        font-size: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients {
        padding: 60px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-heading {
        font-size: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services {
        padding: 64px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-inner {
        gap: 36px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-heading {
        font-size: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process {
        padding: 72px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-heading {
        margin-bottom: 56px;
        font-size: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step {
        gap: 32px;
        min-height: 0;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-num {
        font-size: 46px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-title {
        font-size: 21px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-img {
        height: 180px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio {
        padding: 64px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-heading {
        font-size: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-carousel-wrap {
        padding: 0 48px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing {
        padding: 64px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-heading {
        font-size: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-grid thead th,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-grid td {
        padding: 18px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials {
        padding: 64px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-heading {
        font-size: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-carousel-wrap {
        padding: 0 48px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq {
        padding: 64px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-inner {
        gap: 36px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-heading {
        font-size: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta {
        padding: 72px 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-heading {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-btn-text-full {
        display: none;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-btn-text-short {
        display: inline;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero {
        padding: 56px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-inner {
        flex-direction: column;
        gap: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-media,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-text {
        flex-basis: 100%;
        max-width: 100%;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-media {
        max-width: 340px;
        margin: 0 auto;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-text {
        text-align: center;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-heading {
        font-size: 28px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-subheading {
        text-align: left;
        font-size: 16px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-btn,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-whatsapp-btn {
        display: flex;
        justify-content: center;
        width: 100%;
        text-align: center;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-glow {
        filter: blur(50px);
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-glow-1 { width: 220px; height: 220px; }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-glow-2 { width: 200px; height: 200px; }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-hero-motif {
        aspect-ratio: 16 / 10;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why {
        padding: 48px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-inner {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 28px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-text,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-media {
        flex-basis: 100%;
        max-width: 100%;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-heading {
        font-size: 26px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-body {
        font-size: 16px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-why-motif {
        aspect-ratio: 16 / 10;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose {
        padding: 48px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-inner {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 28px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-text,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-media {
        flex-basis: 100%;
        max-width: 100%;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-heading {
        font-size: 26px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-choose-motif {
        aspect-ratio: 16 / 10;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients {
        padding: 48px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-heading {
        font-size: 26px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-inner {
        margin-bottom: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-marquee {
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 32px,
            #000 calc(100% - 32px),
            transparent 100%
        );
        mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 32px,
            #000 calc(100% - 32px),
            transparent 100%
        );
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-clients-logo {
        padding: 0 16px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services {
        padding: 48px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-text,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-media {
        flex-basis: 100%;
        max-width: 100%;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-media {
        /* Markup order is text-then-media (desktop reads left-to-right that
           way); on mobile the image should lead, so pull it ahead visually
           without touching the DOM order that desktop relies on — same
           pattern as .tbs-vep-why-media. */
        order: -1;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-heading {
        font-size: 26px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-intro {
        font-size: 16px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-list {
        gap: 20px;
        margin-top: 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-item:not(:last-child)::before {
        bottom: -20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-content {
        font-size: 15px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-services-motif {
        aspect-ratio: 16 / 10;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process {
        padding: 56px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-heading {
        margin-bottom: 48px;
        font-size: 26px;
    }
    /* The zig-zag can't survive a narrow single column, so mobile collapses
       every step to image-then-text, always in that order (unlike desktop's
       alternating sides) — reads as a clean vertical timeline instead. */
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step-right {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        min-height: 0;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step:not(:last-child) {
        margin-bottom: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step-text,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step-media {
        flex-basis: 100%;
        max-width: 100%;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-step-media {
        order: -1;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-num {
        font-size: 38px;
        margin-bottom: 10px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-title {
        font-size: 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-desc {
        font-size: 15px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-img {
        height: 200px;
    }
    /* The connecting path is drawn to match the desktop zig-zag geometry;
       once steps stack into one column it no longer lines up with
       anything meaningful, so hide it rather than show a confusing
       diagonal squiggle behind a straight stack. */
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-process-path-svg {
        display: none;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio {
        padding: 48px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-inner {
        margin-bottom: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-heading {
        font-size: 26px;
    }
    /* Side-mounted arrows get cramped once the viewport itself is this
       narrow; drop the reserved side padding and shrink the buttons rather
       than overlapping the cards. */
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-carousel-wrap {
        padding: 0 8px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-arrow {
        width: 38px;
        height: 38px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-portfolio-arrow svg {
        width: 16px;
        height: 16px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing {
        padding: 48px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-heading {
        margin-bottom: 28px;
        font-size: 26px;
    }
    /* Swap the horizontally-cramped table for the stacked cards — no
       scroll-x needed to reach the hidden columns on a phone, same
       technique as tbs-local-seo-page's small-business table section. */
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-wrap {
        display: none;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-cards {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-pricing-cta {
        display: flex;
        justify-content: center;
        width: 100%;
        text-align: center;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials {
        padding: 48px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-inner {
        margin-bottom: 32px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-heading {
        font-size: 26px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-carousel-wrap {
        padding: 0 8px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-arrow {
        width: 38px;
        height: 38px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-testimonials-arrow svg {
        width: 16px;
        height: 16px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq {
        padding: 48px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-inner {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 28px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-text,
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-media {
        flex-basis: 100%;
        max-width: 100%;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-motif {
        aspect-ratio: 16 / 10;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-heading {
        font-size: 26px;
        margin-bottom: 24px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-list {
        gap: 12px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-question {
        padding: 18px 20px;
        gap: 14px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-question-text {
        font-size: 16px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-icon {
        width: 26px;
        height: 26px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-faq-answer {
        padding: 0 20px 20px;
        font-size: 15px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta {
        padding: 56px 20px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-glow {
        filter: blur(50px);
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-glow-1 { width: 220px; height: 220px; }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-glow-2 { width: 200px; height: 200px; }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-heading {
        font-size: 26px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-text {
        font-size: 16px;
    }
    .tbs-vep-wrap.tbs-vep-wrap .tbs-vep-cta-btn {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 28px;
    }
}