/*
 * custom.css
 * ─────────────────────────────────────────────────────────────
 * Write your plain CSS here — no build step required.
 * This file is loaded AFTER Tailwind output so your rules
 * will always win without needing !important.
 *
 * Good use-cases:
 *   • Third-party library overrides (Swiper, etc.)
 *   • CSS animations / keyframes
 *   • Complex selectors Tailwind can't easily express
 *   • Client brand tweaks that don't belong in input.css
 * ─────────────────────────────────────────────────────────────
 */


/* ─── Example: Swiper custom skin ───────────────────────────── */
/*
.swiper-pagination-bullet-active {
  background-color: #2563eb;
}

.swiper-button-next,
.swiper-button-prev {
  color: #2563eb;
}
*/


/* ─── Example: Custom keyframe animation ─────────────────────── */
/*
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}
*/


/* ─── Your styles below ─────────────────────────────────────── */

/* ─── Partners section background + edge fades ─────────────
   Three stacked layers per Figma node 2345:20919:
   (1) white-vignette overlay — transparent center → white edges
   (2) faint square-grid pattern (40x40 tiled SVG)
   (3) peach base — #fff3ed center → white edges */
.dp-partners {
  background:
    radial-gradient(ellipse 96vw 47vh at 50% 50%,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.375) 61.5%,
      rgba(255,255,255,1) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M0 0H40V40H0z' fill='none' stroke='%23cbd5e1' stroke-width='1' stroke-opacity='0.35'/></svg>"),
    radial-gradient(ellipse 96vw 47vh at 50% 50%,
      #fff3ed 0%,
      #ffffff 100%);
  background-size: auto, 40px 40px, auto;
  background-repeat: no-repeat, repeat, no-repeat;
}
/* Side fade overlays (324px wide each, gradient to #fafafa) */
.dp-partners::before,
.dp-partners::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(60px, 17vw, 324px);
  pointer-events: none;
  z-index: 2;
}
.dp-partners::before { left: 0;  background: linear-gradient(to right, #fafafa 0%, rgba(250,250,250,0.65) 28.5%, rgba(250,250,250,0) 78.5%); }
.dp-partners::after  { right: 0; background: linear-gradient(to left,  #fafafa 0%, rgba(250,250,250,0.65) 28.5%, rgba(250,250,250,0) 78.5%); }

/* ─── Marquee (used by .js-marquee + .js-marquee-track) ───── */
.js-marquee { -webkit-mask-image: none; mask-image: none; }
.js-marquee-track { animation: dp-marquee var(--dp-marquee-duration, 40s) linear infinite; will-change: transform; }
.js-marquee[data-marquee-direction="reverse"] .js-marquee-track { animation-direction: reverse; }
.js-marquee:hover .js-marquee-track { animation-play-state: paused; }
@keyframes dp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .js-marquee-track { animation: none; }
}

/* ─── Year accordion ──────────────────────────────────────── */
.js-year-panel { max-height: 0; transition: max-height 350ms ease, margin 350ms ease; margin-top: 0; }
.js-year-item.is-open .js-year-panel { max-height: 500px; margin-top: 12px; }
.js-year-item.is-open .js-year-chevron { transform: rotate(180deg); }

/* ─── Similar Case Studies swiper ─────────────────────────── */
/* min-width:0 stops the flex parent from letting Swiper's wrapper
   grow past the container (which causes a runaway resize loop). */
.dp-similar-swiper { width: 100%; min-width: 0; overflow: visible; }
.dp-similar-swiper .swiper-slide { height: auto; }

/* ─── Hero swiper pagination dots ─────────────────────────── */
.dp-hero-swiper .swiper-pagination { position: static; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 16px; }
.dp-hero-swiper .swiper-pagination-bullet { width: 12px; height: 8px; background: #cce7ff; opacity: 1; border-radius: 999px; transition: width 200ms; }
.dp-hero-swiper .swiper-pagination-bullet-active { width: 28px; background: #006dcc; }

/* ─── Insights/Why navigation arrows ──────────────────────── */
.dp-nav-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; width: 42px; border-radius: 999px; background: #fff; border: 1px solid #005aa9; transition: background-color 200ms; }
.dp-nav-btn:hover { background: #e5f3ff; }
.dp-nav-btn.swiper-button-disabled { opacity: 0.4; pointer-events: none; }
/* Gray variant per Figma node 2345:20952 — gray/100 bg, gray/200 border */
.dp-nav-btn.dp-nav-btn--gray { background: #f1f5f9; border-color: #e2e8f0; }
.dp-nav-btn.dp-nav-btn--gray:hover { background: #e2e8f0; }

/* ─── Right-bleed swiper (Why-Us & Recent Blogs) ──────────── */
/* The swiper itself is overflow:visible so slides bleed past the
   container; the parent section clips at the viewport's right edge. */
.dp-bleed-section { overflow: hidden; }
.dp-bleed-swiper { width: 100%; min-width: 0; overflow: visible; }
.dp-bleed-swiper .swiper-slide { height: auto; }
.dp-why-swiper { width: 100%; min-width: 0; overflow: visible; }
.dp-why-swiper .swiper-slide { height: auto; }

/* 5-image strip swiper: right bleed, no padding container */
.dp-strip-swiper { width: 100%; min-width: 0; overflow: visible; }
.dp-strip-swiper .swiper-slide { height: auto; }

/* Insights swiper: right bleed (slides extend past container's right edge) */
.dp-insights-swiper { width: 100%; min-width: 0; overflow: visible; }
.dp-insights-swiper .swiper-slide { height: auto; }

/* ─── Contact tabs ────────────────────────────────────────── */
.js-contact-tab { color: #0f172a; background: transparent; border: 1px solid transparent; transition: background-color 200ms, color 200ms, border-color 200ms; }
.js-contact-tab.is-active { background: #e5f3ff; border-color: #cce7ff; color: #005299; }

/* ─── FAQ accordion ───────────────────────────────────────── */
.js-faq-panel { max-height: 0; transition: max-height 400ms ease; }
.js-faq-item.is-open .js-faq-panel { max-height: 500px; }
.js-faq-item.is-open .js-faq-chevron { transform: rotate(180deg); }
.js-faq-item.is-open > .js-faq-toggle .js-faq-heading { color: #1e293b; }