/* =============================================================================
   Frameflow Creatives — Brand Polish Layer
   -----------------------------------------------------------------------------
   Purpose:
   1. Lock the site to the EXACT Brand Guidelines 2026 palette.
   2. Propagate the Frameflow Creatives "chrome" (sticky header, footer CTA card,
      section heads, light/dark rhythm, premium buttons) to every inner page
      via the `ff-cl-page` body class. The home page keeps its own approved
      design (incl. the protected hero) and is intentionally NOT scoped here.

   Brand palette (per PDF):
     Primary   #13072D  (headings)
     Secondary #432692  (buttons / CTA / accents)
     Accent    #AB05E4  (emphasis)
     Body      #232323  (paragraph text)
   Type: Inter (headings) · Manrope (body)

   Loaded LAST in <head> so it wins over page-level inline <style> blocks.
   ========================================================================== */

:root {
  /* Brand Guidelines 2026 tokens */
  --ff-indigo: #13072D;
  --ff-purple: #432692;
  --ff-magenta: #AB05E4;
  --ff-ink: #232323;
  --ff-white: #FFFFFF;
  --ff-indigo-2: #1C0E3D;
  --ff-indigo-3: #241452;
  --ff-font-heading: "Inter", sans-serif;
  --ff-font-body: "Manrope", sans-serif;
  /* Legacy theme aliases — PDF brand: Inter (headings) · Manrope (body) */
  --font-main: var(--ff-font-heading);
  --font-body: var(--ff-font-body);
  --font-heading: var(--ff-font-heading);
  --font_instrument: var(--ff-font-heading);

  /* Reusable brand tokens (aliases) */
  --ff-primary: var(--ff-indigo);
  --ff-secondary: var(--ff-purple);
  --ff-accent: var(--ff-magenta);
  --ff-body: var(--ff-ink);
  --ff-ink-900: #0f0826;
  --ff-grad-cta: linear-gradient(135deg, #432692 0%, #7a23c8 55%, #ab05e4 100%);
  --ff-grad-cta-hover: linear-gradient(135deg, #4d2ba6 0%, #8a2ad6 55%, #b81ef0 100%);
  --ff-grad-text: linear-gradient(120deg, #13072d 0%, #432692 55%, #ab05e4 110%);
  --ff-grad-dark: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(171, 5, 228, 0.28) 0%, transparent 55%),
                  radial-gradient(ellipse 60% 70% at 0% 100%, rgba(67, 38, 146, 0.55) 0%, transparent 52%),
                  linear-gradient(135deg, #160a33 0%, #2a1366 45%, #432692 120%);
  --ff-dark-bg: #160a33;
  --ff-on-dark-eyebrow: #c46cf2;
  --ff-radius-lg: 22px;
  --ff-radius-md: 16px;
  --ff-shadow-sm: 0 4px 14px -6px rgba(19, 7, 45, 0.14);
  --ff-shadow-md: 0 18px 44px -22px rgba(19, 7, 45, 0.45);
  --ff-shadow-lg: 0 28px 64px -28px rgba(19, 7, 45, 0.55);

  /* Align global brand variables to the exact palette (cascades to all pages;
     home hero uses literal colors so it stays untouched). */
  --heading: #13072D;
  --primary: #13072D;
  --text-body: #232323;
  --brand: #432692;
  --brand-accent: #AB05E4;
  --accent-lime: #AB05E4; /* retire off-brand lime accent */
}

/* -----------------------------------------------------------------------------
   Site-wide typography — Client PDF brand: Inter (headings) · Manrope (body)
   -------------------------------------------------------------------------- */
.frameflow-light {
  font-family: var(--ff-font-body);
}

.frameflow-light h1,
.frameflow-light h2,
.frameflow-light h3,
.frameflow-light h4,
.frameflow-light h5,
.frameflow-light h6,
.frameflow-light .h1,
.frameflow-light .h2,
.frameflow-light .h3,
.frameflow-light .h4,
.frameflow-light .h5,
.frameflow-light .h6,
.frameflow-light .heading-title,
.frameflow-light .title,
.frameflow-light .box-title,
.frameflow-light .widget-title,
.frameflow-light .text-display-1,
.frameflow-light .text-display-2,
.frameflow-light .font-main,
.frameflow-light .tf-btn,
.frameflow-light .tf-btn-2 {
  font-family: var(--ff-font-heading);
}

.frameflow-light .font-body,
.frameflow-light p,
.frameflow-light .text,
.frameflow-light .text-body-2,
.frameflow-light .text-body-3,
.frameflow-light li,
.frameflow-light label,
.frameflow-light input,
.frameflow-light select,
.frameflow-light textarea {
  font-family: var(--ff-font-body);
}

/* -----------------------------------------------------------------------------
   1. Accessibility — visible, on-brand focus states for keyboard users
   -------------------------------------------------------------------------- */
.frameflow-light a:focus-visible,
.frameflow-light button:focus-visible,
.frameflow-light input:focus-visible,
.frameflow-light select:focus-visible,
.frameflow-light textarea:focus-visible,
.frameflow-light .tf-btn:focus-visible,
.frameflow-light .tf-btn-2:focus-visible,
.frameflow-light .ff-cl-cta:focus-visible {
  outline: 3px solid rgba(171, 5, 228, 0.55);
  outline-offset: 2px;
  border-radius: 8px;
}

/* =============================================================================
   INNER PAGES ONLY  ·  scoped to .ff-cl-page (added to every live inner page)
   ========================================================================== */

/* Brand tokens reasserted on inner pages (defensive against page inline styles) */
.frameflow-light.ff-cl-page {
  --heading: #13072D;
  --primary: #13072D;
  --text-body: #232323;
  --brand: #432692;
  --brand-accent: #AB05E4;
}

/* -----------------------------------------------------------------------------
   2. Header — Frameflow Creatives sticky pill header (home + inner pages)
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .tf-header--cl,
.frameflow-light.home-page .tf-header--cl {
  position: sticky;
  top: 0;
  z-index: 200;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.92) 70%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.frameflow-light.ff-cl-page .tf-header--cl .header-inner,
.frameflow-light.home-page .tf-header--cl .header-inner {
  background: radial-gradient(ellipse 80% 100% at 0% 50%, rgba(171, 5, 228, 0.05) 0%, transparent 55%),
              linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(245, 244, 248, 0.92) 100%);
  border: 1px solid rgba(67, 38, 146, 0.1);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(19, 7, 45, 0.08);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.frameflow-light.ff-cl-page .tf-header--cl.is-scrolled .header-inner,
.frameflow-light.home-page .tf-header--cl.is-scrolled .header-inner {
  box-shadow: 0 10px 28px rgba(19, 7, 45, 0.14);
}
@media (min-width: 992px) {
  .frameflow-light.ff-cl-page .tf-header--cl .header-inner,
  .frameflow-light.home-page .tf-header--cl .header-inner {
    max-width: min(1120px, 100% - 32px);
    margin-inline: auto;
    padding: 12px 24px;
    min-height: 60px;
  }
  .frameflow-light.ff-cl-page .tf-header--cl .item-link,
  .frameflow-light.home-page .tf-header--cl .item-link {
    color: var(--heading);
    -webkit-text-fill-color: var(--heading);
    background-image: none;
  }
  .frameflow-light.ff-cl-page .tf-header--cl .item-link:hover,
  .frameflow-light.ff-cl-page .tf-header--cl .item-link.active,
  .frameflow-light.home-page .tf-header--cl .item-link:hover,
  .frameflow-light.home-page .tf-header--cl .item-link.active {
    color: var(--brand);
    -webkit-text-fill-color: var(--brand);
    background-image: none;
  }
  .frameflow-light.ff-cl-page .tf-header--cl .header-phone,
  .frameflow-light.home-page .tf-header--cl .header-phone {
    color: var(--heading);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(67, 38, 146, 0.1);
    border-radius: 999px;
    padding: 8px 16px;
  }
  .frameflow-light.ff-cl-page .tf-header--cl .header-phone .icon,
  .frameflow-light.home-page .tf-header--cl .header-phone .icon {
    color: var(--brand);
  }
  .frameflow-light.ff-cl-page .tf-header--cl .header-phone:hover,
  .frameflow-light.home-page .tf-header--cl .header-phone:hover {
    color: var(--brand);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(67, 38, 146, 0.22);
  }
  .frameflow-light.ff-cl-page .tf-header--cl .logo-site img,
  .frameflow-light.home-page .tf-header--cl .logo-site img {
    height: 32px;
    max-width: min(190px, 22vw);
  }
}
.frameflow-light.ff-cl-page .tf-header--cl .mobile-menu,
.frameflow-light.home-page .tf-header--cl .mobile-menu {
  color: var(--heading);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(67, 38, 146, 0.12);
}

/* -----------------------------------------------------------------------------
   3. Buttons — exact-brand premium CTAs on inner pages
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .tf-btn,
.frameflow-light.ff-cl-page .header-cta {
  background-color: #432692;
  background-image: var(--ff-grad-cta);
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset,
              0 2px 4px rgba(19, 7, 45, 0.12),
              0 12px 26px -10px rgba(67, 38, 146, 0.5);
}
.frameflow-light.ff-cl-page .tf-btn:hover,
.frameflow-light.ff-cl-page .header-cta:hover {
  background-image: var(--ff-grad-cta-hover);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
              0 6px 12px rgba(19, 7, 45, 0.16),
              0 18px 38px -12px rgba(171, 5, 228, 0.42);
}
.frameflow-light.ff-cl-page .tf-btn-2 {
  background: #fff;
  border: 1px solid rgba(67, 38, 146, 0.18);
  color: var(--primary);
  border-radius: 12px;
  box-shadow: var(--ff-shadow-sm);
}
.frameflow-light.ff-cl-page .tf-btn-2:hover {
  border-color: rgba(171, 5, 228, 0.4);
  color: var(--brand);
  background: #faf8ff;
}

/* Carousel nav — hover overlay color only (brand purple; default button unchanged) */
.frameflow-light.ff-cl-page .group-btn-slider .nav-prev-swiper::before,
.frameflow-light.ff-cl-page .group-btn-slider .nav-next-swiper::before {
  background-color: #432692;
  background-image:
    radial-gradient(100% 100% at 30% 8%, rgba(255, 255, 255, 0.22) 0%, transparent 52%),
    linear-gradient(168deg, #5840b8 0%, #432692 48%, #211247 100%);
}
.frameflow-light.ff-cl-page .group-btn-slider .nav-prev-swiper:hover,
.frameflow-light.ff-cl-page .group-btn-slider .nav-next-swiper:hover {
  color: #fff;
}
.frameflow-light.ff-cl-page .group-btn-slider .nav-prev-swiper:hover::before,
.frameflow-light.ff-cl-page .group-btn-slider .nav-next-swiper:hover::before {
  background-color: #4d2c9e;
  background-image:
    radial-gradient(100% 100% at 30% 8%, rgba(255, 255, 255, 0.28) 0%, transparent 52%),
    linear-gradient(168deg, #6d28d9 0%, #432692 42%, #211247 100%);
}

/* -----------------------------------------------------------------------------
   4. Typography — brand gradient headline text on inner pages
   -------------------------------------------------------------------------- */
/* Solid brand ink on light surfaces — match home section headings (#13072D) */
.frameflow-light.ff-cl-page .text-gradient-1,
.frameflow-light.ff-cl-page .text-gradient-2,
.frameflow-light.ff-cl-page .text-gradient-3,
.frameflow-light.ff-cl-page .ff-heading-brand,
.frameflow-light.ff-cl-page .heading-title.text-gradient-1,
.frameflow-light.ff-cl-page .heading-title.text-gradient-2,
.frameflow-light.ff-cl-page .heading-title.text-gradient-3 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--ff-indigo, #13072d) !important;
  -webkit-text-fill-color: var(--ff-indigo, #13072d) !important;
}

/* Eyebrow labels — consistent brand pill across inner page section heads */
.frameflow-light.ff-cl-page .heading-sub,
.frameflow-light.ff-cl-page .heading-section .heading-sub {
  display: inline-block;
  color: var(--brand);
  font-family: var(--ff-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   5. Inner-page hero rhythm (section-hero v1 / v2)
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .section-hero.v1,
.frameflow-light.ff-cl-page .section-hero.v2 {
  padding-top: clamp(60px, 9vw, 120px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.frameflow-light.ff-cl-page .section-hero .content-wrap .text {
  color: var(--secondary);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   6. Section rhythm + light/dark banding for inner pages
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .ff-section--light {
  background: #faf9fc;
}
.frameflow-light.ff-cl-page .ff-section--dark {
  background: var(--ff-dark-bg);
  color: rgba(255, 255, 255, 0.88);
}
.frameflow-light.ff-cl-page .ff-section--dark .heading-title,
.frameflow-light.ff-cl-page .ff-section--dark .ff-cl-section-head__title,
.frameflow-light.ff-cl-page .ff-section--dark .ff-ref-title {
  color: #fff;
}
.frameflow-light.ff-cl-page .ff-section--dark .heading-sub,
.frameflow-light.ff-cl-page .ff-section--dark .ff-cl-section-head__eyebrow,
.frameflow-light.ff-cl-page .ff-section--dark .ff-ref-eyebrow {
  color: var(--ff-on-dark-eyebrow);
}
.frameflow-light.ff-cl-page .ff-section--dark .ff-cl-section-head__desc {
  color: rgba(255, 255, 255, 0.68);
}

/* -----------------------------------------------------------------------------
   7. Card system — consistent radius / shadow / hover across inner components
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .box-contact-item,
.frameflow-light.ff-cl-page .ff-service-lists .service-item,
.frameflow-light.ff-cl-page .features-item,
.frameflow-light.ff-cl-page .box-white {
  border-radius: var(--ff-radius-md);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.frameflow-light.ff-cl-page .box-contact-item:hover,
.frameflow-light.ff-cl-page .features-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--ff-shadow-md);
}
.frameflow-light.ff-cl-page .box-contact-item i {
  color: var(--brand);
}

/* -----------------------------------------------------------------------------
   8. Footer — premium Frameflow Creatives CTA card (base markup, brand colors)
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .ff-site-footer__cta-wrap {
  padding: 0 0 64px;
  background: linear-gradient(180deg, #eeecf3 0%, #e8e4f0 100%);
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: clamp(32px, 5vw, 52px);
  border: none;
  border-radius: clamp(20px, 3vw, 30px);
  background: var(--ff-grad-dark);
  box-shadow: var(--ff-shadow-lg);
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-card::after {
  display: none;
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-eyebrow {
  color: var(--ff-on-dark-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-title {
  color: #fff;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-title span {
  display: block;
  color: var(--ff-on-dark-eyebrow);
  background: none;
  -webkit-text-fill-color: var(--ff-on-dark-eyebrow);
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-actions .tf-btn-2 {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-actions .tf-btn-2:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   9. Forms — unify legacy form-contact look with the modern ff-contact-form
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .form-contact input,
.frameflow-light.ff-cl-page .form-contact textarea,
.frameflow-light.ff-cl-page .ff-contact-form input,
.frameflow-light.ff-cl-page .ff-contact-form textarea,
.frameflow-light.ff-cl-page .form-contact .nice-select {
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.frameflow-light.ff-cl-page .form-contact input:focus,
.frameflow-light.ff-cl-page .form-contact textarea:focus,
.frameflow-light.ff-cl-page .ff-contact-form input:focus,
.frameflow-light.ff-cl-page .ff-contact-form textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(67, 38, 146, 0.12);
}

/* -----------------------------------------------------------------------------
   10. Portfolio filter buttons — brand pills (legacy filter-btn markup)
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .filter-btn,
.frameflow-light.ff-cl-page .portfolio-filters .filter-btn {
  border-radius: 999px;
  border: 1px solid rgba(67, 38, 146, 0.16);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.frameflow-light.ff-cl-page .filter-btn.active,
.frameflow-light.ff-cl-page .filter-btn:hover {
  background: var(--ff-grad-cta);
  border-color: transparent;
  color: #fff;
}

/* -----------------------------------------------------------------------------
   11. Accordion (FAQ) — brand purple rows + toggles
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .accordion-asked-item,
.frameflow-light.ff-cl-page .accordion-collapse {
  border-radius: var(--ff-radius-md);
}

.frameflow-light.home-page .accordion-asked-item,
.frameflow-light.ff-service-page .accordion-asked-item,
.frameflow-light.home-page.ff-service-page .accordion-asked-item {
  background:
    radial-gradient(70% 70% at 0% 0%, rgba(67, 38, 146, 0.08) 0%, transparent 55%),
    radial-gradient(55% 55% at 100% 100%, rgba(117, 85, 245, 0.1) 0%, transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f5f2fb 45%, #efeaf8 100%) !important;
  border: 1px solid rgba(67, 38, 146, 0.12) !important;
}

.frameflow-light.home-page .accordion-asked .accordion-button,
.frameflow-light.ff-service-page .accordion-asked .accordion-button {
  color: #211247 !important;
}

.frameflow-light.ff-cl-page .accordion-button:not(.collapsed),
.frameflow-light.home-page .accordion-asked .accordion-button:hover,
.frameflow-light.home-page .accordion-asked .accordion-button:not(.collapsed),
.frameflow-light.ff-service-page .accordion-asked .accordion-button:hover,
.frameflow-light.ff-service-page .accordion-asked .accordion-button:not(.collapsed) {
  color: #432692 !important;
}

.frameflow-light.home-page .accordion-asked .accordion-button span,
.frameflow-light.home-page .accordion-asked .accordion-button .right-icon,
.frameflow-light.ff-service-page .accordion-asked .accordion-button span,
.frameflow-light.ff-service-page .accordion-asked .accordion-button .right-icon,
.frameflow-light.home-page.ff-service-page .accordion-asked .accordion-button span {
  background-color: #432692 !important;
  background-image:
    radial-gradient(100% 100% at 30% 8%, rgba(255, 255, 255, 0.22) 0%, transparent 52%),
    linear-gradient(168deg, #432692 0%, #342060 42%, #211247 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(19, 7, 45, 0.28),
    0 4px 12px rgba(33, 18, 71, 0.22) !important;
}

.frameflow-light.home-page .accordion-asked .accordion-button span::before,
.frameflow-light.home-page .accordion-asked .accordion-button span::after,
.frameflow-light.ff-service-page .accordion-asked .accordion-button span::before,
.frameflow-light.ff-service-page .accordion-asked .accordion-button span::after {
  background-color: #ffffff !important;
}

/* Pricing plan list: guarantee all bullet points have visible icons and identical alignment */
.frameflow-light .ff-pricing-plan__list li.is-or,
.ff-pricing-plan__list li.is-or {
  font-size: 13px !important;
  color: var(--text-body) !important;
  opacity: 1 !important;
}

.frameflow-light .ff-pricing-plan__list li.is-or .icon,
.ff-pricing-plan__list li.is-or .icon {
  visibility: visible !important;
  display: inline-flex !important;
}

.frameflow-light .ff-pricing-plan__list li.is-or .or,
.ff-pricing-plan__list li.is-or .or {
  font-weight: inherit !important;
  font-size: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: inherit !important;
  margin-right: 0 !important;
}

.frameflow-light .ff-pricing-plan--featured .ff-pricing-plan__list li.is-or,
.ff-pricing-plan--featured .ff-pricing-plan__list li.is-or {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* -----------------------------------------------------------------------------
   12. Legal / prose pages — readable, on-brand typographic rhythm
   -------------------------------------------------------------------------- */
.frameflow-light.ff-legal-page {
  background: linear-gradient(180deg, #faf9fc 0%, #fff 20%, #fff 100%);
}

.frameflow-light.ff-legal-page .section-hero.v1.ff-legal-hero {
  min-height: unset !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.frameflow-light.ff-legal-page .ff-legal-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 12px 16px 0;
  margin-bottom: 36px;
}

.frameflow-light.ff-legal-page .ff-legal-hero__bg {
  position: absolute;
  inset: 12px 16px 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 70% at 92% 8%, rgba(188, 40, 245, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 50% 60% at 4% 88%, rgba(117, 85, 245, 0.16) 0%, transparent 55%),
    linear-gradient(155deg, #f5f1ff 0%, #ebe4ff 42%, #f8f6fc 100%);
  border: 1px solid rgba(117, 85, 245, 0.12);
  box-shadow: 0 18px 48px -28px rgba(30, 21, 80, 0.28);
}

.frameflow-light.ff-legal-page .ff-legal-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(117, 85, 245, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 85, 245, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 20%, transparent 100%);
  opacity: 0.65;
}

.frameflow-light.ff-legal-page .ff-legal-hero .container {
  position: relative;
  z-index: 1;
}

.frameflow-light.ff-legal-page .ff-legal-hero__content {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 20px 52px;
}

.frameflow-light.ff-legal-page .ff-legal-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(30, 21, 80, 0.52);
}

.frameflow-light.ff-legal-page .ff-legal-hero__breadcrumb a {
  color: var(--brand);
  text-decoration: none;
  transition: color 0.2s ease;
}

.frameflow-light.ff-legal-page .ff-legal-hero__breadcrumb a:hover {
  color: #5a2bf0;
}

.frameflow-light.ff-legal-page .ff-legal-hero__breadcrumb-sep {
  color: rgba(30, 21, 80, 0.28);
}

.frameflow-light.ff-legal-page .ff-legal-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a2bf0;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(117, 85, 245, 0.18);
  box-shadow: 0 8px 24px -16px rgba(90, 43, 240, 0.35);
}

.frameflow-light.ff-legal-page .ff-legal-hero__badge .icon {
  font-size: 14px;
}

.frameflow-light.ff-legal-page .ff-legal-hero__title {
  margin: 0 0 12px;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1e1550;
}

.frameflow-light.ff-legal-page .ff-legal-hero__meta {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(30, 21, 80, 0.58);
}

.frameflow-light.ff-legal-page .ff-legal-hero__lead {
  margin: 0 auto 28px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(30, 21, 80, 0.72);
}

.frameflow-light.ff-legal-page .ff-legal-hero__highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.frameflow-light.ff-legal-page .ff-legal-hero__highlight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1e1550;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(117, 85, 245, 0.12);
}

.frameflow-light.ff-legal-page .ff-legal-hero__highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 13px;
  color: #7555f5;
  background: rgba(117, 85, 245, 0.1);
}

.frameflow-light.ff-legal-page .privacy-content {
  padding-top: 16px;
  padding-bottom: 56px;
  max-width: 860px;
}

.frameflow-light.ff-cl-page .privacy-content h2 {
  color: var(--heading);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  letter-spacing: -0.02em;
}

.frameflow-light.ff-cl-page .privacy-content h3 {
  color: var(--heading);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}
.frameflow-light.ff-cl-page .privacy-content p,
.frameflow-light.ff-cl-page .privacy-content li {
  color: var(--text-body);
  line-height: 1.8;
}
.frameflow-light.ff-cl-page .privacy-content a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer legal links — background-clip:text + transparent fill breaks clicks in WebKit */
.frameflow-light .ff-site-footer__legal a {
  color: rgba(245, 244, 248, 0.55) !important;
  -webkit-text-fill-color: currentColor !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.frameflow-light .ff-site-footer__legal a:hover {
  color: rgba(245, 244, 248, 0.95) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Header nav — gradient text + hover overlays can block clicks in WebKit */
.frameflow-light .tf-header .nav-menu-main .item-link {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
.frameflow-light .menu-item.has-child::after {
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   13. Links & misc accents — brand-true
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .text-brand {
  color: var(--brand);
}
.frameflow-light.ff-cl-page .link-underline:hover {
  color: var(--brand);
}

/* -----------------------------------------------------------------------------
   14. Responsive safety nets
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .frameflow-light.ff-cl-page .ff-site-footer__cta-card {
    padding: 28px;
  }
}
@media (max-width: 575px) {
  .frameflow-light.ff-cl-page .section-hero.v1,
  .frameflow-light.ff-cl-page .section-hero.v2 {
    padding-top: 96px;
  }
  .frameflow-light.ff-legal-page .ff-legal-hero__content {
    padding: 32px 12px 40px;
  }
  .frameflow-light.ff-legal-page .ff-legal-hero__highlights {
    flex-direction: column;
    align-items: stretch;
  }
  .frameflow-light.ff-legal-page .ff-legal-hero__highlight {
    justify-content: center;
  }
  .frameflow-light.ff-cl-page .ff-site-footer__cta-actions .tf-btn,
  .frameflow-light.ff-cl-page .ff-site-footer__cta-actions .tf-btn-2 {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frameflow-light.ff-cl-page * {
    scroll-behavior: auto !important;
  }
}

/* Homepage clay overrides removed — restored via home-hero.css + styles.css */

/* SEO content hub & service insights */
.ff-service-insights__list,
.ff-home-insights .tf-grid-layout { list-style: none; }
.ff-service-insights__list { padding: 0; margin: 0; }
.ff-service-insights__list li { margin-bottom: 12px; }
.ff-service-insights__list a { font-weight: 600; text-decoration: underline; }
.ff-article-author { margin: 2rem 0; padding: 1.5rem; border-radius: 12px; background: rgba(30, 21, 80, 0.04); }
.ff-home-insights .tf-grid-layout { gap: 24px; align-items: stretch; }
.ff-home-insights .article-blog { display: flex; flex-direction: column; height: 100%; }
.ff-home-insights .article-blog .blog-image { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.ff-home-insights .article-blog .blog-image picture,
.ff-home-insights .article-blog .blog-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ff-home-insights .article-blog .blog-content { flex: 1; padding-top: 12px; }

/* Home — Resources / blog journal */
.frameflow-light.home-page .ff-blog-journal {
  padding-top: 72px;
  padding-bottom: 80px;
  background: #faf9fd;
  border-top: 1px solid rgba(85, 66, 176, 0.08);
}

.frameflow-light.home-page .ff-blog-journal__grid {
  gap: 28px 22px;
}

@media (min-width: 992px) {
  .frameflow-light.home-page .ff-blog-journal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .frameflow-light.home-page .ff-blog-journal__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.frameflow-light.home-page .ff-blog-journal__card {
  height: 100%;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(85, 66, 176, 0.1);
  background: #fff;
  box-shadow: 0 10px 28px -18px rgba(42, 27, 110, 0.22);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.frameflow-light.home-page .ff-blog-journal__card:hover {
  border-color: rgba(85, 66, 176, 0.22);
  box-shadow: 0 16px 36px -16px rgba(42, 27, 110, 0.28);
  transform: translateY(-2px);
}

.frameflow-light.home-page .ff-blog-journal__media {
  margin-bottom: 14px;
  border-radius: 16px;
}

.frameflow-light.home-page .ff-blog-journal__mobile-cta {
  margin-top: 28px;
  text-align: center;
}

/* ── Hide section label pills entirely (client request) ── */
.heading-sub,
.heading-section .heading-sub,
.heading-section.center .heading-sub,
.frameflow-light.home-page .ff-growth-engine__eyebrow-badge,
.frameflow-light.home-page .ff-blog-journal__eyebrow-badge {
  display: none !important;
}

.section-about-us .col-left .sub .dot,
.ff-hero__badge .dot {
  display: none !important;
}

/* ── Remove decorative divider line under hero headings (client request:
   "yeh line remove krni hy sb jaga sy") ── */
.ff-services-hero__title-accent,
.ff-contact-hero__title-accent,
.ff-portfolio-hero__title-accent,
.ff-about-hero__title-accent,
.ff-motion-team-extension__title-accent {
  display: none !important;
}

/* ── Consistent section-heading size across all service pages
   (client: "font size still same nahi hain, kahe per bary kaee per choty").
   The portfolio heading was 28–40px while other section headings used the
   larger default; unify every service-page section <h2> to one scale. ── */
.frameflow-light.ff-service-page .heading-title.ff-services-heading,
.frameflow-light.ff-motion-page .heading-title.ff-services-heading,
.frameflow-light.ff-video-page .heading-title.ff-services-heading,
.frameflow-light.ff-digital-page .heading-title.ff-services-heading,
.frameflow-light.ff-illustration-page .heading-title.ff-services-heading,
.frameflow-light.ff-service-page #gallery .heading-title,
.frameflow-light.ff-service-page #work-gallery .heading-title {
  font-size: clamp(30px, 3.8vw, 42px) !important;
  line-height: 1.15 !important;
}

/* Title → supporting line: match services hub (was 0 + overlapping fade) */
.frameflow-light.ff-service-page .heading-section .heading-title.ff-services-heading,
.frameflow-light.ff-motion-page .heading-section .heading-title.ff-services-heading,
.frameflow-light.ff-video-page .heading-section .heading-title.ff-services-heading,
.frameflow-light.ff-digital-page .heading-section .heading-title.ff-services-heading,
.frameflow-light.ff-illustration-page .heading-section .heading-title.ff-services-heading {
  margin: 0 0 16px !important;
}

.frameflow-light.ff-service-page .heading-section > p,
.frameflow-light.ff-motion-page .heading-section > p,
.frameflow-light.ff-video-page .heading-section > p,
.frameflow-light.ff-digital-page .heading-section > p,
.frameflow-light.ff-illustration-page .heading-section > p {
  margin-top: 0 !important;
}

.frameflow-light.ff-service-page .heading-section .heading-sub,
.frameflow-light.ff-motion-page .heading-section .heading-sub,
.frameflow-light.ff-video-page .heading-section .heading-sub,
.frameflow-light.ff-digital-page .heading-section .heading-sub,
.frameflow-light.ff-illustration-page .heading-section .heading-sub {
  margin-bottom: 12px;
}

/* Explore-more heading stack (top pad restored after collapse rules below) */
.ff-service-insights .heading-section {
  margin-bottom: clamp(40px, 4.5vw, 64px) !important;
}

.ff-service-insights .heading-section > p {
  margin-top: 14px !important;
  max-width: 620px;
  margin-inline: auto;
}

/* ── Aug 2026 client pass: headings, spacing, wraps, counter hover ── */

/* Unified section headings — solid navy (match Team Extension), not purple fill */
.frameflow-light .heading-title,
.frameflow-light .heading-title.ff-services-heading,
.frameflow-light .heading-title.text-gradient-3,
.frameflow-light .heading-title.text-gradient-2,
.frameflow-light.home-page #pricing .heading-title,
.frameflow-light .ff-pricing-dark .heading-title,
.frameflow-light .section-pricing .heading-title,
.frameflow-light .ff-motion-pricing .heading-title,
.frameflow-light .ff-ref-title {
  font-size: clamp(30px, 3.8vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  color: #13072d !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #13072d !important;
}

/* Keep intentional accent words (e.g. “Your Team”) as brand gradient */
.frameflow-light .ff-motion-team-extension__accent,
.frameflow-light .heading-title .ff-motion-team-extension__accent {
  background: linear-gradient(135deg, #7555f5 0%, #bc28f5 100%) !important;
  background-image: linear-gradient(135deg, #7555f5 0%, #bc28f5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Balanced line breaks — avoid lonely last words */
.frameflow-light .heading-title,
.frameflow-light h1,
.frameflow-light h2,
.frameflow-light .ff-motion-ondemand__lead,
.frameflow-light .ff-contact-hero__lead,
.frameflow-light .ff-services-hero__lead,
.frameflow-light .content-wrap > .text {
  text-wrap: balance;
}

.frameflow-light p.text-secondary,
.frameflow-light .ff-motion-ondemand__lead,
.frameflow-light .heading-section > p {
  text-wrap: pretty;
}

/* ── Sitewide section rhythm (match home about / image-1) ──
   Desktop ~120px · mid ~80px · tablet ~60px · mobile ~50px */
.frameflow-light .flat-spacing {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

@media (max-width: 1439px) {
  .frameflow-light .flat-spacing {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

@media (max-width: 991px) {
  .frameflow-light .flat-spacing {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

@media (max-width: 767px) {
  .frameflow-light .flat-spacing {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* Contact band — keep bottom pad even when top is collapsed */
.frameflow-light .ff-contact-section.flat-spacing,
.frameflow-light.home-page .ff-contact-section.flat-spacing,
.frameflow-light.ff-services-page .ff-contact-section.flat-spacing,
.frameflow-light.ff-service-page .ff-contact-section.flat-spacing {
  padding-bottom: 120px !important;
}

@media (max-width: 1439px) {
  .frameflow-light .ff-contact-section.flat-spacing,
  .frameflow-light.home-page .ff-contact-section.flat-spacing,
  .frameflow-light.ff-services-page .ff-contact-section.flat-spacing,
  .frameflow-light.ff-service-page .ff-contact-section.flat-spacing {
    padding-bottom: 80px !important;
  }
}

@media (max-width: 991px) {
  .frameflow-light .ff-contact-section.flat-spacing,
  .frameflow-light.home-page .ff-contact-section.flat-spacing,
  .frameflow-light.ff-services-page .ff-contact-section.flat-spacing,
  .frameflow-light.ff-service-page .ff-contact-section.flat-spacing {
    padding-bottom: 60px !important;
  }
}

@media (max-width: 767px) {
  .frameflow-light .ff-contact-section.flat-spacing,
  .frameflow-light.home-page .ff-contact-section.flat-spacing,
  .frameflow-light.ff-services-page .ff-contact-section.flat-spacing,
  .frameflow-light.ff-service-page .ff-contact-section.flat-spacing {
    padding-bottom: 50px !important;
  }
}

/* pt-0 must always win (prevents 240px double-gaps between sections) */
.frameflow-light .flat-spacing.pt-0,
.frameflow-light.ff-services-page .flat-spacing.pt-0:not(.ff-service-offerings):not(.ff-services-pricing-teaser),
.frameflow-light.ff-service-page .flat-spacing.pt-0,
.frameflow-light.ff-service-page .ff-services-pricing-teaser.pt-0,
.frameflow-light.ff-service-page .section-services-single.pt-0 {
  padding-top: 0 !important;
}

/* Services pages: collapse stacked section tops → one pad between blocks
   (exclude bands that need their own top air) */
.frameflow-light.ff-services-page .flat-spacing + .flat-spacing:not(.ff-motion-team-extension):not(.ff-service-insights):not(.ff-service-offerings):not(.ff-services-pricing-teaser):not(.ff-services-software):not(.section-pricing):not(.ff-motion-pricing):not(.section-testimonials):not(.ff-tes-carousel),
.frameflow-light.ff-service-page .flat-spacing + .flat-spacing:not(.ff-motion-team-extension):not(.ff-service-insights):not(.section-pricing):not(.ff-motion-pricing):not(.section-testimonials):not(.ff-tes-carousel),
.frameflow-light.ff-services-page .box-white + .flat-spacing:not(.ff-motion-team-extension):not(.ff-service-insights):not(.ff-services-pricing-teaser):not(.section-pricing):not(.ff-motion-pricing):not(.section-testimonials):not(.ff-tes-carousel),
.frameflow-light.ff-service-page .box-white + .flat-spacing:not(.ff-motion-team-extension):not(.ff-service-insights):not(.section-pricing):not(.ff-motion-pricing):not(.section-testimonials):not(.ff-tes-carousel),
.frameflow-light.ff-services-page .ff-draft-hidden + .flat-spacing:not(.ff-motion-team-extension):not(.ff-service-insights):not(.section-pricing):not(.ff-motion-pricing):not(.section-testimonials):not(.ff-tes-carousel),
.frameflow-light.ff-service-page .ff-draft-hidden + .flat-spacing:not(.ff-motion-team-extension):not(.ff-service-insights):not(.section-pricing):not(.ff-motion-pricing):not(.section-testimonials):not(.ff-tes-carousel) {
  padding-top: 0 !important;
}

/* Box-white process container: dedicated top & bottom breathing room across all views */
.frameflow-light.ff-services-page .box-white > .section-process.flat-spacing,
.frameflow-light.ff-service-page .box-white > .section-process.flat-spacing,
.frameflow-light .box-white > .section-process.flat-spacing {
  padding-top: clamp(48px, 5.5vw, 72px) !important;
  padding-bottom: clamp(48px, 5.5vw, 72px) !important;
}

/*
 * Services hub: keep lavender under the CTA card so it doesn’t
 * sit on the next (white) section, then a little air before offerings.
 */
.frameflow-light.ff-services-page .section-services.flat-spacing:has(.ff-services-banner) {
  padding-bottom: 56px !important;
}

.frameflow-light.ff-services-page .ff-services-banner {
  margin-bottom: 0;
}

.frameflow-light.ff-services-page .ff-service-offerings.flat-spacing.pt-0 {
  padding-top: 48px !important;
}

@media (max-width: 1439px) {
  .frameflow-light.ff-services-page .section-services.flat-spacing:has(.ff-services-banner) {
    padding-bottom: 48px !important;
  }
  .frameflow-light.ff-services-page .ff-service-offerings.flat-spacing.pt-0 {
    padding-top: 40px !important;
  }
}

@media (max-width: 991px) {
  .frameflow-light.ff-services-page .section-services.flat-spacing:has(.ff-services-banner) {
    padding-bottom: 40px !important;
  }
  .frameflow-light.ff-services-page .ff-service-offerings.flat-spacing.pt-0 {
    padding-top: 36px !important;
  }
}

@media (max-width: 767px) {
  .frameflow-light.ff-services-page .section-services.flat-spacing:has(.ff-services-banner) {
    padding-bottom: 32px !important;
  }
  .frameflow-light.ff-services-page .ff-service-offerings.flat-spacing.pt-0 {
    padding-top: 32px !important;
  }
}

/*
 * Software / projects band:
 * offerings ends with ~80px after the note; software keeps its own top pad
 * so “Industry-standard software” isn’t flush to the section edge.
 */
.frameflow-light.ff-services-page .ff-service-offerings.flat-spacing {
  padding-bottom: 48px !important;
}

.frameflow-light.ff-services-page .ff-services-software.flat-spacing,
.frameflow-light.ff-services-page .ff-services-software.flat-spacing.pt-0,
.frameflow-light.ff-services-page .ff-service-offerings.flat-spacing + .ff-services-software.flat-spacing {
  padding-top: 72px !important;
  padding-bottom: 80px !important;
}

.frameflow-light.ff-services-page .ff-clients-strip.flat-spacing {
  padding-top: 40px !important;
  padding-bottom: 80px !important;
}

/* Pricing teaser + process: space ABOVE the purple box (not inside it) */
.frameflow-light.ff-services-page .section-process.flat-spacing {
  padding-bottom: 72px !important;
}

.frameflow-light.ff-services-page .ff-services-pricing-teaser.flat-spacing,
.frameflow-light.ff-services-page .ff-services-pricing-teaser.flat-spacing.pt-0,
.frameflow-light.ff-services-page .box-white + .ff-services-pricing-teaser.flat-spacing {
  padding-top: 72px !important;
  padding-bottom: 80px !important;
}

@media (max-width: 1439px) {
  .frameflow-light.ff-services-page .ff-service-offerings.flat-spacing {
    padding-bottom: 40px !important;
  }
  .frameflow-light.ff-services-page .ff-services-software.flat-spacing,
  .frameflow-light.ff-services-page .ff-services-software.flat-spacing.pt-0,
  .frameflow-light.ff-services-page .ff-service-offerings.flat-spacing + .ff-services-software.flat-spacing {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .frameflow-light.ff-services-page .ff-clients-strip.flat-spacing {
    padding-top: 32px !important;
    padding-bottom: 64px !important;
  }
  .frameflow-light.ff-services-page .section-process.flat-spacing {
    padding-bottom: 56px !important;
  }
  .frameflow-light.ff-services-page .ff-services-pricing-teaser.flat-spacing,
  .frameflow-light.ff-services-page .ff-services-pricing-teaser.flat-spacing.pt-0,
  .frameflow-light.ff-services-page .box-white + .ff-services-pricing-teaser.flat-spacing {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }
}

@media (max-width: 991px) {
  .frameflow-light.ff-services-page .ff-service-offerings.flat-spacing {
    padding-bottom: 32px !important;
  }
  .frameflow-light.ff-services-page .ff-services-software.flat-spacing,
  .frameflow-light.ff-services-page .ff-services-software.flat-spacing.pt-0,
  .frameflow-light.ff-services-page .ff-service-offerings.flat-spacing + .ff-services-software.flat-spacing {
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }
  .frameflow-light.ff-services-page .ff-clients-strip.flat-spacing {
    padding-top: 24px !important;
    padding-bottom: 48px !important;
  }
  .frameflow-light.ff-services-page .section-process.flat-spacing {
    padding-bottom: 48px !important;
  }
  .frameflow-light.ff-services-page .ff-services-pricing-teaser.flat-spacing,
  .frameflow-light.ff-services-page .ff-services-pricing-teaser.flat-spacing.pt-0,
  .frameflow-light.ff-services-page .box-white + .ff-services-pricing-teaser.flat-spacing {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 767px) {
  .frameflow-light.ff-services-page .ff-service-offerings.flat-spacing {
    padding-bottom: 28px !important;
  }
  .frameflow-light.ff-services-page .ff-services-software.flat-spacing,
  .frameflow-light.ff-services-page .ff-services-software.flat-spacing.pt-0,
  .frameflow-light.ff-services-page .ff-service-offerings.flat-spacing + .ff-services-software.flat-spacing {
    padding-top: 48px !important;
    padding-bottom: 40px !important;
  }
  .frameflow-light.ff-services-page .ff-clients-strip.flat-spacing {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
  }
  .frameflow-light.ff-services-page .section-process.flat-spacing,
  .frameflow-light.ff-service-page .section-process.flat-spacing,
  .frameflow-light .box-white > .section-process.flat-spacing {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .frameflow-light .section-process .process-heading .heading-section {
    margin-bottom: 24px !important;
  }
  .frameflow-light.ff-services-page .ff-services-pricing-teaser.flat-spacing,
  .frameflow-light.ff-services-page .ff-services-pricing-teaser.flat-spacing.pt-0,
  .frameflow-light.ff-services-page .box-white + .ff-services-pricing-teaser.flat-spacing {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* First content section after hero/marquee — more air above + below copy */
.frameflow-light.ff-services-page .ff-services-marquee + .flat-spacing {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

@media (max-width: 1439px) {
  .frameflow-light.ff-services-page .ff-services-marquee + .flat-spacing {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
}

@media (max-width: 991px) {
  .frameflow-light.ff-services-page .ff-services-marquee + .flat-spacing {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
}

@media (max-width: 767px) {
  .frameflow-light.ff-services-page .ff-services-marquee + .flat-spacing {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* Service landings: “on demand” intro — compact, not a tall empty band */
.frameflow-light.ff-service-page .ff-services-marquee + .flat-spacing,
.frameflow-light.ff-service-page .ff-services-marquee + .ff-motion-ondemand.flat-spacing,
.frameflow-light.ff-motion-page .ff-motion-ondemand.flat-spacing,
.frameflow-light.ff-video-page .ff-motion-ondemand.flat-spacing,
.frameflow-light.ff-digital-page .ff-motion-ondemand.flat-spacing,
.frameflow-light.ff-illustration-page .ff-motion-ondemand.flat-spacing {
  padding-top: 48px !important;
  padding-bottom: 36px !important;
}

@media (max-width: 1439px) {
  .frameflow-light.ff-service-page .ff-services-marquee + .flat-spacing,
  .frameflow-light.ff-service-page .ff-services-marquee + .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-motion-page .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-video-page .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-digital-page .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-illustration-page .ff-motion-ondemand.flat-spacing {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }
}

@media (max-width: 991px) {
  .frameflow-light.ff-service-page .ff-services-marquee + .flat-spacing,
  .frameflow-light.ff-service-page .ff-services-marquee + .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-motion-page .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-video-page .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-digital-page .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-illustration-page .ff-motion-ondemand.flat-spacing {
    padding-top: 36px !important;
    padding-bottom: 28px !important;
  }
}

@media (max-width: 767px) {
  .frameflow-light.ff-service-page .ff-services-marquee + .flat-spacing,
  .frameflow-light.ff-service-page .ff-services-marquee + .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-motion-page .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-video-page .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-digital-page .ff-motion-ondemand.flat-spacing,
  .frameflow-light.ff-illustration-page .ff-motion-ondemand.flat-spacing {
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }
}

/*
 * Keep top air on Explore-more + Team Extension.
 * Also force padding here so load-order / home-page collapse cannot zero it.
 */
.frameflow-light.ff-service-page .ff-service-insights.flat-spacing,
.frameflow-light.ff-service-page .ff-service-insights.flat-spacing.pt-0,
.frameflow-light.ff-service-page .flat-spacing + .ff-service-insights.flat-spacing,
.frameflow-light.ff-service-page .ff-contact-section + .ff-service-insights.flat-spacing,
.frameflow-light.home-page.ff-service-page .ff-motion-team-extension,
.frameflow-light.ff-service-page .ff-motion-team-extension,
.frameflow-light.ff-service-page .ff-motion-team-extension.flat-spacing,
.frameflow-light.ff-service-page .box-white + .ff-motion-team-extension.flat-spacing,
.frameflow-light.ff-service-page .flat-spacing + .ff-motion-team-extension.flat-spacing {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

@media (max-width: 1439px) {
  .frameflow-light.ff-service-page .ff-service-insights.flat-spacing,
  .frameflow-light.ff-service-page .ff-service-insights.flat-spacing.pt-0,
  .frameflow-light.ff-service-page .flat-spacing + .ff-service-insights.flat-spacing,
  .frameflow-light.ff-service-page .ff-contact-section + .ff-service-insights.flat-spacing,
  .frameflow-light.home-page.ff-service-page .ff-motion-team-extension,
  .frameflow-light.ff-service-page .ff-motion-team-extension,
  .frameflow-light.ff-service-page .ff-motion-team-extension.flat-spacing,
  .frameflow-light.ff-service-page .box-white + .ff-motion-team-extension.flat-spacing,
  .frameflow-light.ff-service-page .flat-spacing + .ff-motion-team-extension.flat-spacing {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

@media (max-width: 991px) {
  .frameflow-light.ff-service-page .ff-service-insights.flat-spacing,
  .frameflow-light.ff-service-page .ff-service-insights.flat-spacing.pt-0,
  .frameflow-light.ff-service-page .flat-spacing + .ff-service-insights.flat-spacing,
  .frameflow-light.ff-service-page .ff-contact-section + .ff-service-insights.flat-spacing,
  .frameflow-light.home-page.ff-service-page .ff-motion-team-extension,
  .frameflow-light.ff-service-page .ff-motion-team-extension,
  .frameflow-light.ff-service-page .ff-motion-team-extension.flat-spacing,
  .frameflow-light.ff-service-page .box-white + .ff-motion-team-extension.flat-spacing,
  .frameflow-light.ff-service-page .flat-spacing + .ff-motion-team-extension.flat-spacing {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

@media (max-width: 767px) {
  .frameflow-light.ff-service-page .ff-service-insights.flat-spacing,
  .frameflow-light.ff-service-page .ff-service-insights.flat-spacing.pt-0,
  .frameflow-light.ff-service-page .flat-spacing + .ff-service-insights.flat-spacing,
  .frameflow-light.ff-service-page .ff-contact-section + .ff-service-insights.flat-spacing,
  .frameflow-light.home-page.ff-service-page .ff-motion-team-extension,
  .frameflow-light.ff-service-page .ff-motion-team-extension,
  .frameflow-light.ff-service-page .ff-motion-team-extension.flat-spacing,
  .frameflow-light.ff-service-page .box-white + .ff-motion-team-extension.flat-spacing,
  .frameflow-light.ff-service-page .flat-spacing + .ff-motion-team-extension.flat-spacing {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

.frameflow-light .heading-section.mb-80,
.frameflow-light .mb-80.heading-section {
  margin-bottom: clamp(48px, 5vw, 80px) !important;
}

.frameflow-light .heading-section.mb-64 {
  margin-bottom: clamp(40px, 4.5vw, 64px) !important;
}

.frameflow-light .heading-section.mb-48 {
  margin-bottom: clamp(36px, 4vw, 48px) !important;
}

/* Sections without .flat-spacing — same rhythm */
.frameflow-light .ff-home-process,
.frameflow-light.home-page .ff-cta-department-section,
.frameflow-light.home-page .ff-cta-department-section.flat-spacing,
.frameflow-light.ff-motion-page .ff-motion-pricing,
.frameflow-light.ff-video-page .ff-motion-pricing,
.frameflow-light.ff-digital-page .ff-motion-pricing,
.frameflow-light.ff-illustration-page .ff-motion-pricing,
.frameflow-light.ff-service-page .section-pricing,
.frameflow-light.ff-service-page .ff-motion-pricing {
  padding-top: 100px !important;
  padding-bottom: 110px !important;
}

/* Service pages — Stats section clean bottom spacing */
.frameflow-light.ff-service-page .ff-motion-team-extension {
  padding-bottom: clamp(40px, 5vw, 60px) !important;
}

/* Service pages — Testimonials section dedicated top and bottom breathing room */
.frameflow-light.ff-service-page .section-testimonials.ff-tes-carousel,
.frameflow-light.ff-motion-page .section-testimonials,
.frameflow-light.ff-video-page .section-testimonials,
.frameflow-light.ff-digital-page .section-testimonials,
.frameflow-light.ff-illustration-page .section-testimonials {
  padding-top: clamp(70px, 8vw, 100px) !important;
  padding-bottom: clamp(70px, 8vw, 100px) !important;
}

/* Service pages — Related services ('Explore more services') clean top spacing */
.frameflow-light.ff-service-page .ff-service-insights--cards,
.frameflow-light.ff-motion-page .ff-service-insights,
.frameflow-light.ff-video-page .ff-service-insights,
.frameflow-light.ff-digital-page .ff-service-insights,
.frameflow-light.ff-illustration-page .ff-service-insights {
  padding-top: clamp(70px, 8vw, 100px) !important;
  padding-bottom: clamp(70px, 8vw, 100px) !important;
}

@media (max-width: 1439px) {
  .frameflow-light .ff-home-process,
  .frameflow-light.home-page .ff-cta-department-section,
  .frameflow-light.home-page .ff-cta-department-section.flat-spacing,
  .frameflow-light.ff-motion-page .ff-motion-pricing,
  .frameflow-light.ff-video-page .ff-motion-pricing,
  .frameflow-light.ff-digital-page .ff-motion-pricing,
  .frameflow-light.ff-illustration-page .ff-motion-pricing,
  .frameflow-light.ff-service-page .section-pricing,
  .frameflow-light.ff-service-page .ff-motion-pricing {
    padding-top: 85px !important;
    padding-bottom: 90px !important;
  }
}

@media (max-width: 991px) {
  .frameflow-light .ff-home-process,
  .frameflow-light.home-page .ff-cta-department-section,
  .frameflow-light.home-page .ff-cta-department-section.flat-spacing,
  .frameflow-light.ff-motion-page .ff-motion-pricing,
  .frameflow-light.ff-video-page .ff-motion-pricing,
  .frameflow-light.ff-digital-page .ff-motion-pricing,
  .frameflow-light.ff-illustration-page .ff-motion-pricing,
  .frameflow-light.ff-service-page .section-pricing,
  .frameflow-light.ff-service-page .ff-motion-pricing {
    padding-top: 65px !important;
    padding-bottom: 70px !important;
  }
}

@media (max-width: 767px) {
  .frameflow-light .ff-home-process,
  .frameflow-light.home-page .ff-cta-department-section,
  .frameflow-light.home-page .ff-cta-department-section.flat-spacing,
  .frameflow-light.ff-motion-page .ff-motion-pricing,
  .frameflow-light.ff-video-page .ff-motion-pricing,
  .frameflow-light.ff-digital-page .ff-motion-pricing,
  .frameflow-light.ff-illustration-page .ff-motion-pricing,
  .frameflow-light.ff-service-page .section-pricing,
  .frameflow-light.ff-service-page .ff-motion-pricing {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* Hide draft-only blocks (Trusted brands / Browse other services) */
.ff-draft-hidden[hidden] {
  display: none !important;
}

/* Stats hover handled in services.css (full accent gradient + white text/icons) */

/* Home review / process counters */
.frameflow-light .ff-review-counter,
.frameflow-light .ff-working-process__stat {
  transition: color 0.25s ease, transform 0.25s ease;
}

.frameflow-light .ff-review-counter:hover,
.frameflow-light .ff-working-process__stat:hover {
  color: #432691;
  transform: translateY(-2px);
}

/* Calm hero motion — kill aggressive rotate/parallax wobble */
.frameflow-light .section-hero .fadeRotateX,
.frameflow-light .section-hero.effectFade.fadeRotateX,
.frameflow-light .section-hero .effectFade.fadeRotateX {
  transform: none !important;
}

.frameflow-light .section-hero--frameflow .hero-image,
.frameflow-light .section-hero--frameflow .hero-image img {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Kill drifting glow shape beside Quick Contact form */
.frameflow-light .hero-contact-form,
.frameflow-light .hero-contact-form--compact {
  overflow: hidden !important;
}

.frameflow-light .hero-contact-form::before,
.frameflow-light .hero-contact-form--compact::before {
  animation: none !important;
  transform: none !important;
}

/* Hero primary CTAs — purple bg + white text (fixes invisible Start a Project) */
.frameflow-light.ff-services-page .ff-services-hero__actions a.tf-btn.ff-btn-on-dark,
.frameflow-light.ff-services-page .ff-services-hero__actions a.tf-btn.ff-btn-white,
.frameflow-light.ff-service-page .ff-services-hero__actions a.tf-btn.ff-btn-on-dark,
.frameflow-light.ff-service-page .ff-services-hero__actions a.tf-btn.ff-btn-white,
.frameflow-light .ff-about-hero__actions a.tf-btn.ff-btn-on-dark,
.frameflow-light .ff-about-hero__actions a.tf-btn.ff-btn-white,
.frameflow-light .ff-portfolio-hero__actions a.tf-btn.ff-btn-on-dark,
.frameflow-light .ff-portfolio-hero__actions a.tf-btn.ff-btn-white,
.frameflow-light .ff-contact-hero__actions a.tf-btn.ff-btn-on-dark,
.frameflow-light .ff-contact-hero__actions a.tf-btn.ff-btn-white {
  background: #432691 !important;
  background-color: #432691 !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.frameflow-light.ff-services-page .ff-services-hero__actions a.tf-btn-2,
.frameflow-light.ff-service-page .ff-services-hero__actions a.tf-btn-2,
.frameflow-light .ff-about-hero__actions a.tf-btn-2,
.frameflow-light .ff-portfolio-hero__actions a.tf-btn-2,
.frameflow-light .ff-contact-hero__actions a.tf-btn-2 {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #432692 !important;
  -webkit-text-fill-color: #432692 !important;
}

/* ── Custom side scrollbar (slim dark track + light pill thumb) ── */
html {
  scrollbar-width: thin;
  scrollbar-color: #c4c4c8 #1a1a1e;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #1a1a1e;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: #c4c4c8;
  border-radius: 999px;
  border: 2px solid #1a1a1e; /* inset pill so thumb sits inside the track */
  background-clip: padding-box;
  cursor: grab;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background-color: #d8d8dc;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: #1a1a1e;
}

/* Match on common scrollable panels (menus, selects, modals) */
.frameflow-light .offcanvas-menu .canvas_center,
.frameflow-light .canvas-body,
.frameflow-light .nice-select .list {
  scrollbar-width: thin;
  scrollbar-color: #c4c4c8 #1a1a1e;
}

.frameflow-light .offcanvas-menu .canvas_center::-webkit-scrollbar,
.frameflow-light .canvas-body::-webkit-scrollbar,
.frameflow-light .nice-select .list::-webkit-scrollbar {
  width: 8px !important;
}

.frameflow-light .offcanvas-menu .canvas_center::-webkit-scrollbar-track,
.frameflow-light .canvas-body::-webkit-scrollbar-track,
.frameflow-light .nice-select .list::-webkit-scrollbar-track {
  background: #1a1a1e;
}

.frameflow-light .offcanvas-menu .canvas_center::-webkit-scrollbar-thumb,
.frameflow-light .canvas-body::-webkit-scrollbar-thumb,
.frameflow-light .nice-select .list::-webkit-scrollbar-thumb {
  background-color: #c4c4c8;
  border-radius: 999px;
  border: 2px solid #1a1a1e;
  background-clip: padding-box;
}

/* ── Retire lime accents → brand white/purple ── */
#goTop {
  display: none !important;
}

.frameflow-light .ff-pricing-custom__eyebrow,
.frameflow-light.home-page .ff-pricing-custom__eyebrow,
.frameflow-light.home-page .ff-site-footer__cta-card--cl .ff-site-footer__cta-eyebrow,
.frameflow-light.home-page .ff-hero-eyebrow,
.frameflow-light .ff-pricing-teaser__eyebrow {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
  background: none !important;
  background-image: none !important;
}

/* Mobile offcanvas: hide live PKT clock; keep phone */
.canvas_foot .left p:has(.clock),
.canvas_foot .left .clock {
  display: none !important;
}

/* Footer CONTACT list — vertically center icon + text */
.frameflow-light .ff-site-footer__contact li {
  align-items: center !important;
}

.frameflow-light .ff-site-footer__contact li .icon {
  margin-top: 0 !important;
  line-height: 1;
}

.frameflow-light .ff-site-footer__contact a,
.frameflow-light .ff-site-footer__contact span {
  display: inline-flex;
  align-items: center;
  line-height: 1.35;
  padding-top: 0;
  margin-top: 0;
}

.frameflow-light.home-page .ff-site-footer__cta-card--cl .ff-site-footer__cta-title span:not(.ff-rev-word-clip) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.frameflow-light .ff-services-hero__eyebrow::before,
.frameflow-light .ff-about-hero__eyebrow::before,
.frameflow-light .ff-portfolio-hero__eyebrow::before,
.frameflow-light .ff-contact-hero__eyebrow::before,
.frameflow-light.ff-contact-page .ff-cp-brief__eyebrow::before,
.frameflow-light.home-page .ff-site-footer__cta-card--cl .ff-site-footer__cta-eyebrow::before {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22) !important;
}

/* Light-surface brand dots (match Graphic Design Agency · Pakistan badge) */
.frameflow-light .section-hero--frameflow .content-wrap .sub::before {
  background: #432691 !important;
  box-shadow: none !important;
}

.frameflow-light .ff-pricing-plan:not(.ff-pricing-plan--featured),
.frameflow-light.home-page .ff-pricing-plan:not(.ff-pricing-plan--featured) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Services hub — keep spacing-critical fades from sticking at translateY(50)/opacity 0 */
.frameflow-light.ff-services-page .ff-tes-carousel .heading-section.effectFade,
.frameflow-light.ff-service-page .ff-motion-ondemand .effectFade,
.frameflow-light.ff-service-page .ff-motion-ondemand.effectFade {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Pricing purple box — balanced inner pad (outer gap is on the section above) */
.frameflow-light .ff-services-pricing-teaser__inner,
.frameflow-light.home-page .ff-services-pricing-teaser__inner,
.frameflow-light.ff-services-page .ff-services-pricing-teaser__inner,
.frameflow-light.ff-service-page .ff-services-pricing-teaser__inner {
  padding: 56px clamp(28px, 4vw, 52px) !important;
  justify-content: flex-start !important;
}

@media (max-width: 767px) {
  .frameflow-light .ff-services-pricing-teaser__inner,
  .frameflow-light.home-page .ff-services-pricing-teaser__inner,
  .frameflow-light.ff-services-page .ff-services-pricing-teaser__inner,
  .frameflow-light.ff-service-page .ff-services-pricing-teaser__inner {
    padding: 44px 22px !important;
  }
}

/* Portfolio Gallery Video Card Playability Fix */
.frameflow-light .ff-gallery-card--video iframe,
.frameflow-light .ff-portfolio-grid .ff-gallery-card--video iframe,
.frameflow-light .ff-service-gallery .ff-gallery-card--video iframe {
  pointer-events: auto !important;
  border-radius: 12px;
}

.frameflow-light .ff-gallery-card--video {
  pointer-events: auto;
  cursor: default;
}

