/**
 * Frameflow Creatives — Brand gradient system
 * Top #211247 → Bottom #432691 (vertical). Load last.
 */
:root,
.frameflow-light {
  --ff-gradient-top: #211247;
  --ff-gradient-bottom: #432691;
  --ff-brand-gradient: linear-gradient(180deg, #211247 0%, #432691 100%);
  --ff-brand-gradient-hover: linear-gradient(180deg, #2a1858 0%, #4d2c9e 100%);
  --brand: #432691;
  --primary: #211247;
  --heading: #211247;
}

/* ── Primary buttons ───────────────────────────────────────── */
.frameflow-light .tf-btn:not(.tf-btn-2):not(.style-outline):not(.ff-btn-white):not(.ff-btn-on-dark):not(.ff-pricing-plan__cta),
.frameflow-light .tf-header .header-cta,
.frameflow-light .tf-header .mobile-menu,
.frameflow-light .ff-mobile-cta .tf-btn,
.frameflow-light .ff-pricing-plan:not(.ff-pricing-plan--featured) .ff-pricing-plan__cta,
.frameflow-light .ff-pricing-custom__btn.tf-btn:not(.ff-btn-white):not(.ff-btn-on-dark),
.frameflow-light .ff-form-success-modal__actions .tf-btn,
.frameflow-light .ff-newsletter-form .tf-btn,
.frameflow-light .footer-content.newsletter-footer .tf-btn,
.frameflow-light .featured-works-item .view-project,
.frameflow-light .portfolio-filters .filter-btn.active,
.frameflow-light .portfolio-subfilters .subfilter-btn.active,
.frameflow-light .section-404 .tf-btn,
.frameflow-light .tf-loading.loadmore,
.coming-soon-page .tf-btn:not(.tf-btn-2) {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
  background-image: var(--ff-brand-gradient) !important;
  border-color: transparent !important;
}

.frameflow-light .tf-btn:not(.tf-btn-2):not(.style-outline):not(.ff-btn-white):not(.ff-btn-on-dark):not(.ff-pricing-plan__cta):hover,
.frameflow-light .tf-header .header-cta:hover,
.frameflow-light .tf-header .mobile-menu:hover,
.frameflow-light .ff-mobile-cta .tf-btn:hover,
.frameflow-light .ff-pricing-plan:not(.ff-pricing-plan--featured) .ff-pricing-plan__cta:hover,
.frameflow-light .ff-pricing-custom__btn.tf-btn:not(.ff-btn-white):not(.ff-btn-on-dark):hover,
.frameflow-light .ff-form-success-modal__actions .tf-btn:hover,
.frameflow-light .ff-newsletter-form .tf-btn:hover,
.frameflow-light .footer-content.newsletter-footer .tf-btn:hover,
.frameflow-light .featured-works-item .view-project:hover,
.frameflow-light .section-404 .tf-btn:hover,
.coming-soon-page .tf-btn:not(.tf-btn-2):hover {
  background: var(--ff-brand-gradient-hover) !important;
  background-color: #4d2c9e !important;
  background-image: var(--ff-brand-gradient-hover) !important;
}

/* Homepage button overrides (skip dark-panel CTAs — those stay white) */
.frameflow-light.home-page .tf-btn:not(.tf-btn-2):not(.style-outline):not(.ff-pricing-plan__cta):not(.ff-pricing-custom__btn):not(.ff-btn-white):not(.ff-btn-on-dark),
.frameflow-light.home-page .ff-mobile-cta .tf-btn {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
  background-image: var(--ff-brand-gradient) !important;
}

.frameflow-light.home-page .tf-btn:not(.tf-btn-2):not(.style-outline):not(.ff-pricing-plan__cta):not(.ff-pricing-custom__btn):not(.ff-btn-white):not(.ff-btn-on-dark):hover,
.frameflow-light.home-page .ff-mobile-cta .tf-btn:hover {
  background: var(--ff-brand-gradient-hover) !important;
  background-color: #4d2c9e !important;
  background-image: var(--ff-brand-gradient-hover) !important;
}

/* White CTAs on dark purple panels */
.frameflow-light .ff-studio-spotlight__actions .tf-btn,
.frameflow-light .ff-studio-spotlight__actions .tf-btn-2,
.frameflow-light .ff-cta-department .tf-btn,
.frameflow-light .ff-cta-department .tf-btn-2,
.frameflow-light.home-page .ff-studio-spotlight__actions a.tf-btn,
.frameflow-light.home-page .ff-studio-spotlight__actions a.tf-btn-2,
.frameflow-light.home-page .ff-cta-department a.tf-btn,
.frameflow-light.home-page .ff-cta-department a.tf-btn-2 {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #432692 !important;
  -webkit-text-fill-color: #432692 !important;
  border: none !important;
  box-shadow: 0 10px 24px -12px rgba(19, 7, 45, 0.35) !important;
  font-weight: 700 !important;
}

.frameflow-light .ff-studio-spotlight__actions .tf-btn:hover,
.frameflow-light .ff-studio-spotlight__actions .tf-btn-2:hover,
.frameflow-light .ff-cta-department .tf-btn:hover,
.frameflow-light .ff-cta-department .tf-btn-2:hover,
.frameflow-light.home-page .ff-studio-spotlight__actions a.tf-btn:hover,
.frameflow-light.home-page .ff-studio-spotlight__actions a.tf-btn-2:hover,
.frameflow-light.home-page .ff-cta-department a.tf-btn:hover,
.frameflow-light.home-page .ff-cta-department a.tf-btn-2:hover {
  background: #ede8ff !important;
  background-color: #ede8ff !important;
  background-image: none !important;
  color: #2b0e8a !important;
  -webkit-text-fill-color: #2b0e8a !important;
}

/* About studio card — white CTA on dark purple card */
.frameflow-light.home-page .section-about-us .col-left a.tf-btn.ff-btn-white:not(.tf-btn-2):not(.style-outline),
.frameflow-light.home-page .ff-about-studio-card a.tf-btn.ff-btn-white:not(.tf-btn-2):not(.style-outline) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #ffffff !important;
  color: #13072d !important;
  -webkit-text-fill-color: #13072d !important;
  box-shadow: 0 8px 22px -10px rgba(19, 7, 45, 0.35) !important;
}

.frameflow-light.home-page .section-about-us .col-left a.tf-btn.ff-btn-white:not(.tf-btn-2):not(.style-outline):hover,
.frameflow-light.home-page .ff-about-studio-card a.tf-btn.ff-btn-white:not(.tf-btn-2):not(.style-outline):hover {
  background: #f4f1fb !important;
  background-color: #f4f1fb !important;
  background-image: none !important;
  color: #13072d !important;
  -webkit-text-fill-color: #13072d !important;
}

/* Featured pricing (Standard) — white CTA on dark card */
.frameflow-light .ff-pricing-plan--featured .ff-pricing-plan__cta,
.frameflow-light .ff-pricing-plan--featured a.tf-btn.ff-pricing-plan__cta {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #211247 !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow:
    0 10px 24px -10px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.frameflow-light .ff-pricing-plan--featured .ff-pricing-plan__cta:hover,
.frameflow-light .ff-pricing-plan--featured a.tf-btn.ff-pricing-plan__cta:hover {
  background: #f8f7fc !important;
  background-color: #f8f7fc !important;
  background-image: none !important;
  color: #211247 !important;
  box-shadow:
    0 14px 28px -10px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-1px);
}

/* ── Dark brand sections ───────────────────────────────────── */
.frameflow-light .ff-home-motto,
.frameflow-light.home-page .ff-home-motto,
.frameflow-light.ff-about-page .ff-home-motto.ff-about-motto,
.ff-home-motto {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
  border-block: none !important;
}

.frameflow-light.home-page .ff-stats-dark,
.frameflow-light .ff-stats-dark {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
}

.frameflow-light.home-page .ff-working-process,
.frameflow-light .ff-working-process {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
}

.frameflow-light.home-page .ff-studio {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
}

.frameflow-light .ff-cta-department,
.frameflow-light.home-page .ff-cta-department {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
}

.frameflow-light .ff-services-pricing-teaser,
.frameflow-light.home-page .ff-services-pricing-teaser {
  background: linear-gradient(180deg, #ffffff 0%, #f8f6fc 100%) !important;
  background-color: #fff !important;
}

.frameflow-light .ff-services-pricing-teaser__inner {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
}

/* Trust band & footer */
.ff-trust-band__inner,
.frameflow-light.home-page .ff-trust-band__inner,
.frameflow-light.home-page .section-hero--frameflow .hero-trust-wrap .ff-trust-band__inner {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
}

.frameflow-light.home-page .ff-site-footer__body,
.frameflow-light .ff-site-footer__body {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
}

.frameflow-light .ff-mobile-cta {
  background: rgba(33, 18, 71, 0.94) !important;
}

/* Featured pricing card */
.frameflow-light .ff-pricing-plan--featured,
.frameflow-light.home-page .ff-pricing-plan--featured {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
}

/* Portfolio active filters only — hover uses light pill in portfolio.css */
.frameflow-light .portfolio-filters .filter-btn.active,
.frameflow-light .portfolio-subfilters .subfilter-btn.active,
.frameflow-light.ff-portfolio-page .portfolio-filters .filter-btn.active,
.frameflow-light.ff-portfolio-page .portfolio-subfilters .subfilter-btn.active {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
  background-image: var(--ff-brand-gradient) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent !important;
}

/* Inner page heroes with brand panels */
.frameflow-light.ff-about-page .ff-about-hero__visual,
.frameflow-light.ff-services-page .ff-services-hero__visual,
.frameflow-light.ff-portfolio-page .ff-portfolio-hero__visual,
.frameflow-light.ff-contact-page .ff-contact-hero__visual {
  background: var(--ff-brand-gradient) !important;
  background-color: #432691 !important;
}

/* Accent links & focus */
.frameflow-light a:hover,
.frameflow-light .link-underline.link1:hover {
  color: #432691;
}

.frameflow-light .form-contact input:focus-visible,
.frameflow-light .ff-contact-form input:focus-visible,
.frameflow-light .ff-contact-form textarea:focus-visible,
.frameflow-light .hero-contact-form input:focus-visible,
.frameflow-light .hero-contact-form textarea:focus-visible {
  outline-color: #432691 !important;
}

/*
 * Final override — white CTAs on dark purple panels.
 * Uses .ff-btn-on-dark / .ff-btn-white (excluded from purple gradient above)
 * plus container selectors so both primary + secondary stay readable.
 */
.frameflow-light a.tf-btn.ff-btn-on-dark,
.frameflow-light a.tf-btn-2.ff-btn-on-dark,
.frameflow-light a.tf-btn.ff-btn-white,
.frameflow-light button.tf-btn.ff-btn-on-dark,
.frameflow-light button.tf-btn.ff-btn-white,
.frameflow-light .ff-services-hero__actions .tf-btn,
.frameflow-light .ff-services-hero__actions .tf-btn-2,
.frameflow-light .ff-about-hero__actions .tf-btn,
.frameflow-light .ff-about-hero__actions .tf-btn-2,
.frameflow-light .ff-portfolio-hero__actions .tf-btn,
.frameflow-light .ff-portfolio-hero__actions .tf-btn-2,
.frameflow-light .ff-contact-hero__actions .tf-btn,
.frameflow-light .ff-contact-hero__actions .tf-btn-2,
.frameflow-light .ff-services-pricing-teaser__actions .tf-btn,
.frameflow-light .ff-services-pricing-teaser__actions .tf-btn-2,
.frameflow-light .ff-studio-spotlight__actions .tf-btn,
.frameflow-light .ff-studio-spotlight__actions .tf-btn-2,
.frameflow-light .ff-cta-department .tf-btn,
.frameflow-light .ff-cta-department .tf-btn-2,
.frameflow-light .ff-local-studio__actions .tf-btn,
.frameflow-light .ff-local-studio__actions .tf-btn-2,
.frameflow-light .ff-motion-team-extension .tf-btn,
.frameflow-light .ff-motion-team-extension .tf-btn-2,
.frameflow-light .ff-about-talent .tf-btn,
.frameflow-light .ff-about-talent .tf-btn-2,
.frameflow-light .ff-pricing-custom__actions .tf-btn,
.frameflow-light .ff-pricing-custom__actions .tf-btn-2,
.frameflow-light .section-about-us .col-left .tf-btn,
.frameflow-light .ff-about-studio-card .tf-btn,
.frameflow-light .ff-not-found__actions .tf-btn,
.frameflow-light .ff-not-found__actions .tf-btn-2,
.frameflow-light .ff-pricing-plan--featured .ff-pricing-plan__cta,
.frameflow-light .ff-pricing-plan--featured a.tf-btn.ff-pricing-plan__cta {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #432692 !important;
  -webkit-text-fill-color: #432692 !important;
  border: none !important;
  box-shadow: 0 10px 24px -12px rgba(19, 7, 45, 0.35) !important;
  font-weight: 700 !important;
}

.frameflow-light a.tf-btn.ff-btn-on-dark:hover,
.frameflow-light a.tf-btn-2.ff-btn-on-dark:hover,
.frameflow-light a.tf-btn.ff-btn-white:hover,
.frameflow-light button.tf-btn.ff-btn-on-dark:hover,
.frameflow-light button.tf-btn.ff-btn-white:hover,
.frameflow-light .ff-services-hero__actions .tf-btn:hover,
.frameflow-light .ff-services-hero__actions .tf-btn-2:hover,
.frameflow-light .ff-about-hero__actions .tf-btn:hover,
.frameflow-light .ff-about-hero__actions .tf-btn-2:hover,
.frameflow-light .ff-portfolio-hero__actions .tf-btn:hover,
.frameflow-light .ff-portfolio-hero__actions .tf-btn-2:hover,
.frameflow-light .ff-contact-hero__actions .tf-btn:hover,
.frameflow-light .ff-contact-hero__actions .tf-btn-2:hover,
.frameflow-light .ff-services-pricing-teaser__actions .tf-btn:hover,
.frameflow-light .ff-services-pricing-teaser__actions .tf-btn-2:hover,
.frameflow-light .ff-studio-spotlight__actions .tf-btn:hover,
.frameflow-light .ff-studio-spotlight__actions .tf-btn-2:hover,
.frameflow-light .ff-cta-department .tf-btn:hover,
.frameflow-light .ff-cta-department .tf-btn-2:hover,
.frameflow-light .ff-local-studio__actions .tf-btn:hover,
.frameflow-light .ff-local-studio__actions .tf-btn-2:hover,
.frameflow-light .ff-motion-team-extension .tf-btn:hover,
.frameflow-light .ff-motion-team-extension .tf-btn-2:hover,
.frameflow-light .ff-about-talent .tf-btn:hover,
.frameflow-light .ff-about-talent .tf-btn-2:hover,
.frameflow-light .ff-pricing-custom__actions .tf-btn:hover,
.frameflow-light .ff-pricing-custom__actions .tf-btn-2:hover,
.frameflow-light .section-about-us .col-left .tf-btn:hover,
.frameflow-light .ff-about-studio-card .tf-btn:hover,
.frameflow-light .ff-not-found__actions .tf-btn:hover,
.frameflow-light .ff-not-found__actions .tf-btn-2:hover,
.frameflow-light .ff-pricing-plan--featured .ff-pricing-plan__cta:hover,
.frameflow-light .ff-pricing-plan--featured a.tf-btn.ff-pricing-plan__cta:hover {
  background: #ede8ff !important;
  background-color: #ede8ff !important;
  background-image: none !important;
  color: #2b0e8a !important;
  -webkit-text-fill-color: #2b0e8a !important;
}