/* site is dark-themed only — declaring this stops mobile browsers' OS-level
   "force dark" from re-inverting colors, which otherwise breaks the
   background-clip:text gradient headings (they render as near-invisible
   dark/transparent text). */
html { color-scheme: dark; scroll-behavior: auto; scrollbar-color: #2724F8 #0d0d0d; scrollbar-width: thin; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0d0d0d; }
::-webkit-scrollbar-thumb { background: #2724F8; border-radius: 999px; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background: #4a47ff; }

body {
  background-color: #070707;
  font-family: 'Epilogue', sans-serif;
}

/* Hero headings use a very tight leading-[0.9] for the big condensed type
   look, but the SplitText line-reveal animation (main.js) wraps each line
   in an overflow:hidden mask box sized from that line-height — 0.9 made
   the box shorter than the glyphs themselves, clipping descenders (g, y,
   j, p, q). Fixed once here (ID beats the Tailwind utility class) rather
   than in every template that sets leading-[0.9] on #hero-headline. */
#hero-headline { line-height: 1; }

/* fluid type scale */
.fs-body        { font-size: clamp(13px, 1.2vw, 15px); }
.fs-title       { font-size: clamp(18px, 1.8vw, 24px); }
.fs-faq         { font-size: clamp(13px, 1.4vw, 16px); }
.fs-faq-lg      { font-size: clamp(15px, 1.8vw, 24px); }
.fs-h2          { font-size: clamp(26px, 3.2vw, 40px); }
.fs-h2-lg       { font-size: clamp(28px, 3.2vw, 40px); }
.fs-pillar-h    { font-size: clamp(20px, 1.8vw, 24px); }
.fs-pillar-body { font-size: clamp(13px, 1.1vw, 15px); }
.fs-num         { font-size: clamp(80px, 8vw, 128px); }
.fs-morph-lg    { font-size: clamp(20px, 2vw, 27px); }
.fs-trust       { font-size: clamp(14px, 1.8vw, 20px); }

.gradient-text {
  background: linear-gradient(222.98deg, #2724F8 1.83%, #A7A6FF 35.91%, #F0F0FF 76.44%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  mix-blend-mode: hard-light;
}

.anim-el { opacity: 0; }
.gs_reveal { opacity: 0; visibility: hidden; will-change: transform, opacity; }

#mobile-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.4s;
}
#mobile-menu.is-open {
  visibility: visible;
  pointer-events: all;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* quote section title morph */
.quote-morph { display: inline; }
.quote-morph .word { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.quote-morph .word .before { position: relative; }
.quote-morph .word .after { position: absolute; top: 0; left: 0; }
.quote-morph .word .char { display: inline-block; transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); }
.quote-morph .word .after .char { transform: translateY(var(--enter-dir, 110%)); }
@media (hover: hover) {
  .quote-morph:hover .word .before .char { transform: translateY(var(--exit-dir, -110%)); }
  .quote-morph:hover .word .after .char { transform: translateY(0); }
}

#hero-video-el { transform-origin: center top; }

.logo-slot { position: relative; width: 165px; height: 54px; flex-shrink: 0; }
.logo-slot-a, .logo-slot-b { position: absolute; inset: 0; display: flex; align-items: center; will-change: opacity, filter; }
.logo-slot-b { opacity: 0; }
/* uploaded client logos (see "logo cycling" in main.js) */
#logo-slots.logos-img-static { gap: 64px; }
.logos-img-static .logo-slot { width: auto; }
.logos-img-static .logo-slot-a { position: relative; inset: auto; height: 100%; }
/* desktop: the strip takes whatever room is left beside the "Trusted by"
   text and the four slots share it equally, so nothing can overflow/clip */
@media (min-width: 1024px) {
  #logo-slots.logos-img-cycle { flex: 1 1 0; min-width: 0; max-width: 860px; width: auto; overflow: visible; gap: clamp(12px, 2vw, 28px); justify-content: flex-end; }
  .logos-img-cycle .logo-slot { flex: 1 1 0; min-width: 0; max-width: 200px; width: auto; }
  .logos-img-cycle .logo-slot img { max-width: min(100%, 180px) !important; }
}
.logos-img-cycle .logo-slot-a,
.logos-img-cycle .logo-slot-b { justify-content: center; }
/* mobile marquee: slots hug their logo, tighter gap, keeps looping */
@media (max-width: 1023px) {
  .logos-img-static .logo-marquee-track,
  .logos-img-cycle .logo-marquee-track { gap: 28px; padding-right: 28px; }
  .logos-img-cycle .logo-slot { width: auto; }
  .logos-img-cycle .logo-slot-a { position: relative; inset: auto; height: 100%; justify-content: flex-start; }
}

#quote-section { margin-top: -85vh; }
@media (min-width: 1024px) {
  #quote-section { margin-top: -65vh; }
}

/* services */
.services-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.services-scroll::-webkit-scrollbar { display: none; }
.svc-inner { display: flex; gap: 10px; width: max-content; height: 100%; will-change: transform; }
.service-card { cursor: pointer; }
.service-card .card-img { will-change: transform; }
.default-content { opacity: 1; }
.hover-content    { opacity: 0; pointer-events: none; }
.blue-grad        { opacity: 0; }
.hover-content .card-icon { filter: brightness(0) invert(1); }
.service-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 15px;
  border: 1px solid rgba(255,255,255,0); pointer-events: none; z-index: 20;
  transition: border-color 0.35s ease;
}
:root { --cw: calc(min(100vw, 1440px) - 120px); }
.service-card[data-type="small"] { width: calc(var(--cw) / 2 - 10px); flex-shrink: 0; }
.service-card[data-type="wide"]  { width: calc(var(--cw) - 10px);     flex-shrink: 0; }
.service-card[data-type="tall"]  { width: calc(var(--cw) / 3);         flex-shrink: 0; }
@media (min-width: 1024px) {
  :root { --track-h: calc(100vh - 150px); --card-h: calc((var(--track-h) - 10px) / 2); }
  .service-card[data-type="small"],
  .service-card[data-type="wide"] { height: var(--card-h) !important; }
}
@media (max-width: 1023px) {
  .services-section { height: 520px; }
  .services-scroll { height: 520px !important; padding: 0 !important; gap: 0 !important;
    display: flex !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; }
  .svc-inner { display: contents !important; }
  .card-group, .card-row { display: contents !important; opacity: 1 !important; transform: none !important; }
  .service-card { width: 100% !important; min-width: 100% !important; height: 520px !important;
    border-radius: 15px !important; scroll-snap-align: start; flex-shrink: 0 !important; }
  .service-card .dark-grad       { opacity: 0 !important; }
  .service-card .blue-grad       { opacity: 1 !important; }
  .service-card .default-content { opacity: 0 !important; pointer-events: none !important; }
  .service-card .hover-content   { opacity: 1 !important; pointer-events: auto !important; }
  .service-card .hov-icon-row    { opacity: 1 !important; transform: translateY(0) !important; }
  .service-card .hov-desc        { opacity: 1 !important; transform: translateY(0) !important; }
  .service-card .hov-btn         { opacity: 1 !important; transform: scale(1) !important; }
  .service-card[data-type="wide"] .hov-desc { width: min(539px, 78%) !important; }
  .service-card[data-type="tall"] .hov-desc { width: 100% !important; }
}
.hov-btn { position: relative; overflow: hidden; transition: background-color 0.25s ease, border-color 0.25s ease; }
.hov-btn:hover { background-color: #2724F8; border-color: #2724F8; }

/* why section */
.gradient-heading { background: linear-gradient(230.43deg, rgb(39,36,248) 1.83%, rgb(167,166,255) 35.91%, rgb(240,240,255) 76.44%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; mix-blend-mode: hard-light; }
.item-number { position: absolute; top: 0; left: 0; font-family: 'Epilogue', sans-serif; font-weight: 600; line-height: 1; letter-spacing: -6.4px; background: linear-gradient(229.89deg, rgb(39,36,248) 24.27%, rgb(167,166,255) 67.27%, rgb(240,240,255) 169.7%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; mix-blend-mode: hard-light; pointer-events: none; user-select: none; z-index: 0; }
.morph-wrap { position: relative; overflow: hidden; }
.morph-spacer { display: block; visibility: hidden; font-family: 'Epilogue', sans-serif; font-weight: 600; letter-spacing: -1.2px; line-height: 1.5; }
.morph-a,
.morph-b {
  position: absolute; top: 0; left: 0; right: 0;
  color: #ffffff;
  background: linear-gradient(193.34deg, #2724F8 37.54%, #A7A6FF 27.42%, #F0F0FF 104.68%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: hard-light;
}
.morph-a { font-family: 'Epilogue', sans-serif; font-weight: 600; letter-spacing: -1.2px; line-height: 1.5; }
.morph-b { font-family: 'Playfair Display', serif; font-weight: 500; font-style: italic; letter-spacing: -1.35px; line-height: 1.33; white-space: nowrap; opacity: 0; }
.why-item { opacity: 1; }
.morph-a .word { position: relative; overflow: hidden; vertical-align: top; }
.morph-a .word .before { position: relative; }
.morph-a .word .after { position: absolute; top: 0; left: 0; }
.morph-a .word .char { display: inline-block; -webkit-text-fill-color: #ffffff; transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); }
.morph-a .word .after .char { transform: translateY(var(--enter-dir, 110%)); }
@media (hover: hover) {
  /* Scoped to the title itself (.morph-wrap), not the whole .why-item row
     — hovering the description or image below shouldn't also trigger it. */
  .morph-wrap:hover .morph-a .word .before .char { transform: translateY(var(--exit-dir, -110%)); }
  .morph-wrap:hover .morph-a .word .after .char { transform: translateY(0); }
}
.gradient-text .word { position: relative; overflow: hidden; vertical-align: top; }
.gradient-text .word .before { position: relative; }
.gradient-text .word .after { position: absolute; top: 0; left: 0; }
.gradient-text .word .char { display: inline-block; -webkit-text-fill-color: #ffffff; transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); }
.gradient-text .word .after .char { transform: translateY(var(--enter-dir, 110%)); }
@media (hover: hover) {
  .gradient-text:hover .word .before .char { transform: translateY(var(--exit-dir, -110%)); }
  .gradient-text:hover .word .after .char { transform: translateY(0); }
}
#why-inner { will-change: transform; }
.why-shadow { position: fixed; left: 0; right: 0; bottom: 0; height: 90px; z-index: 20; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(7,7,7,0) 0%, rgba(7,7,7,0.85) 100%); }
@media (max-width: 1023px) { .why-shadow { display: none; } }
.why-fade { height: 38%; background: linear-gradient(to bottom, transparent 0%, #070707 100%); }
/* Desktop: no pinned/clipped reading window — the list is as tall as its
   content and the page simply scrolls (see "why section" in main.js). */
@media (min-width: 1024px) {
  #why-section { padding-top: 0; }  /* was 130px for the old pinned layout; the button above already gives 120px */
  #why-section .why-viewport { height: auto; }
  #why-section #why-items-scroll { position: static; overflow: visible; }
  #why-section .why-fade { display: none; }
  /* the old CSS-sticky offset would stack on top of the ScrollTrigger pin */
  #why-section .anim-heading.hidden { position: relative !important; top: 0 !important; }
  #why-section .why-item:last-child { padding-bottom: 35px; }
}

/* pillars */
.pillars-card {
  background: radial-gradient(ellipse 80% 70% at 15% -5%, #A7A6FF 0%, #6765FC 28%, #2724F8 55%, #2724F8 100%);
  opacity: 0;
  transform: translateY(36px) scale(0.97);
}
.pillar-bar { transform: scaleY(0); transform-origin: center bottom; }
.pillar-col { opacity: 0; transform: translateY(28px); }
.arrow-btn { position: relative; overflow: hidden; transition: background-color 0.22s ease; }
.arrow-btn:hover { background-color: rgba(255,255,255,0.18); }
@media (min-width: 1024px) {
  .pillar-col + .pillar-col { border-left: 1px solid rgba(255,255,255,0.2); padding-left: 40px; }
}
@media (max-width: 767px) {
  .pillar-bar { width: 16px !important; height: 44px !important; }
}

/* included */
#inc-scroll { scrollbar-width: none; -ms-overflow-style: none; }
#inc-scroll::-webkit-scrollbar { display: none; }
#inc-inner { will-change: transform; }
.content-item { opacity: 0; transform: translateY(20px); }
.inc-img-panel { position: relative; width: 100%; border-radius: 15px; overflow: hidden; }
.inc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; background-size: cover; background-position: center; }
.inc-img:first-child { opacity: 1; }
.content-item.is-active h3 { color: #A7A6FF; }
.content-item h3 { transition: color 0.35s ease; }
.inc-fade { height: 38%; background: linear-gradient(to bottom, transparent 0%, #070707 100%); }
@media (max-width: 1023px) {
  .content-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* quote text split animation */
.ts-line { overflow: hidden; padding-bottom: 0.15em; margin-bottom: -0.15em; }

/* reviews */
.reviews-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  letter-spacing: -2px;
  line-height: normal;
  display: inline-block;
  background: linear-gradient(192.49deg, rgb(39,36,248) 1.83%, rgb(167,166,255) 35.91%, rgb(240,240,255) 76.44%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: hard-light;
}
.carousel-viewport {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 120px, black calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 120px, black calc(100% - 120px), transparent 100%);
}
.carousel-viewport.is-dragging { cursor: grabbing; }
.carousel-track {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  will-change: transform;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .carousel-track {
    padding-left: 0;
    padding-right: 0;
  }
}
.review-card {
  flex-shrink: 0;
  width: 393px;
  height: 285px;
  padding: 30px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .review-card { width: 320px; height: auto; min-height: 260px; }
}
@media (max-width: 767px) {
  .review-card { width: calc(100vw - 80px); height: auto; min-height: 240px; }
  .carousel-track { gap: 10px; padding-left: 40px; padding-right: 40px; }
  .carousel-viewport {
    width: 100vw;
    margin-left: -20px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .carousel-viewport::before,
  .carousel-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 65px;
    z-index: 10;
    pointer-events: none;
  }
  .carousel-viewport::before {
    left: 0;
    background: linear-gradient(to right, #070707, transparent);
  }
  .carousel-viewport::after {
    right: 0;
    background: linear-gradient(to left, #070707, transparent);
  }
}
.nav-btn {
  position: relative; overflow: hidden;
  width: 45px; height: 45px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.45);
  background: transparent;
  color: white;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, opacity 0.2s ease, border-color 0.22s ease;
  outline: none;
}
.nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.9); }
.nav-btn:active:not(:disabled) { transform: scale(0.96); }
.nav-btn:disabled { opacity: 0.22; cursor: not-allowed; transform: none !important; }
.svc-dot {
  display: block;
  height: 7px; width: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  transition: width 0.35s cubic-bezier(0.34,1.56,0.64,1), background-color 0.3s ease;
  flex-shrink: 0;
}
.svc-dot.active { width: 22px; border-radius: 3px; background: #2724F8; }
.dots-row { display: flex; align-items: center; gap: 8px; }
.dot {
  height: 7px; width: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.34,1.56,0.64,1), background-color 0.3s ease;
  flex-shrink: 0;
}
.dot.active { width: 22px; background: #2724F8; }
.dot:hover:not(.active) { background: rgba(255,255,255,0.45); }
.google-btn  { outline: none; }

/* industries */
.row-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 180px, black calc(100% - 180px), transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0, black 180px, black calc(100% - 180px), transparent 100%);
}
.scroll-track { display: flex; gap: 20px; width: max-content; }
.industry-card {
  flex-shrink: 0;
  width: clamp(280px, 30vw, 432px);
  padding: 30px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,10,14,0.45);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  gap: 28px;
  cursor: default;
  transition: background 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
.industry-card:hover {
  background: rgba(10,10,14,0.65);
  border-color: rgba(255,255,255,0.22);
}

/* insights */
.ins-arrow {
  position: relative; overflow: hidden;
  width: 45px; height: 45px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease;
  outline: none;
}
.ins-arrow:hover { background: rgba(255,255,255,0.1); border-color: white; }
.art-img { position: relative; border-radius: 15px; overflow: hidden; flex-shrink: 0; }
.art-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* cta */
.cta-btn { transition: gap 0.6s cubic-bezier(0.16, 1, 0.3, 1); outline: none; }
.cta-btn:hover { gap: 22px; }

/* faq section */
.acc-btn {
  width: 45px; height: 45px; min-width: 45px;
  border-radius: 50%; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer; outline: none;
}
.btn-fill {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(201.55deg, rgb(39,36,248) 1.83%, rgb(167,166,255) 35.91%, rgb(240,240,255) 76.44%);
  mix-blend-mode: hard-light; transition: opacity 0.35s ease, background-color 0.25s ease;
}
.btn-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.85);
  opacity: 0; transition: opacity 0.35s ease, border-color 0.25s ease;
}
.btn-icon {
  position: relative; z-index: 1; width: 13px; height: 13px; display: block;
  transform: rotate(180deg);
  transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
}
.acc-item.open .btn-fill { opacity: 0; }
.acc-item.open .btn-ring { opacity: 1; }
.acc-item.open .btn-icon { transform: rotate(0deg); }

/* subtle hover feedback — previously these accordion toggles had none at
   all, unlike every other circular arrow/icon button on the site. */
.acc-btn:hover .btn-fill { background-color: #2724F8; }
.acc-btn:hover .btn-ring { border-color: #2724F8; }

/* Capabilities section (single-service-category.php) sits on its own
   colourful gradient card (.contact-bg) — the button's old blue-to-white
   gradient fill clashed against it. Rebuilt to match .ins-arrow exactly
   (same outline circle, same flying-arrow hover) instead of the filled
   circle other accordions use — no border-color swap on hover, just the
   same subtle background tint + arrow fly used on the "Latest insights"
   cards. Scoped to this card only — other accordions keep the original
   filled look. */
.capabilities-card .acc-btn {
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
  overflow: hidden;
  transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.42s cubic-bezier(0.4,0,0.2,1);
  transform: rotate(180deg);
}
.capabilities-card .acc-btn:hover { background: rgba(255,255,255,0.1); border-color: white; }
/* rotates to show which way is "open," same convention as the other
   accordions' single-icon rotation (main.js toggles .acc-item's "open"
   class on click). */
.capabilities-card .acc-item.open .acc-btn { transform: rotate(0deg); }
.capabilities-card .acc-btn:hover .nav-cta-arrow:not(.nav-cta-arrow--in) { transform: translate(45px, -45px); }

/* "Approach" section — solid blue circle (was a blue-to-white gradient
   fill), same flying-arrow hover + open-state rotation as Capabilities,
   just filled instead of outlined. #approach-section is reused by the
   category hub, single Service, and Case Studies archive pages, so this
   covers all three. */
#approach-section .acc-btn {
  background: #2724F8;
  overflow: hidden;
  transition: background-color 0.22s ease, transform 0.42s cubic-bezier(0.4,0,0.2,1);
  transform: rotate(180deg);
}
#approach-section .acc-btn:hover { background-color: #4a47ff; }
#approach-section .acc-item.open .acc-btn { transform: rotate(0deg); }
#approach-section .acc-btn:hover .nav-cta-arrow:not(.nav-cta-arrow--in) { transform: translate(45px, -45px); }
#approach-section .acc-btn:hover .nav-cta-arrow--in { transform: translate(0, 0); }
.capabilities-card .acc-btn:hover .nav-cta-arrow--in { transform: translate(0, 0); }

/* "Marketing questions, answered honestly" FAQ (homepage #faq-section,
   singular — not the same as #faqs-section used elsewhere, which is a
   different, simpler accordion pattern). Same solid-blue treatment as
   #approach-section. */
#faq-section .acc-btn {
  background: #2724F8;
  overflow: hidden;
  transition: background-color 0.22s ease, transform 0.42s cubic-bezier(0.4,0,0.2,1);
  transform: rotate(180deg);
}
#faq-section .acc-btn:hover { background-color: #4a47ff; }
#faq-section .acc-item.open .acc-btn { transform: rotate(0deg); }
#faq-section .acc-btn:hover .nav-cta-arrow:not(.nav-cta-arrow--in) { transform: translate(45px, -45px); }
#faq-section .acc-btn:hover .nav-cta-arrow--in { transform: translate(0, 0); }
.acc-answer {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows 0.48s cubic-bezier(0.4,0,0.2,1);
}
.acc-item.open .acc-answer { grid-template-rows: 1fr; }
.acc-answer-inner {
  min-height: 0; padding-top: 0;
  transition: padding-top 0.48s cubic-bezier(0.4,0,0.2,1);
}
.acc-item.open .acc-answer-inner { padding-top: 28px; }
.acc-trigger { cursor: pointer; }
.faq-img-wrap {
  position: relative; border-radius: 15px; overflow: hidden; flex-shrink: 0;
}
.faq-img-wrap img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* contact */
.contact-bg {
  border-radius: 15px; overflow: hidden;
  background: radial-gradient(ellipse 160% 130% at 68% -20%,
    #f0f0ff 0%, #cccbff 12%, #a7a6ff 28%, #6765fc 52%, #2724F8 72%, #2724F8 100%);
}
.form-field {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 9px; padding: 10px 25px;
  color: white; font-family: 'Epilogue', sans-serif;
  font-size: clamp(13px,1.2vw,15px); font-weight: 300;
  letter-spacing: -0.45px; line-height: 2;
  outline: none; width: 100%; transition: border-color 0.22s ease;
}
.form-field::placeholder { color: rgba(255,255,255,0.75); }
.form-field:focus { border-color: white; }
textarea.form-field { resize: none; height: 177px; }
.submit-btn {
  background: white; display: flex; align-items: center;
  justify-content: space-between; height: 55px; width: 240px;
  border-radius: 66px; overflow: hidden; padding: 5px 5px 5px 25px;
  border: none; cursor: pointer; outline: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.submit-btn:hover { transform: scale(1.03); box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.submit-btn:active { transform: scale(0.98); }
.submit-btn .btn-label {
  font-family: 'Epilogue',sans-serif; font-weight: 600; font-size: 20px;
  letter-spacing: -1px; color: #070707; white-space: nowrap;
}
.submit-btn .btn-circle {
  background: #2724F8; width: 45px; height: 45px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.25s ease;
}
.submit-btn:hover .btn-circle { transform: scale(1.08); }
@media (max-width:639px) { .submit-btn { width: 100%; } }

/* faqs section */
#faqs-section .acc-item { flex: 1 0 0; min-width: 0; border-bottom: 1px solid #282828; padding-bottom: 15px; transition: padding-bottom 0.48s cubic-bezier(0.4,0,0.2,1); }
#faqs-section .acc-item.open { padding-bottom: 30px; }
/* No circle here on purpose — just the bare arrow, rotating for
   open/close like before, plus the same flying-arrow hover used
   elsewhere (hovering anywhere on the question row previews it, since
   that whole row is the click target). */
.acc-icon-wrap {
  position: relative; width: 13px; height: 13px; min-width: 13px;
  display: block; overflow: hidden;
  transform: rotate(180deg);
  transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
}
/* the shared .nav-cta-arrow rule offsets top/left:16px to center a 13px
   icon inside a ~40-45px circle — this box IS the icon (13x13, no
   circle), so that offset would push it almost entirely out of view. */
.acc-icon-wrap .nav-cta-arrow { top: 0; left: 0; }
#faqs-section .acc-item.open .acc-icon-wrap { transform: rotate(0deg); }
/* While closed, .acc-icon-wrap is rotated 180° — a child's translate(x,y)
   then renders as translate(-x,-y) on screen, so the "fly out" direction
   looked reversed/broken on first hover (before the item was ever
   opened). Flipped the sign here to compensate, so it visually flies the
   same way regardless of open/closed state. The "fly in" target stays
   translate(0,0) either way since rotation doesn't move the origin. */
#faqs-section .acc-item:not(.open) .acc-trigger:hover .acc-icon-wrap .nav-cta-arrow:not(.nav-cta-arrow--in) { transform: translate(-45px, 45px); }
#faqs-section .acc-item.open .acc-trigger:hover .acc-icon-wrap .nav-cta-arrow:not(.nav-cta-arrow--in) { transform: translate(45px, -45px); }
.acc-trigger:hover .acc-icon-wrap .nav-cta-arrow--in { transform: translate(0, 0); }

/* footer */
.nav-link {
  font-family: 'Epilogue',sans-serif; font-weight: 300; font-size: 15px;
  color: white; letter-spacing: -0.45px; line-height: 2;
  text-decoration: none; display: block; transition: opacity 0.2s ease;
}
.nav-link:hover { opacity: 0.65; }

/* desktop menu trigger — icon-only, sits beside "Contact us", opens the
   same full-screen #mobile-menu overlay used on smaller screens (see
   header.php + main.js). Lines fan out slightly and brighten on hover. */
.nav-menu-trigger { background: transparent; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease; }
.nav-menu-trigger:hover { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
.nav-menu-trigger-line { transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), width 0.3s ease, opacity 0.25s ease; }
.nav-menu-trigger:hover .nav-menu-trigger-line:nth-child(1) { transform: translateX(-2px); width: 14px; }
.nav-menu-trigger:hover .nav-menu-trigger-line:nth-child(2) { width: 22px; }
.nav-menu-trigger:hover .nav-menu-trigger-line:nth-child(3) { transform: translateX(2px); width: 14px; }

/* hamburger -> X morph — both the desktop trigger and the mobile
   hamburger share this markup/class, so opening the menu from either
   morphs its own icon smoothly instead of it just vanishing behind the
   overlay (the nav bars now sit above the overlay's z-index for exactly
   this reason — see #site-nav / #site-nav-mob). Same 6px gap + 1.5px
   line height on both, so one 7.5px offset works for both sizes. */
.nav-menu-trigger.is-open .nav-menu-trigger-line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-menu-trigger.is-open .nav-menu-trigger-line:nth-child(2) { opacity: 0; }
.nav-menu-trigger.is-open .nav-menu-trigger-line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* full-screen menu — desktop layout for the "Services" mega panel.
   #menu-links-col holds the primary items (About, Services, ...);
   #menu-mega-panel sits to its right and is only ever shown ≥1024px
   (see header.php's lg:grid / lg:hidden split) — on narrower screens the
   simple expand-in-place accordion further down handles the same job. */
@media (min-width: 1024px) {
  #menu-body { padding-top: 40px; padding-bottom: 40px; }
  #menu-links-col .menu-item,
  #menu-links-col .menu-item-dropdown > div { border-bottom-color: rgba(255,255,255,0.1); }
}
.menu-mega-panel {
  flex: 1; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  opacity: 0; transform: translateX(14px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-mega-panel.is-open { opacity: 1; transform: translateX(0); pointer-events: auto; }
.menu-mega-col { display: flex; flex-direction: column; gap: 4px; }
.menu-mega-col-title {
  font-family: 'Epilogue', sans-serif; font-weight: 600; font-size: 22px;
  letter-spacing: -0.03em; color: #ffffff; text-decoration: none;
  padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: color 0.2s ease;
}
.menu-mega-col-title:hover { color: #a7a6ff; }
.menu-mega-link {
  font-family: 'Epilogue', sans-serif; font-weight: 400; font-size: 15px;
  letter-spacing: -0.02em; color: rgba(255,255,255,0.7); text-decoration: none;
  padding: 8px 0; transition: color 0.2s ease;
}
.menu-mega-link:hover { color: #ffffff; }

/* every primary item in the full-screen menu (About, Services, Articles,
   Case Studies, Contact) gets the same hover color change — not just
   Services. */
.menu-primary-label { transition: color 0.35s ease; }
.menu-item:hover .menu-primary-label,
.menu-dropdown-navlink.menu-primary-label:hover { color: #a7a6ff; }

/* mobile menu "Services" disclosure — tap the circle to expand/collapse
   the category list; tapping the label itself still navigates straight
   to the Services archive. */
.menu-dropdown-panel {
  max-height: 0; overflow: hidden; display: flex; flex-direction: column;
  transition: max-height 0.35s ease, padding-bottom 0.35s ease;
}
.menu-item-dropdown.is-open .menu-dropdown-panel {
  max-height: 400px; padding-bottom: 18px;
}
.menu-dropdown-link {
  padding: 12px 0 12px 8px; color: rgba(255,255,255,0.75);
  font-family: 'Epilogue', sans-serif; font-weight: 500;
  font-size: 20px; letter-spacing: -0.03em; text-decoration: none;
  border-left: 2px solid rgba(255,255,255,0.15);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.menu-dropdown-link:hover { color: #ffffff; border-color: #2724F8; }
.menu-dropdown-chevron { transition: transform 0.3s ease; }
.menu-item-dropdown.is-open .menu-dropdown-chevron { transform: rotate(90deg); }

.nav-cta { transition: gap 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-cta:hover { gap: 28px; }
.quote-divider {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
}
.quote-divider-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2724F8 0%, #A7A6FF 50%, #F0F0FF 100%);
  border-radius: 999px;
}

.quote-cta { transition: gap 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, border-color 0.4s ease; }
.quote-cta:hover { gap: 22px; background-color: white; border-color: white; }
.quote-cta-label { transition: color 0.4s ease; }
.quote-cta:hover .quote-cta-label { color: #070707; }
.nav-cta-circle { position: relative; overflow: hidden; }
.nav-cta-arrow { position: absolute; top: 16px; left: 16px; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-cta-arrow--in { transform: translate(-45px, 45px); }
.nav-cta:hover .nav-cta-arrow:not(.nav-cta-arrow--in),
.menu-cta:hover .nav-cta-arrow:not(.nav-cta-arrow--in),
.hero-btn-secondary:hover .nav-cta-arrow:not(.nav-cta-arrow--in),
.quote-cta:hover .nav-cta-arrow:not(.nav-cta-arrow--in),
.hov-btn:hover .nav-cta-arrow:not(.nav-cta-arrow--in),
.arrow-btn:hover .nav-cta-arrow:not(.nav-cta-arrow--in),
.ins-arrow:hover .nav-cta-arrow:not(.nav-cta-arrow--in),
.nav-cta-circle-wrap:hover .nav-cta-arrow:not(.nav-cta-arrow--in),
.cta-btn:hover .nav-cta-arrow:not(.nav-cta-arrow--in) { transform: translate(45px, -45px); }
.nav-cta:hover .nav-cta-arrow--in,
.menu-cta:hover .nav-cta-arrow--in,
.hero-btn-secondary:hover .nav-cta-arrow--in,
.quote-cta:hover .nav-cta-arrow--in,
.hov-btn:hover .nav-cta-arrow--in,
.arrow-btn:hover .nav-cta-arrow--in,
.ins-arrow:hover .nav-cta-arrow--in,
.nav-cta-circle-wrap:hover .nav-cta-arrow--in,
.cta-btn:hover .nav-cta-arrow--in { transform: translate(0, 0); }

/* full-screen menu items — the arrow circle fades and scales in smoothly
   (rather than an instant opacity snap) as the pointer moves between
   items, matching the flying-arrow interaction used everywhere else. */
.menu-item-circle {
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-cta-circle-wrap:hover .menu-item-circle { opacity: 1; transform: scale(1); }

/* review nav — horizontal arrow fly */
.nav-arrow-h { position: absolute; top: 17px; left: 15px; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-btn-prev .nav-arrow-h--in { transform: translate(50px, 0); }
.nav-btn-next .nav-arrow-h--in { transform: translate(-50px, 0); }
.nav-btn-prev:hover:not(:disabled) .nav-arrow-h:not(.nav-arrow-h--in) { transform: translate(-50px, 0); }
.nav-btn-prev:hover:not(:disabled) .nav-arrow-h--in { transform: translate(0, 0); }
.nav-btn-next:hover:not(:disabled) .nav-arrow-h:not(.nav-arrow-h--in) { transform: translate(50px, 0); }
.nav-btn-next:hover:not(:disabled) .nav-arrow-h--in { transform: translate(0, 0); }

/* wrapper */
.wrapper {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .wrapper {
    padding-left: 60px;
    padding-right: 60px;
  }
}

/* sticky nav */
#site-nav, #site-nav-mob { will-change: top; }
#nav-links-pill, #mob-links-pill {
  transition: background-color 0.65s ease, border-radius 0.65s ease;
}

/* included section — mobile per-item image */
.inc-mobile-img {
  width: 100%;
  height: 220px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
}

/* mobile logo marquee */
@media (max-width: 1023px) {
  #logo-slots.logo-marquee {
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding-bottom: 0;
  }
  .logo-marquee-inner {
    display: flex;
    align-items: center;
    animation: logoMarquee 14s linear infinite;
  }
  .logo-marquee-track {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-shrink: 0;
    padding-right: 28px;
  }
  @keyframes logoMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
}

/* ── shared component styles ──────────────────────────────────────────
   Consolidated from identical per-template inline <style> blocks
   (logo-list-section, case-study-carousel — see template-parts/) so each
   rule is defined once instead of copy-pasted into every caller. */

.logo-list-bg {
  border-radius: 15px;
  overflow: hidden;
  background: radial-gradient(ellipse 65% 320% at 88% -140%,
    #f0f0ff 0%, #cccbff 14%, #a7a6ff 28%, #8785fd 42%, #6765fc 56%, #4744fa 74%, #2724f8 92%, #2724f8 100%);
}

.parent-hero-eyebrow,
.case-eyebrow,
.case-meta-tag {
  letter-spacing: 6.45px;
  text-transform: uppercase;
}

.case-viewport { overflow: hidden; width: 100%; }
.case-track { display: flex; will-change: transform; }
.case-slide { flex: 0 0 100%; min-width: 0; }
.case-stat-value {
  background: linear-gradient(90deg, #2724F8 0%, #6765FC 40%, #A7A6FF 70%, #F0F0FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: hard-light;
}

/* case study cards aren't wired to real destinations yet, so no hand cursor implying otherwise */
.case-card { cursor: default; }

/* "equal" service card row (Services category hub, homepage featured
   services once picked) — reuses the same pin-scroll mechanism as the
   homepage's default small/wide/tall masonry, just with same-size cards
   since the list length is dynamic. */
.service-card[data-type="equal"] { width: calc((var(--cw) - (var(--eq-cols, 4) - 1) * 10px) / var(--eq-cols, 4)); flex-shrink: 0; }
@media (max-width: 1023px) {
  .service-card[data-type="equal"] .hov-desc { width: 100% !important; }
}
.svc-scrollbar { position: relative; width: 100%; height: 3px; border-radius: 999px; overflow: hidden; margin-top: 70px; }
.svc-scrollbar-fill { position: absolute; top: 0; left: 0%; height: 100%; width: 0%; background: linear-gradient(90deg, #2724F8 0%, #A7A6FF 50%, #F0F0FF 100%); border-radius: 999px; }
@media (max-width: 1023px) { .svc-scrollbar { display: none; } }