/* Nabulsi / Studio art direction. Warm orange #FF9D50 brand with high-contrast editorial typography. */
:root, html[data-theme] {
  --brand: #FF9D50; --brand-600: #e8883b; --ink: #111827; --paper: #fff;
  --ink-800: #1f2937; --ink-o75: rgba(17,24,39,.75); --ink-o50: rgba(17,24,39,.5);
  --ink-o30: rgba(17,24,39,.3); --ink-o20: rgba(17,24,39,.2);
  --ink-o10: rgba(17,24,39,.08); --ink-o05: rgba(17,24,39,.04);
  --color-primary: #FF9D50; --color-primary-deep: #e8883b;
  --color-secondary: #FF9D50; --color-secondary-container: rgba(255,157,80,.12);
  --color-tertiary: #FF9D50; --color-tertiary-container: rgba(255,157,80,.12);
  --color-background: #fff; --color-surface: #fff; --color-surface-container: #f9fafb;
  --color-surface-container-low: #fff; --color-surface-container-lowest: #fff;
  --color-on-background: #111827; --color-on-surface: #111827;
  --color-on-surface-variant: #4b5563; --color-surface-variant: rgba(255,157,80,.12);
  --color-outline: rgba(17,24,39,.15); --color-outline-variant: rgba(255,157,80,.3);
  --gradient-prismatic: linear-gradient(90deg,#FF9D50,#e8883b);
  --gradient-prismatic-wide: linear-gradient(90deg,#FF9D50,#fca966,#e8883b);
  --band-bg: #FF9D50; --fs-body: 1rem; --fs-small: .875rem; --fs-micro: .75rem;
  --margin: clamp(20px,4vw,80px); --space-stack-lg: clamp(72px,10vw,160px);
  --radius: 16px; --radius-sm: 8px;
}
html, body { background: #fff !important; color: #111827 !important; }
img, video { filter: none !important; }
.contact-video-bg,.contact-video-overlay,.bg-video { display: none !important; }
.hero-intro { filter: none !important; color: #111827 !important; font-size: clamp(34px,4vw,68px); letter-spacing: -.05em; }
.hero-content { max-width: 60%; }
.hero-typewriter,.nav-logo-text { color: #111827 !important; }
.nav-logo-asterisk { color: #FF9D50 !important; }
.nav-links a { color: #111827 !important; }
.nav-links a:hover { color: #FF9D50 !important; }
.nav-cta { color: #fff !important; background: #FF9D50 !important; }
.hero#hero { background-image: none !important; }
.sv-video-wrap,.sv-growth-img { position: relative; isolation: isolate; min-height: 400px; border-radius: 20px; }
.sv-video-wrap .studio-art,.sv-growth-img .studio-art { display: none !important; }
.studio-reel-title { position: relative; z-index: 1; color: #fff; font-size: clamp(56px,9vw,130px); line-height: .95; letter-spacing: -.065em; padding: 40px; pointer-events: none; }
.wshow-bg { background: #fff !important; }
.ab-testimonials::before,.ab-testimonials::after { display: none !important; }
.ab-test-single-card { box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important; border: 1px solid rgba(255,157,80,.25) !important; }
.ab-test-card-content h4 { color: #111827 !important; }
.ab-test-card-content p { color: #4b5563 !important; }
.ab-test-quote-icon { color: #FF9D50 !important; }
.ab-test-avatar { background: #fff !important; border-color: #FF9D50 !important; }
.ab-process-num,.ab-process-icon,.ab-stat-num { color: #FF9D50 !important; }
.ab-cta { background: #111827 !important; color: #fff !important; border-radius: 20px; }
.ab-cta h2,.ab-cta p { color: #fff !important; }
.ab-test-arrow-svg { color: #FF9D50 !important; }
body { overflow-x: clip; cursor: auto !important; }
main > section, main > header, .footer-creative { overflow: clip; }
.work-hero,.sv-hero,.ab-hero,.contact-hero { overflow: clip; }
.work-hero-grid > *, .contact-content-row > *, .sv-growth-grid > *, .ab-test-wrapper > * { min-width: 0; }
.custom-cursor { display: none !important; }
.mobile-menu a { opacity: 1 !important; }
.fab { background: #FF9D50 !important; color: #fff !important; border: 1px solid #FF9D50; }
.wave-svg { display: none !important; }
body :is(h1,h2,h3,h4,p,a,span) { text-shadow: none; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #FF9D50; outline-offset: 6px; }
::selection { color: #fff; background: #FF9D50; }
.studio-skip { position: fixed; top: -100px; left: 20px; z-index: 99999; padding: 14px 20px; background: #FF9D50; color: #fff; }
.studio-skip:focus { top: 16px; }
.studio-progress { position: fixed; inset: 0 0 auto; height: 3px; background: #FF9D50; transform: scaleX(0); transform-origin: left; z-index: 9999; pointer-events: none; }
.cursor,.cursor-dot,.cursor-outline,#three-bg-canvas,.bg-fader,.skel,.contact-mouse-hint,.studio-art { display: none !important; }
.hero__fig { display: block !important; opacity: 1 !important; visibility: visible !important; z-index: 10 !important; }
.hero__fig figure { opacity: 1 !important; visibility: visible !important; overflow: hidden !important; }
.hero__fig img, .hero__strip-figs img { opacity: 1 !important; visibility: visible !important; filter: none !important; object-fit: cover !important; }
.hero__fig .frame { opacity: 1 !important; visibility: visible !important; border-color: rgba(255,157,80,.4) !important; }
.hero__strip-figs { display: grid; }
.navbar,.navbar.scrolled,.topbar { background: rgba(255,255,255,.96) !important; border-bottom: 1px solid rgba(17,24,39,.1) !important; box-shadow: none !important; mix-blend-mode: normal; }
.topbar { padding: 22px var(--margin); }
.topbar__logo,.navbar-logo { color: #111827 !important; font-size: 16px !important; letter-spacing: -.04em !important; }
.topbar__logo b { color: #FF9D50 !important; }
.navbar-links a { font-size: 13px !important; }
.navbar-inner { padding-block: 20px !important; }
.topbar__meta { font-size: 12px; color: #6b7280; }
.dock { background: #fff; border: 1px solid rgba(17,24,39,.15); border-radius: 50px; box-shadow: 0 12px 50px rgba(0,0,0,.08); max-width: calc(100% - 28px); }
.dock__btn { border-radius: 30px; min-height: 46px; font-size: 12px; }
.dock__logo { color: #FF9D50 !important; font-weight: 700; }
.dock__btn--brand { background: #FF9D50 !important; color: #fff !important; }
.dock__btn--brand:hover { background: #e8883b !important; }
.btn,.btn-primary,.navbar-cta { border-radius: 50px !important; min-height: 48px; box-shadow: none !important; background: #FF9D50 !important; color: #fff !important; border: 1px solid #FF9D50 !important; }
.btn::before,.btn-primary::before { background: #fff !important; }
.btn:hover,.btn-primary:hover,.navbar-cta:hover { background: #e8883b !important; border-color: #e8883b !important; color: #fff !important; }
.btn-white,.btn-outline { border-radius: 50px !important; min-height: 48px; box-shadow: none !important; background: #fff !important; color: #111827 !important; border: 1px solid rgba(17,24,39,.2) !important; }
.btn-white:hover,.btn-outline:hover { border-color: #FF9D50 !important; color: #FF9D50 !important; }
.cta-wrap > .frame { display: none; }
.frame { border-color: rgba(255,157,80,.3); border-style: solid; border-radius: 16px; }
.prismatic-text { background: linear-gradient(135deg, #FF9D50, #e8883b) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.hero__title { color: #111827 !important; }
.hero__sub { color: #4b5563 !important; }
.studio-kicker { display: inline-flex; gap: 12px; align-items: center; font: 12px/1.5 'Geist Mono',monospace; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 26px; color: #FF9D50 !important; }
.studio-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.studio-motion { display: none !important; }
.hero__scroll { left: var(--margin); right: auto; bottom: 28px; transform: none; }
.ticker { background: #FF9D50 !important; color: #fff !important; padding-block: clamp(34px, 3.2vw, 48px) !important; border: 0 !important; overflow: hidden !important; }
.values { background: #FF9D50 !important; color: #fff !important; padding-block: clamp(40px, 4vw, 60px) !important; border: 0 !important; }
.ticker__row, .ticker em, .values__row { color: #fff !important; }
.ticker__row { font-size: clamp(24px, 2.6vw, 38px) !important; letter-spacing: 0.02em !important; font-weight: 600 !important; }
.ticker__row > span { font-size: clamp(24px, 2.6vw, 38px) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; gap: clamp(28px, 3.5vw, 56px) !important; padding-right: clamp(28px, 3.5vw, 56px) !important; color: #ffffff !important; }
.ticker__row em { color: #ffffff !important; font-size: 0.75em !important; opacity: 0.85 !important; vertical-align: middle !important; display: inline-block !important; margin: 0 4px !important; }
.manifesto { padding: clamp(80px,12vw,180px) var(--margin); }
.manifesto__inner { max-width: 1180px; }
.manifesto__quote { font-size: clamp(30px,4.9vw,78px); line-height: 1.13; letter-spacing: -.055em; color: #111827; }
.manifesto__foot { margin-top: 44px; font-size: 14px; color: #6b7280; }
.work { background: #ffffff !important; color: #111827 !important; padding: var(--space-stack-lg) 0; border-top: 1px solid rgba(17,24,39,.08); }
.work .work__title,.work .wcard__name,.work .wcard__year,.work .eyebrow { color: #111827 !important; }
.work .work__lede { color: #4b5563 !important; }
.work .pixel { font-family: 'Geist',sans-serif; letter-spacing: -.075em; font-weight: 500; text-shadow: none; }
.work .frame { border-color: rgba(17,24,39,.15); }
.wcard__media { border-radius: 12px; background: #f3f4f6; overflow: hidden; }
.wcard__tint { display: none !important; opacity: 0 !important; }
.wcard__media img { filter: none !important; opacity: 1 !important; }
.wcard__tag { background: rgba(255,255,255,.94) !important; color: #111827 !important; border: 1px solid rgba(255,157,80,.4) !important; border-radius: 50px; font-weight: 600; }
.wcard { transition: translate .5s ease; }
@media (hover:hover) { .wcard:hover { translate: 0 -10px; } .wcard:hover img { scale: 1.035; } }
.wcard img { transition: scale .8s cubic-bezier(.2,.7,.2,1); }
.process,.words { padding-block: var(--space-stack-lg); }
.pstep { border-top: 1px solid rgba(17,24,39,.12); padding-block: clamp(28px,4vw,64px); }
.pstep__num { font-size: 15px; color: #FF9D50; font-weight: 700; }
.pstep__title { font-size: clamp(32px,4vw,64px); font-weight: 500; color: #111827; }
.pstep__body { font-size: 16px; line-height: 1.65; color: #4b5563; }
.pstep__tags span { background: #fff; border: 1px solid rgba(255,157,80,.3); border-radius: 30px; font-size: 12px; color: #111827; }
.tcard { background: #fff; border: 1px solid rgba(17,24,39,.12); border-radius: 16px; padding: 32px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); }
.tcard blockquote { font-size: clamp(20px,2vw,28px); line-height: 1.45; color: #111827; }
.stats { background: #111827; color: #fff; padding-block: 70px; }
.stat,.stat p { color: rgba(255,255,255,.7) !important; border-color: rgba(255,255,255,.15); }
.stat__num { color: #FF9D50 !important; font-family: 'Geist',sans-serif; font-weight: 600; }
.closer { padding-block: var(--space-stack-lg); }
.closer__title { color: #111827; font-size: clamp(58px,11vw,175px); }
.closer__mail { overflow-wrap: anywhere; font-size: clamp(22px,4vw,62px); color: #FF9D50; text-decoration: none !important; }
.closer__mail:hover { color: #e8883b; text-decoration: none !important; }
.footmeta { padding-bottom: 120px; border-color: rgba(17,24,39,.12); }
/* Interior pages */
.work-hero,.sv-hero,.ab-hero,.contact-hero { position: relative; isolation: isolate; padding-top: clamp(125px,13vw,200px) !important; padding-bottom: 80px !important; min-height: 600px; border-bottom: 1px solid rgba(17,24,39,.1); }
.work-hero .studio-art,.sv-hero .studio-art,.ab-hero .studio-art,.contact-hero .studio-art { right: -5%; width: 52%; opacity: .22; }
.work-hero-grid,.sv-hero-inner,.ab-hero-inner,.contact-grid { position: relative; z-index: 1; }
.work-hero .display-xl,.sv-hero-heading,.ab-hero-heading,.contact-heading { font-size: clamp(52px,8vw,130px) !important; line-height: 1 !important; letter-spacing: -.065em !important; color: #111827 !important; font-weight: 500 !important; }
.sv-hero-desc,.ab-hero-desc,.work-hero-desc,.contact-subheading { font-size: clamp(16px,1.4vw,21px) !important; line-height: 1.6 !important; color: #4b5563 !important; max-width: 640px; }
.ab-hero { min-height: 85svh; }
.sv-hero-heading { overflow-wrap: anywhere; }
.sv-hero-line,.ab-hero-line { overflow: visible; }
.sv-video-wrap,.project-img-wrap,.wshow,.lottie-panel,.contact-cal-card { border: 1px solid rgba(17,24,39,.12); border-radius: 20px !important; }
.sv-stack-card,.nf-browse,.ab-process-card,.ab-stat-card { border: 1px solid rgba(17,24,39,.12) !important; border-radius: 16px !important; background: #fff !important; box-shadow: none !important; }
.ab-stats { background: #111827 !important; color: #fff !important; padding: 80px var(--margin); }
.ab-stats :is(h2,p,span,div) { color: inherit; }
.ab-stat-card { color: #111827 !important; }
.ab-stat-card .ab-stat-num { color: #FF9D50 !important; }
.ab-quote-text,.ab-philosophy h2,.sv-growth h2 { font-weight: 500 !important; letter-spacing: -.05em; color: #111827; }
.ab-process h2,.ab-testimonials h2 { font-size: clamp(34px,4.5vw,72px); color: #111827; }
.nf-bar,.nf-row { border-color: rgba(17,24,39,.15) !important; }
.nf-detail { background: #111827 !important; color: #fff !important; border: 1px solid rgba(255,157,80,.3) !important; }
.nf-detail :is(h2,p,span) { color: #fff !important; }
.nf-detail .nf-match { color: #FF9D50 !important; }
.nf-btn { border-radius: 50px !important; }
.nf-btn-primary { background: #FF9D50 !important; color: #fff !important; }
.nf-btn-primary:hover { background: #e8883b !important; }
.service-hero { height: 65svh !important; min-height: 320px !important; margin-top: 80px; background: #111827 !important; }
.service-hero img { filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; }
body[data-barba] .service-meta-section { background: #fff !important; color: #111827 !important; }
body[data-barba] .meta-title { color: #111827 !important; font-size: clamp(44px,9vw,150px); line-height: .98; overflow-wrap: anywhere; }
body[data-barba] .meta-tag { color: #FF9D50 !important; }
body[data-barba] .meta-arrow-btn { border-color: #FF9D50 !important; color: #FF9D50 !important; }
body[data-barba] .meta-arrow-btn:hover { background: #FF9D50 !important; color: #fff !important; }
body[data-barba] .content-text { color: #111827 !important; font-size: clamp(20px,2.2vw,34px); line-height: 1.5; }
.are-you-ready-section,.stand-out-section { background: #111827 !important; color: #fff !important; }
.marquee-section { background: #FF9D50 !important; color: #fff !important; }
.are-you-ready-section *, .stand-out-section * { color: #fff; }
.footer-creative { background: #fff !important; color: #111827 !important; padding-bottom: 100px; border-top: 1px solid rgba(17,24,39,.1); }
.footer-link,.footer-heading,.footer-logo,.footer-bottom,.footer-cta .display-xl { color: #111827 !important; }
.footer-cta > a { overflow-wrap: anywhere; font-size: clamp(23px,4vw,62px) !important; color: #FF9D50 !important; }
.footer-cta > a:hover { color: #e8883b !important; }
.footer-link:hover { color: #FF9D50 !important; }
.footer-cta .display-xl { font-size: clamp(56px,11vw,170px) !important; }
.social-icon { background: #111827 !important; color: #fff !important; border-color: #111827 !important; box-shadow: none !important; }
.social-icon:hover { background: #FF9D50 !important; border-color: #FF9D50 !important; }
/* ===== Real WhatsApp Floating Widget & Animation ===== */
.wa-fab {
  position: fixed;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(18px, 3vw, 30px);
  z-index: 9999;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  background: transparent !important;
  border: none !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: pointer;
  filter: drop-shadow(0 8px 18px rgba(37, 211, 102, 0.42));
  transition: max-width 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease, background 0.35s ease !important;
  animation: waFabBreath 3s ease-in-out infinite;
}

.wa-fab::before {
  display: none !important;
}

.wa-fab:hover {
  max-width: 205px !important;
  background: #ffffff !important;
  border: 1px solid rgba(37, 211, 102, 0.35) !important;
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.15)) drop-shadow(0 6px 14px rgba(37, 211, 102, 0.35)) !important;
}

.wa-fab:active {
  transform: translateY(1px) scale(0.97) !important;
}

.wa-fab-inner {
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
}

.wa-fab .wa-logo-img {
  width: 56px;
  height: 56px;
  min-width: 56px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wa-fab:hover .wa-logo-img {
  transform: scale(0.92) rotate(-6deg);
}

.wa-fab .wa-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  max-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transition: max-width 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.35s ease !important;
  pointer-events: none;
  background: transparent !important;
  box-shadow: none !important;
  position: static !important;
  transform: none !important;
}

.wa-fab:hover .wa-label {
  max-width: 140px !important;
  opacity: 1 !important;
  padding-left: 6px !important;
  padding-right: 16px !important;
}

.wa-fab .wa-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  animation: waDotPulse 1.8s infinite;
  flex-shrink: 0;
}

.wa-fab .wa-text {
  font-family: 'Geist', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@keyframes waFabBreath {
  0%, 100% {
    filter: drop-shadow(0 8px 18px rgba(37, 211, 102, 0.38));
  }
  50% {
    filter: drop-shadow(0 12px 26px rgba(37, 211, 102, 0.58));
  }
}

@keyframes waDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ===== Floating Action Buttons (Music & Back to Top) ===== */
.floating-actions {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 9990 !important;
}

.fab {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #FF9D50 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 18px rgba(255, 157, 80, 0.42), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  cursor: pointer !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.fab:hover {
  background: #e8883b !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 10px 24px rgba(255, 157, 80, 0.55), 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

.fab:active {
  transform: translateY(1px) scale(0.96) !important;
}

.fab svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
  stroke-width: 2.5 !important;
  display: block !important;
}

/* Equalizer Icon & Animated Bars */
.equalizer-icon {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3.5px !important;
  width: 26px !important;
  height: 22px !important;
  pointer-events: none !important;
  padding-bottom: 2px !important;
}

.equalizer-icon .bar {
  display: block !important;
  width: 3.5px !important;
  height: 20px !important;
  background: #ffffff !important;
  border-radius: 99px !important;
  transform-origin: bottom center !important;
  transition: transform 0.25s ease !important;
}

/* Paused / resting state - crisp white equalizer bars */
.equalizer-icon .bar:nth-child(1) { transform: scaleY(0.45); }
.equalizer-icon .bar:nth-child(2) { transform: scaleY(0.95); }
.equalizer-icon .bar:nth-child(3) { transform: scaleY(0.65); }
.equalizer-icon .bar:nth-child(4) { transform: scaleY(0.35); }

/* Playing state with active equalizer animation */
.fab.playing {
  background: #e8883b !important;
  box-shadow: 0 0 0 4px rgba(255, 157, 80, 0.35), 0 8px 24px rgba(255, 157, 80, 0.55) !important;
}

.fab.playing .equalizer-icon .bar {
  animation-play-state: running !important;
}

.fab.playing .equalizer-icon .bar:nth-child(1) {
  animation: eqScale1 0.75s ease-in-out infinite alternate !important;
}
.fab.playing .equalizer-icon .bar:nth-child(2) {
  animation: eqScale2 0.65s ease-in-out infinite alternate !important;
  animation-delay: -0.2s !important;
}
.fab.playing .equalizer-icon .bar:nth-child(3) {
  animation: eqScale3 0.85s ease-in-out infinite alternate !important;
  animation-delay: -0.45s !important;
}
.fab.playing .equalizer-icon .bar:nth-child(4) {
  animation: eqScale4 0.7s ease-in-out infinite alternate !important;
  animation-delay: -0.1s !important;
}

@keyframes eqScale1 {
  0%   { transform: scaleY(0.25); }
  50%  { transform: scaleY(0.95); }
  100% { transform: scaleY(0.4); }
}
@keyframes eqScale2 {
  0%   { transform: scaleY(1.0); }
  50%  { transform: scaleY(0.3); }
  100% { transform: scaleY(0.85); }
}
@keyframes eqScale3 {
  0%   { transform: scaleY(0.3); }
  50%  { transform: scaleY(1.0); }
  100% { transform: scaleY(0.55); }
}
@keyframes eqScale4 {
  0%   { transform: scaleY(0.8); }
  50%  { transform: scaleY(0.2); }
  100% { transform: scaleY(0.9); }
}
.lottie-panel { background: #111827 !important; }
.lottie-panel .studio-art-label { color: #fff; }
.lottie-tagline { color: #fff !important; position: relative; z-index: 1; }
.lottie-tagline span { color: #FF9D50 !important; -webkit-text-fill-color: #FF9D50 !important; }
.contact-cal-card { background: #fff !important; }
.mobile-menu,.menu,.mobile-overlay { background: #fff !important; color: #111827 !important; }
.menu__link,.menu__aside,.mobile-menu a { color: #111827 !important; }
.menu__link:hover,.mobile-menu a:hover { color: #FF9D50 !important; }
.studio-paused *, .studio-paused *::before,.studio-paused *::after { animation-play-state: paused !important; }
.reveal,.sv-reveal,.ab-reveal,.reveal-y { opacity: 1 !important; visibility: visible !important; }

/* =========================================================
   NABULSI.TECH UNIVERSAL SECTION ANIMATIONS
   Reveal, Fade, Swipe (Left & Right), Stagger
   ========================================================= */

/* Reveal: Vertical lift + scale expansion */
.anim-reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.985);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.anim-reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Fade: Smooth ambient fade with soft upward drift */
.anim-fade {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.anim-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Swipe Left: Dynamic lateral entrance from left */
.anim-swipe-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.anim-swipe-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Swipe Right: Dynamic lateral entrance from right */
.anim-swipe-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.anim-swipe-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger parent and children */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}
.anim-stagger.in-view > *:nth-child(1) { transition-delay: 0.04s; }
.anim-stagger.in-view > *:nth-child(2) { transition-delay: 0.12s; }
.anim-stagger.in-view > *:nth-child(3) { transition-delay: 0.20s; }
.anim-stagger.in-view > *:nth-child(4) { transition-delay: 0.28s; }
.anim-stagger.in-view > *:nth-child(5) { transition-delay: 0.36s; }
.anim-stagger.in-view > *:nth-child(6) { transition-delay: 0.44s; }

/* Stagger / delay modifiers */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }

/* Prevent lateral animations from creating horizontal scrollbars */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
main, section {
  overflow-x: clip;
}

@media (min-width: 1800px) { .shell,.container { max-width: 1680px; margin-inline: auto; } }
@media (max-width: 1000px) {
  .hero#hero { min-height: 850px; }
  .hero__title { max-width: 85%; }
  .hero__sub { max-width: 310px; }
  .navbar-links { gap: 14px; }
  .studio-art-label { display: none; }
}
@media (max-width: 767px) {
  .ab-test-single-card { width: 100% !important; max-width: 100%; margin-inline: 0 !important; padding: 20px; gap: 14px; }
  .ab-test-card-content { min-width: 0; }
  .ab-test-avatar { width: 42px; height: 42px; }
  .work-hero-grid { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 24px; }
  .work-hero-desc { max-width: 100%; }
  .hero-content { max-width: 100%; }
  .studio-reel-title { padding: 28px; }
  .sv-video-wrap,.sv-growth-img { min-height: 320px; }
  .topbar__meta { display: none; }
  .hero#hero { min-height: 920px; padding: 120px 22px 100px; align-items: flex-start; }
  .hero__title { font-size: clamp(56px,12.6vw,92px); max-width: 100%; }
  .hero__sub { max-width: 100%; font-size: 16px; }
  .hero__scroll { display: none; }
  .studio-kicker { font-size: 11px; }
  .dock { bottom: max(14px,env(safe-area-inset-bottom)); }
  .dock__btn { padding: 0 12px; }
  .work { border-radius: 20px 20px 0 0; }
  .work__col--b { padding-top: 0; }
  .work-hero,.sv-hero,.ab-hero,.contact-hero { min-height: 0; padding-top: 120px !important; padding-bottom: 60px !important; }
  .work-hero .studio-art,.sv-hero .studio-art,.ab-hero .studio-art,.contact-hero .studio-art { top: 60px; height: 400px; width: 90%; opacity: .12; }
  .contact-content-row,.content-grid,.work-hero-grid { grid-template-columns: 1fr !important; }
  .lottie-panel { min-height: 320px; }
  .service-hero { height: 45svh !important; min-height: 280px !important; }
  .meta-title-row { min-width: 0; }
  .footer-grid { gap: 30px; }
  .words__track { scroll-snap-type: x mandatory; overflow-x: auto; }
  .tcard { scroll-snap-align: start; min-width: min(82vw,360px); }
  .wa-fab {
    bottom: 88px !important;
    left: 12px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 3px !important;
  }
  .wa-fab .wa-logo-img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .split-line-inner,.sv-hero-line-inner,.ab-hero-line-inner,.reveal,.reveal-y,.sv-reveal,.ab-reveal,
  .anim-reveal, .anim-fade, .anim-swipe-left, .anim-swipe-right, .anim-stagger > * { transform: none !important; opacity: 1 !important; transition: none !important; }
  .are-you-ready-section,.stand-out-section { height: auto !important; min-height: 60vh; }
}