/* ==========================================================================
   index4 exploration — refresh pass
   1. Two-font system: Mattone Regular (headings/buttons), Poppins (rest)
      — defined in css/typography.css
   2. Sharp corners everywhere — no rounded borders
   3. No gradients / glows / animated lights / decorative background graphics
      — background matches the original site: flat solid dark tone
   Loaded after vixan-style.css so these rules win the cascade.
   ========================================================================== */

/* ---------- 1. Brand colours ---------- */
:root {
  --accent-color: #5530c6 !important;
  --primary-color: #5530c6 !important;
  --secondary-color: #5530c6 !important;
  --accent: #5530c6 !important;
  --violet: #5530c6 !important;
}

/* Eradicate all template orange #ff6b00 defaults */
a:hover,
a:focus,
.cs_accent_color,
.cs_color_1,
.cs_accent_star,
.cs_accent_text,
.cs_hero_btn,
.cs_pagination_item.active,
.swiper-pagination-bullet-active,
.cs_accordian_item.active .cs_faq_num,
.cs_nav_list li.active>a,
.cs_footer_nav li.active>a {
  color: #5530c6 !important;
}

.cs_accent_bg,
.cs_btn.cs_style_1,
.cs_btn.cs_accent_bg {
  background-color: #5530c6 !important;
  border-color: #5530c6 !important;
  color: #ffffff !important;
}

/* Remove any button background pseudo elements (e.g., orange circle/box) */
.cs_btn.cs_style_1::before,
.cs_btn.cs_style_1::after,
.cs_btn::before,
.cs_btn::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
}

.cs_btn.cs_style_1 {
  padding: 14px 28px !important;
  background-color: #5530c6 !important;
  border: 1px solid #5530c6 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
}

.cs_btn.cs_style_1:hover,
.cs_btn.cs_accent_bg:hover {
  background-color: #4322a3 !important;
  border-color: #4322a3 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.cs_btn.cs_style_1 span {
  color: #ffffff !important;
  position: relative !important;
  z-index: 2 !important;
  font-variant-emoji: text !important;
}

/* Fix iOS Safari rendering ↗ ← → as colored emoji boxes — force text presentation */
.cs_btn,
.cs_btn span,
.cs_btn b,
.cs_nav_list a,
.sh-cs-nav-link,
.sh-cs-back-link,
.cs_page_hero_subtitle,
.cs_subheading {
  font-variant-emoji: text !important;
}


/* ---------- Solid Filled Purple Ball Cursor (Elastic Motion) ---------- */
.cs_cursor_1,
.cs_cursor_ball {
  position: fixed !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background-color: #5530c6 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  left: 0 !important;
  top: 0 !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  opacity: 0;
  display: block !important;
  visibility: visible !important;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: opacity 0.25s ease, background-color 0.2s ease !important;
  will-change: transform !important;
}

.cs_cursor_2 {
  display: none !important;
}

.cs_cursor_1.hovered,
.cs_cursor_ball.hovered {
  background-color: #6236e8 !important;
  box-shadow: none !important;
}

@media (hover: none) and (pointer: coarse),
(max-width: 1024px) {

  .cs_cursor_1,
  .cs_cursor_2,
  .cs_cursor_ball,
  .cs_cursor_lg,
  .cs_cursor_sm {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

.cs_scrollup {
  background-color: #16161A !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
}

.cs_scrollup:hover {
  background-color: #5530c6 !important;
  border-color: #5530c6 !important;
  color: #ffffff !important;
}

/* Typography (families, weights, heading/lead/body roles) lives in
   css/typography.css — this file only references its tokens. */

/* ---------- 2. Sharp corners only (Images & All Elements) ---------- */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

img,
picture,
picture img,
video,
canvas,
svg:not(.cs_cursor_1):not(.cs_cursor_2):not(.cs_cursor_ball),
figure,
.cov,
.cov img,
.cov .ph,
.proj,
.proj .cov,
.cs_work_card,
.cs_work_card_img_wrap,
.cs_work_card_img,
.cs_work_clean_img_wrap,
.cs_work_clean_img,
.cs_portfolio,
.cs_portfolio_img,
.cs_portfolio_img img,
.cs_portfolio_overlay,
.cs_card,
.cs_card img,
.sh-service-card__img,
.sh-service-card__img img,
.cs_about_img,
.cs_about_img img,
.cs_about_img_wrap,
.cs_team_thumb,
.cs_team_thumb img,
.cs_post_thumb,
.cs_post_thumb img,
.cs_case_study_thumb,
.cs_case_study_thumb img,
.cs_hero_collage_img,
.cs_hero_img,
.cs_hero_img_wrap,
.cs_hero_img img,
.reveal,
.reveal img,
.rounded,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4,
.rounded-5,
.rounded-pill,
.rounded-circle,
[class*="img"],
[class*="thumb"],
[class*="portfolio"],
[class*="card"],
[class*="banner"] {
  border-radius: 0 !important;
}

/* exceptions: cursor and testimonial author avatar are circles by design */
.cs_cursor_1,
.cs_cursor_2,
.cs_cursor_ball,
.cs_testimonial_avatar,
.cs_testimonial_avatar img {
  border-radius: 50% !important;
}

/* ---------- 3. No gradients / glows / animated lights / bg graphics ---------- */
/* This template ships a light/dark toggle driven by CSS variables
   (:root = light theme, .dark = dark theme). The original site never had
   a toggle at all — one flat dark theme throughout. So instead of forcing
   a background color (which would leave light-theme text colors invisible
   against it), pin both variable sets to the same dark values and hide
   the now-pointless toggle UI. body.dark is also set in the HTML so the
   page is correct even before JS runs. */
:root,
.dark {
  --drak-color: #0d0d10 !important;
  --cr_banner-color: #101010 !important;
  --body-color: #e0e0e0 !important;
  --heading-color: #ffffff !important;
  --primary-color: #ffffff !important;
  --common-color-white: #000000 !important;
  --common-color-black: #ffffff !important;
}

.cs_toggle {
  display: none !important;
}

/* the mouse-reactive animated grid canvas is removed from the markup;
   this just guards against any residual layout box */
.hero-line-canvas {
  display: none !important;
}

/* decorative floating squiggle/blob SVG shapes behind sections */
.cs_shape_1,
.cs_shape_2 {
  display: none !important;
}

.cs_loader_brand_kicker,
.cs_loader_cursor {
  display: none !important;
}

/* Loader: just a small "STUDIO HALFWAY" label + the yellow progress line */
.cs_loader_label {
  display: block !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: var(--fs-kicker) !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-align: center !important;
  padding-left: 0.25em !important;
  /* balance the trailing letter-spacing */
}

.cs_loader_progress_wrap {
  width: 160px !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  margin: 22px auto 0 auto !important;
  overflow: hidden !important;
}

.cs_loader_progress_bar {
  background: #fad664 !important;
  box-shadow: none !important;
}

/* Navbar CTA Button: Brand Blue/Violet #5530c6
   Shared with .btn-view-all so every primary CTA looks identical */
.btn-view-all,
.work-foot .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.cs_nav_cta_btn,
body.cs_dark .cs_nav_cta_btn,
.btn-view-all,
.work-foot .btn {
  background-color: #5530c6 !important;
  background: #5530c6 !important;
  color: #ffffff !important;
  border: 1px solid #5530c6 !important;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: 13px !important;
  letter-spacing: var(--ls-button) !important;
  text-transform: uppercase !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-view-all svg {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  stroke-width: 2.2 !important;
}

.cs_nav_cta_btn svg,
body.cs_dark .cs_nav_cta_btn svg,
.btn-view-all svg,
.cs_btn svg,
.cs_side_cta_btn svg,
.cs_faq_btn svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
}

.cs_nav_cta_btn:hover,
body.cs_dark .cs_nav_cta_btn:hover,
.btn-view-all:hover,
.work-foot .btn:hover {
  background-color: #4524ab !important;
  background: #4524ab !important;
  border-color: #4524ab !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(85, 48, 198, 0.4) !important;
}

.cs_nav_cta_btn:hover svg,
body.cs_dark .cs_nav_cta_btn:hover svg,
.btn-view-all:hover svg,
.cs_btn:hover svg,
.cs_side_cta_btn:hover svg,
.cs_faq_btn:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  transform: translate(2px, -2px) !important;
}

* {
  text-shadow: none !important;
}

/* breathing room: sharp corners read tighter than rounded ones, so give
   pill-shaped buttons and tags a touch more internal padding */
.cs_btn,
.cs_text_btn {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* ---------- 4. Hero & Work sections: match index.html's desktop layout ----------
   Ported from css/theme.css (the live site's hero-grid/collage-anchor/work-grid
   rules) since vixan-style.css doesn't define these classes at all. The hero's
   own decorative radial-gradient wash is intentionally left out — flat
   background per section 3 above. Rounded corners on the work cards/tags are
   kept as-is: matching index.html's exact look here was the explicit ask,
   taking precedence over the sharp-corners rule for just these elements. */
.cs_hero_container {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1520px !important;
  width: 100% !important;
  padding-left: clamp(36px, 6.5vw, 110px) !important;
  padding-right: clamp(36px, 6.5vw, 110px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px) {
  .cs_hero_container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.cs_hero_grid_layout {
  display: grid !important;
  /* 1.05 : 0.95 gives room for the 20% enlarged collage */
  grid-template-columns: 1.05fr 0.95fr !important;
  align-items: center !important;
  gap: clamp(2rem, 3.5vw, 4.5rem) !important;
  width: 100% !important;
}

.cs_hero.cs_style4 .cs_text_hero {
  margin-left: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.collage-anchor {
  width: 100% !important;
  aspect-ratio: 1 / 0.95 !important;
  position: relative !important;
  transform: translateY(20px) !important;
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
  max-width: 576px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  will-change: transform !important;
}

@media (max-width: 1024px) {
  .cs_hero_grid_layout {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }

  .collage-anchor {
    display: none !important;
  }
}

.cs_work_section,
.cs_work_section.t-paper,
#work {
  background: #ffffff !important;
  color: #16161A !important;
  position: relative !important;
  padding-top: clamp(70px, 8vw, 100px) !important;
  padding-bottom: 130px !important;
  z-index: 5 !important;
}

.shead {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 16px !important;
  margin-bottom: clamp(48px, 6vw, 72px) !important;
}

.shead h2 {
  color: #16161A !important;
  margin: 0 auto !important;
}

.shead h2 .em,
.shead h2 .cs_italic_em {
  color: #5530c6 !important;
  font-style: var(--fs-style) !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

.shead .lead {
  max-width: 60ch !important;
  color: #6B6877 !important;
  margin: 0 auto !important;
  opacity: 1 !important;
}

.work {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 36px !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
}

.proj {
  display: block !important;
  cursor: pointer !important;
  perspective: 1000px !important;
  transform-style: preserve-3d !important;
  text-decoration: none !important;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform !important;
}

.proj .cov {
  aspect-ratio: 5 / 4 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 24px !important;
  /* no border / light fill — they showed as a white line around the image
     on the dark hero collage */
  background: transparent !important;
  box-shadow: 0 14px 36px rgba(22, 22, 26, 0.08) !important;
  border: none !important;
  transition: box-shadow .5s ease, transform .5s ease !important;
}

.proj:hover .cov {
  box-shadow: 0 24px 54px rgba(22, 22, 26, 0.16) !important;
  transform: translateY(-4px) !important;
}

.proj .cov img,
.proj .cov .ph {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform !important;
}

.proj:hover .cov img,
.proj:hover .cov .ph {
  transform: scale(1.08) !important;
}

.proj .cov .tag {
  position: relative !important;
  z-index: 2 !important;
  font-size: 11px !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase !important;
  color: #0d0d10 !important;
  background: #ffd869 !important;
  border: none !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  font-weight: var(--fw-medium) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  transition: transform .3s ease, background .3s ease !important;
}

.proj:hover .cov .tag {
  transform: translateY(-2px) scale(1.04) !important;
}

.proj .meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 16px !important;
  margin-top: 20px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(22, 22, 26, 0.15) !important;
  transition: border-color .3s ease !important;
}

.proj .meta h3,
.proj .meta .serif {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: 25px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-body) !important;
  color: #16161A !important;
  margin: 0 !important;
  transition: color .3s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.proj .meta .cs_proj_arrow {
  color: #16161A !important;
  font-size: 18px !important;
  transition: color .3s ease, transform .3s ease !important;
}

.proj:hover .meta {
  border-color: #5530c6 !important;
}

.proj:hover .meta h3,
.proj:hover .meta .serif {
  color: #5530c6 !important;
  transform: translateX(4px) !important;
}

.proj:hover .meta .cs_proj_arrow {
  color: #5530c6 !important;
  transform: translate(4px, -4px) !important;
}

@media (max-width: 900px) {
  .work {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* Work Section Footer (Hourglass + Purple View All Projects Button) */
.work-foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 24px !important;
  margin-bottom: 0px !important;
  width: 100% !important;
}

.work-foot .fill-icon {
  height: 78px !important;
  width: auto !important;
  opacity: .9 !important;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.work-foot:hover .fill-icon,
.work-foot .fill-icon:hover {
  transform: rotate(180deg) !important;
}

/* Phones & tablets: hourglass and button side by side on one line */
@media (max-width: 768px) {
  .work-foot {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .work-foot .fill-icon {
    height: 52px !important;
  }
}

/* Phones: no hourglass — just the centred button */
@media (max-width: 767px) {
  .work-foot .fill-icon {
    display: none !important;
  }
}

/* ---------- 3. Innovative Solutions for Modern Consumer Brands (White Background & Typography) ---------- */
.cs_modern_needs_section,
#about {
  background: #ffffff !important;
  color: #16161A !important;
  padding-top: 20px !important;
  padding-bottom: clamp(60px, 7vw, 90px) !important;
  position: relative !important;
  z-index: 5 !important;
}

#about .cs_section_title {
  color: #16161A !important;
  margin: 0 !important;
}

#about .anim_text,
#about .cs_text p {
  color: #6B6877 !important;
  max-width: 60ch !important;
  margin-top: 24px !important;
  opacity: 1 !important;
}

/* 01, 02, 03 Numbers & Titles */
#about .cs_stroke_text span {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: clamp(32px, 3.5vw, 38px) !important;
  line-height: 1 !important;
  color: #16161A !important;
  -webkit-text-stroke: 1.5px #16161A !important;
  opacity: 0.9 !important;
  display: inline-block !important;
  margin-bottom: 8px !important;
}

#about .text-section h6 {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: 18px !important;
  color: #16161A !important;
  letter-spacing: var(--ls-h3) !important;
  margin-bottom: 8px !important;
}

#about .text-section p {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #6B6877 !important;
  margin: 0 !important;
}

/* Right Side Image & Callout Card: Sharp corners only, no rounded borders */
#about .cs_img_section img {
  border-radius: 0 !important;
  width: 100% !important;
  object-fit: cover !important;
  box-shadow: 0 16px 40px rgba(22, 22, 26, 0.12) !important;
}

/* Phones: a shorter, landscape crop so the image doesn't fill the screen */
@media (max-width: 767px) {
  #about .cs_img_section img {
    height: 300px !important;
  }
}

#about .cs_img_card_text,
.cs_img_card_text {
  display: none !important;
}

/* ---------- 5. Hero CTA buttons & industry marquee (from archive/index-v1-original.html) ----------
   Ported the exact background, sizing and button/marquee treatment from the
   original site, since matching it exactly was the explicit ask. Font-family
   is the one deliberate change: the original used DM Mono for buttons, which
   this page dropped entirely per the two-font rule (Mattone/Poppins only),
   so buttons use Mattone here instead — everything else (size, spacing,
   pill shape, colors, animation) is unchanged from the original. */
.hero {
  position: relative !important;
  background: #000 !important;
  overflow: hidden !important;
  /* Clearance for the fixed header */
  padding-top: 171px !important;
  /* Comfortable bottom spacing above the marquee strip */
  padding-bottom: clamp(48px, 5.5vw, 75px) !important;
  min-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@media screen and (min-width: 1440px) {
  .hero {
    min-height: 90vh !important;
    padding-bottom: 70px !important;
  }
}

@media screen and (max-width: 991px) {
  .hero {
    padding-top: 120px !important;
    padding-bottom: 45px !important;
    min-height: auto !important;
  }
}

/* Hero Cycling Text Words (chaos, intent, story) Color & Perfect Alignment */
.cs_title_text .cs_cycle,
.cs_hero.cs_style4 .cs_text_hero .cs_title_text .cs_cycle,
.cs_cycle {
  display: inline-block !important;
  overflow: hidden !important;
  height: 1.18em !important;
  line-height: 1.18 !important;
  vertical-align: -0.18em !important;
  position: relative !important;
  color: #ffd869 !important;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  letter-spacing: var(--ls-h1) !important;
}

.cs_cy_track {
  display: flex !important;
  flex-direction: column !important;
  animation: cs_hero_cyc 5s cubic-bezier(0.7, 0, 0.2, 1) infinite !important;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
}

.cs_cy_track span,
.cs_cycle span {
  display: block !important;
  height: 1.18em !important;
  line-height: 1.18 !important;
  color: #ffd869 !important;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  letter-spacing: var(--ls-h1) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('../assets/images/branding/gridbg.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.hcta {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  margin-top: 24px !important;
}

.cbtn {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: 13.5px !important;
  letter-spacing: var(--ls-button) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

.cbtn-pill,
.cbtn-pill:link,
.cbtn-pill:visited {
  border: 1.5px solid #5530c6 !important;
  color: #ffffff !important;
  padding: 9px 26px !important;
  border-radius: 100px !important;
  background: rgba(85, 48, 198, 0.1) !important;
}

.cbtn-pill:hover,
.cbtn-pill:focus,
.cbtn-pill:active {
  background: #5530c6 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(85, 48, 198, 0.4) !important;
}

.cbtn-link,
.cbtn-link:link,
.cbtn-link:visited {
  color: #ffffff !important;
  border-bottom: 2px solid #ffd869 !important;
  padding-bottom: 5px !important;
}

.cbtn-link:hover,
.cbtn-link:focus,
.cbtn-link:active {
  color: #ffd869 !important;
  border-bottom-color: #ffd869 !important;
  transform: translateY(-2px) !important;
}

.strip {
  border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  padding: 16px 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  position: relative !important;
  background: rgba(13, 13, 16, 0.6) !important;
  user-select: none !important;
}

.strip .track {
  display: inline-flex !important;
  gap: 40px !important;
  animation: index4Marquee 32s linear infinite !important;
  will-change: transform !important;
}

.strip .track span {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: 16px !important;
  letter-spacing: var(--ls-body) !important;
  color: #9A98A6 !important;
  font-style: var(--fs-style) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 40px !important;
  transition: color .3s ease !important;
}

.strip:hover .track span {
  color: rgba(255, 255, 255, 0.85) !important;
}

.strip .track span::after {
  content: "⁄" !important;
  color: rgba(255, 255, 255, .3) !important;
  font-style: var(--fs-style) !important;
}

@keyframes index4Marquee {
  to {
    transform: translateX(-50%);
  }
}

.cs_hero .cs_detils_text {
  max-width: none !important;
  color: rgba(255, 255, 255, .66) !important;
}

/* Phones: hero sub text is always exactly 3 lines (breaks set in index.html),
   so the size scales with the screen until the longest line fits */
@media (max-width: 767.98px) {
  .cs_hero .cs_detils_text {
    white-space: nowrap !important;
    /* longest phone line must fit between the 10.4vw side gutters */
    font-size: min(var(--fs-subtext), calc(3.9vw - 3px)) !important;
    font-weight: var(--fw-regular) !important;
    /* live site's hero lede is Regular */
  }
}

/* Mobile */
@media screen and (max-width: 768px) {
  .hero {
    padding-top: 108px !important;
    padding-bottom: 24px !important;
    min-height: auto !important;
  }

  .cs_hero.cs_style4 .cs_text_hero .cs_hero_line2 {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.15em !important;
  }

  .cs_hero.cs_style4 .cs_text_hero .cs_scribble {
    height: 0.52em !important;
    width: auto !important;
    margin-right: 0.15em !important;
  }

  .cs_hero .cs_detils_text,
  .cs_hero .anim_subtext {
    color: rgba(255, 255, 255, 0.72) !important;
    margin-top: 16px !important;
    margin-bottom: 20px !important;
    max-width: 100% !important;
  }

  .hcta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin-top: 18px !important;
    width: 100% !important;
  }

  .cbtn {
    font-size: 11px !important;
    letter-spacing: var(--ls-button) !important;
    flex-shrink: 0 !important;
  }

  .cbtn-pill {
    padding: 8px 15px !important;
    width: auto !important;
  }

  .cbtn-link {
    font-size: 11px !important;
    padding-bottom: 2px !important;
    width: auto !important;
  }

  .strip {
    padding: 12px 0 !important;
  }

  .strip .track,
  .strip .track span {
    gap: 28px !important;
  }

  .strip .track span {
    font-size: 13.5px !important;
  }
}

@media screen and (max-width: 360px) {

  .hcta {
    gap: 8px !important;
  }

  .cbtn {
    font-size: 10px !important;
  }

  .cbtn-pill {
    padding: 7px 12px !important;
  }
}

/* Global Site Branding / Header Logo Size */
.cs_site_header .cs_main_header .cs_site_branding img,
.cs_site_branding.logo-white img,
.cs_site_branding.logo-dark img {
  height: clamp(48px, 4.5vw, 62px) !important;
  max-height: 75px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Align mobile navbar icon to right edge matching logo left spacing */
.cs_site_header.cs_style1 .cs_main_header_right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.cs_site_header.cs_style1 .cs_toolbox {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Hide drawer navigation button on desktop website by default */
.cs_icon_btn,
.cs_site_header.cs_style1 .cs_icon_btn,
.cs_site_header .cs_icon_btn {
  display: none !important;
}

/* Show drawer navigation button only on phone/tablet mobile view (screen width <= 1199px) */
@media screen and (max-width: 1199px) {

  .cs_icon_btn,
  .cs_site_header.cs_style1 .cs_icon_btn,
  .cs_site_header .cs_icon_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 0 6px 12px !important;
    margin-right: 0 !important;
    cursor: pointer !important;
  }

  .cs_site_header.cs_style1 .cs_icon_btn .cs_icon_btn_in {
    width: 24px !important;
    margin-right: 0 !important;
  }
}

/* ---------- Navbar Background ---------- */
.cs_site_header,
.cs_site_header.cs_style1,
.cs_site_header.cs_sticky_header {
  background: rgba(13, 13, 16, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

.cs_site_header.cs_style1 .cs_main_header_in {
  min-height: 86px !important;
  height: auto !important;
  padding: 6px 0 !important;
}

/* ==========================================================================
   MOVING MARQUEE STRIP (WHITE BACKGROUND, YELLOW OUTLINED TEXT WITH NO
   FILL, YELLOW STARBURST, NO DIVIDER LINES)
   ========================================================================== */
.cs_moving_marquee_paper,
#marquee-strip,
.cs_moving_section_wrap {
  background: #ffffff !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding: clamp(20px, 2.5vw, 36px) 0 !important;
  position: relative !important;
  z-index: 6 !important;
  overflow: hidden !important;
}

.cs_moving_marquee_paper .cs_moving_section,
.cs_moving_section_wrap .cs_moving_section {
  padding: 0 !important;
  gap: 0 !important;
  animation: slide-left 25s linear infinite !important;
}

.cs_moving_marquee_paper .cs_moving_section.cs_stroke_text,
.cs_moving_marquee_paper .cs_stroke_text,
.cs_moving_section_wrap .cs_stroke_text {
  font-family: var(--font-display) !important;
  font-size: clamp(48px, 4vw, 100px) !important;
  font-weight: var(--fw-display) !important;
  line-height: 1.2em !important;
  color: transparent !important;
  -webkit-text-stroke: 1px #000 !important;
  letter-spacing: normal !important;
  margin: 0 16px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  opacity: 1 !important;
}

.cs_moving_marquee_paper .cs_marquee_bullet,
.cs_moving_section_wrap .cs_marquee_bullet {
  color: #000000 !important;
  -webkit-text-stroke: 0 !important;
  font-size: 0.45em !important;
  font-weight: var(--fw-display) !important;
  vertical-align: middle !important;
  margin: 0 clamp(16px, 2vw, 28px) !important;
  display: inline-block !important;
  transform: translateY(-4px) !important;
}

/* ==========================================================================
   GLOBAL SECTION SUBTITLES (HIDDEN PER DESIGN REQUEST)
   ========================================================================== */
.cs_section_subtitle,
.cs_section_heading.cs_style_1 .cs_section_subtitle {
  display: none !important;
}

/* ==========================================================================
   SERVICES SECTION REFRESH (WHITE BACKGROUND, MATTONE REGULAR + POPPINS)
   ========================================================================== */
#services,
.cs_services_section,
.cs_services_section.t-paper,
.cs_primary_bg#services {
  background: #ffffff !important;
  color: #16161A !important;
  position: relative !important;
  z-index: 5 !important;
  padding-top: clamp(60px, 6.5vw, 95px) !important;
  padding-bottom: clamp(60px, 6.5vw, 95px) !important;
}

#services .cs_section_heading {
  margin-bottom: clamp(28px, 3.5vw, 42px) !important;
}

#services .cs_section_subtitle {
  color: #6B6877 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase !important;
  font-weight: var(--fw-medium) !important;
  margin-bottom: 10px !important;
}

#services .cs_section_title {
  color: #16161A !important;
  max-width: 26ch !important;
  margin: 0 !important;
}

/* Left List of Services */
.cs_services_list {
  display: flex !important;
  flex-direction: column !important;
  border-top: 1px solid rgba(22, 22, 26, 0.12) !important;
}

.cs_services_list .cs_creative_protfolio {
  padding: clamp(14px, 1.5vw, 20px) 0 !important;
  border-bottom: 1px solid rgba(22, 22, 26, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: transparent !important;
}

.cs_services_list .cs_creative_protfolio .cs_hr_design {
  display: none !important;
}

.cs_services_list .cs_creative_protfolio .cs_card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 10px !important;
}

.cs_services_list .cs_creative_protfolio .cs_card_right {
  flex: 1 !important;
}

/* Phones & tablets: title left-aligned in line with the heading and description,
   arrow on the right (the theme stacks this card in a centred column) */
@media screen and (max-width: 991px) {
  .cs_services_list .cs_creative_protfolio .cs_card {
    flex-direction: row !important;
    margin: 10px 0 !important;
    text-align: left !important;
  }

  .cs_services_list .cs_creative_protfolio .cs_card_right,
  .cs_services_list .cs_creative_protfolio .cs_card_title {
    text-align: left !important;
  }

  .cs_services_list .cs_creative_protfolio .cs_service_link_title {
    justify-content: flex-start !important;
  }

  .cs_service_mobile_content,
  .cs_service_mobile_desc {
    text-align: left !important;
  }
}

.cs_services_list .cs_creative_protfolio .cs_card_title {
  margin: 0 !important;
  line-height: 1.2 !important;
}

.cs_services_list .cs_creative_protfolio .cs_card_title a,
.cs_services_list .cs_creative_protfolio .cs_card_title .cs_service_link_title {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: var(--fs-card-h3) !important;
  letter-spacing: var(--ls-h2) !important;
  color: #6B6877 !important;
  text-decoration: none !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
}

.cs_services_list .cs_creative_protfolio .cs_card_title a span,
.cs_services_list .cs_creative_protfolio .cs_card_title .cs_service_link_title span {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  color: inherit !important;
  opacity: 0.8 !important;
}

.cs_services_list .cs_creative_protfolio.active .cs_card_title a,
.cs_services_list .cs_creative_protfolio.active .cs_card_title .cs_service_link_title,
.cs_services_list .cs_creative_protfolio:hover .cs_card_title a,
.cs_services_list .cs_creative_protfolio:hover .cs_card_title .cs_service_link_title {
  color: #16161A !important;
  transform: translateX(4px) !important;
}

.cs_services_list .cs_creative_protfolio .cs_card_link_wrap {
  display: flex !important;
  align-items: center !important;
}

.cs_services_list .cs_creative_protfolio .cs_card_link {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8E8C9A !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
}

.cs_item_indicator {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Inactive State: Show thin arrow */
.cs_services_list .cs_creative_protfolio .cs_diamond_icon {
  display: none !important;
}

.cs_services_list .cs_creative_protfolio .cs_arrow_icon {
  display: block !important;
  color: #8E8C9A !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.cs_services_list .cs_creative_protfolio:hover .cs_arrow_icon {
  color: #16161A !important;
  transform: translateX(4px) !important;
}

/* Active State: Show Diamond */
.cs_services_list .cs_creative_protfolio.active .cs_diamond_icon {
  display: block !important;
}

.cs_services_list .cs_creative_protfolio.active .cs_arrow_icon {
  display: none !important;
}

/* Right Sticky Column */
.cs_service_sticky_col {
  position: sticky !important;
  top: 80px !important;
  z-index: 2 !important;
}

.cs_service_detail_wrap {
  padding-left: clamp(20px, 3.5vw, 48px) !important;
  padding-top: 0 !important;
  margin-top: -36px !important;
}

@media (max-width: 768px) {
  .cs_service_detail_wrap {
    margin-top: 24px !important;
    padding-left: 0 !important;
  }
}

/* Remove titles like "let's get a little nosy" + deliverable button pills */
.cs_service_detail_hook,
#cs_service_detail_hook,
.cs_service_pills,
#cs_service_detail_pills {
  display: none !important;
}

/* Only description in home */
.cs_service_detail_desc,
#cs_service_detail_desc {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular) !important;
  font-size: clamp(14.5px, 1.15vw, 16.5px) !important;
  line-height: 1.65 !important;
  color: #383640 !important;
  margin-bottom: 20px !important;
  max-width: 48ch !important;
  transition: opacity 0.2s ease !important;
}

/* Right Media Preview — NO ROUND BORDERS, NO WHITE COLOUR ON BORDERS, SHARP CORNERS ONLY */
.cs_service_preview_wrap {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
  width: 100% !important;
}

#cs_service_preview_img {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: cover !important;
  display: block !important;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Desktop: Hide Mobile Inline Accordion Content */
.cs_service_mobile_content {
  display: none !important;
}

/* Desktop (≥ 992px): the hovered/active service's description opens inline
   under its title; the right column shows only the image */
@media screen and (min-width: 992px) {

  .cs_service_detail_desc,
  #cs_service_detail_desc {
    display: none !important;
  }

  .cs_service_detail_wrap {
    margin-top: 0 !important;
  }

  .cs_services_list .cs_service_mobile_content {
    display: grid !important;
    grid-template-rows: 0fr !important;
    opacity: 0 !important;
    padding: 0 !important;
    transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  }

  .cs_services_list .cs_creative_protfolio.active .cs_service_mobile_content {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
    padding-bottom: 20px !important;
  }

  .cs_services_list .cs_service_mobile_img_wrap {
    display: none !important;
  }

  .cs_services_list .cs_service_mobile_desc {
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    max-width: 52ch !important;
    font-family: var(--font-body) !important;
    font-weight: var(--fw-regular) !important;
    font-size: clamp(14.5px, 1.15vw, 15px) !important;
    line-height: var(--lh-lead) !important;
    color: #383640 !important;
  }
}

/* Mobile & Tablet (< 992px): Show content inline under clicked title */
@media screen and (max-width: 991px) {

  .cs_service_sticky_col,
  .cs_services_section .cs_service_sticky_col {
    display: none !important;
  }

  .cs_services_section .col-lg-6,
  .cs_services_section .col-md-6 {
    width: 100% !important;
  }

  .cs_services_list .cs_creative_protfolio {
    cursor: default !important;
    padding: 20px 0 28px 0 !important;
  }

  .cs_services_list .cs_creative_protfolio .cs_card_title a,
  .cs_services_list .cs_creative_protfolio .cs_card_title .cs_service_link_title {
    color: #16161A !important;
    cursor: default !important;
    transform: none !important;
  }

  .cs_services_list .cs_creative_protfolio .cs_card_link_wrap {
    display: none !important;
  }

  .cs_services_list .cs_service_mobile_content,
  .cs_service_mobile_content {
    display: block !important;
    grid-template-rows: unset !important;
    opacity: 1 !important;
    padding: 16px 0 10px 0 !important;
    animation: none !important;
  }

  .cs_service_mobile_desc {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #6B6877 !important;
    margin-bottom: 16px !important;
  }

  .cs_service_mobile_img_wrap {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  }

  .cs_service_mobile_img {
    width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  @keyframes csServiceMobileFadeIn {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* "Our process" Pill Button (Black text, Purple outline) */
.cs_service_process_btn_wrap {
  display: flex;
}

.cs_service_process_btn_wrap--desktop {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 20px !important;
}

.cs_service_process_btn_wrap--mobile {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .cs_service_process_btn_wrap--desktop {
    display: none !important;
  }

  .cs_service_process_btn_wrap--mobile {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 24px !important;
  }
}

.cs_service_process_btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 0 4px 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 2px solid #5530c6 !important;
  background: transparent !important;
  color: #16161A !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

.cs_service_process_btn span {
  color: #16161A !important;
  transition: color 0.25s ease !important;
}

.cs_service_process_btn svg {
  color: #16161A !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.cs_service_process_btn:hover,
.cs_service_process_btn:focus {
  background: transparent !important;
  color: #5530c6 !important;
  border-bottom-color: #5530c6 !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

.cs_service_process_btn:hover span {
  color: #5530c6 !important;
}

.cs_service_process_btn:hover svg {
  color: #5530c6 !important;
  transform: translate(2px, -2px) !important;
}

/* ==========================================================================
   IMPACT & MILESTONES SECTION (ZERO OVERFLOW, CLEAN PROPORTIONS)
   ========================================================================== */
.cs_card_2_list {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.cs_card_2_list .cs_card.cs_style_2 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: clamp(16px, 2.5vw, 40px) !important;
  position: relative !important;
  padding-bottom: clamp(32px, 4vw, 50px) !important;
  margin-bottom: clamp(32px, 4vw, 50px) !important;
  box-sizing: border-box !important;
}

.cs_card.cs_style_2 .cs_card_left {
  display: flex !important;
  flex: 1 1 auto !important;
  max-width: calc(100% - 220px) !important;
  align-items: flex-start !important;
  gap: clamp(16px, 2vw, 32px) !important;
}

.cs_card.cs_style_2 .cs_card_logo {
  flex: 0 0 clamp(90px, 10vw, 140px) !important;
  width: auto !important;
  padding-right: 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 3.5vw, 48px) !important;
  font-weight: var(--fw-display) !important;
  line-height: 1 !important;
  color: #5530c6 !important;
  white-space: nowrap !important;
}

.cs_card.cs_style_2 .cs_card_title {
  font-family: var(--font-display) !important;
  font-size: clamp(18px, 1.8vw, 24px) !important;
  font-weight: var(--fw-display) !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 0 10px 0 !important;
}

.cs_card.cs_style_2 .cs_card_subtitle {
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #8E8C9A !important;
  max-width: 48ch !important;
}

.cs_card.cs_style_2 .cs_card_right {
  flex: 0 0 clamp(140px, 16vw, 200px) !important;
  width: auto !important;
  text-align: right !important;
}

.cs_card.cs_style_2 .cs_card_brand {
  font-family: var(--font-display) !important;
  font-size: clamp(18px, 1.8vw, 24px) !important;
  font-weight: var(--fw-display) !important;
  line-height: 1.25 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: normal !important;
}

.cs_card.cs_style_2 .cs_card_hover_img {
  position: absolute !important;
  right: clamp(160px, 18vw, 240px) !important;
  top: 50% !important;
  width: clamp(180px, 20vw, 260px) !important;
  pointer-events: none !important;
  border-radius: 0 !important;
}

.cs_card.cs_style_2 .cs_card_hover_img img {
  border-radius: 0 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
}

@media screen and (max-width: 991px) {
  .cs_card.cs_style_2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 24px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    position: relative !important;
  }

  .cs_card.cs_style_2:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .cs_card.cs_style_2 .cs_card_right {
    order: 1 !important;
    flex: none !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 2px !important;
  }

  .cs_card.cs_style_2 .cs_card_brand {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    letter-spacing: var(--ls-eyebrow) !important;
    text-transform: uppercase !important;
    color: #8E8C9A !important;
    font-weight: var(--fw-medium) !important;
    text-align: left !important;
  }

  .cs_card.cs_style_2 .cs_card_left {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .cs_card.cs_style_2 .cs_card_logo {
    font-family: var(--font-display) !important;
    font-size: clamp(30px, 8vw, 38px) !important;
    line-height: 1.1 !important;
    color: #5530c6 !important;
    margin-bottom: 4px !important;
    font-weight: var(--fw-display) !important;
    flex: none !important;
    /* desktop's 90px flex-basis became a height in this column layout */
  }

  .cs_card.cs_style_2 .cs_card_title {
    font-family: var(--font-display) !important;
    font-size: clamp(17px, 4.5vw, 20px) !important;
    font-weight: var(--fw-display) !important;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.25 !important;
  }

  .cs_card.cs_style_2 .cs_card_subtitle {
    font-family: var(--font-body) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #9A98A6 !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }

  .cs_card.cs_style_2 .cs_card_hover_img {
    order: 3 !important;
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    pointer-events: auto !important;
    margin-top: 8px !important;
  }

  .cs_card.cs_style_2 .cs_card_hover_img img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
  }
}

/* ==========================================================================
   TESTIMONIALS SECTION REFRESH (CLEAN FLAT DARK BG, MATTONE + POPPINS, SHARP CORNERS)
   ========================================================================== */
#testimonials,
.cs_testimonial_section,
.cs_testimonial_1_wrap {
  background: #0d0d10 !important;
  background-image: none !important;
  color: #e0e0e0 !important;
  position: relative !important;
  z-index: 5 !important;
  padding-top: clamp(70px, 8vw, 110px) !important;
  padding-bottom: clamp(60px, 7vw, 90px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  overflow: hidden !important;
}

/* Remove gradient & background shapes */
#testimonials .cs_shape_1,
#testimonials .cs_shape_2,
#testimonials .cs_shape_wrap_2::before,
#testimonials .cs_shape_wrap_2::after {
  display: none !important;
  background: none !important;
}

/* Left Image: NO ROUND BORDERS, SHARP CORNERS ONLY */
.cs_testimonial_left_img {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  width: 100% !important;
}

.cs_testimonial_left_img img {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  max-height: 480px !important;
  display: block !important;
}

/* Testimonial Title (size/font from the heading role in typography.css) */
#testimonials .cs_testimonial_title,
.cs_testimonial_title,
.cs_testimonial.cs_style_1 .cs_testimonial_title,
.cs_testimonial.cs_style_1.cs_color_1 .cs_testimonial_title {
  max-width: 780px !important;
  color: #ffffff !important;
  margin-bottom: clamp(22px, 2.5vw, 34px) !important;
}

/* Quote Icon */
.cs_testimonial.cs_style_1 .cs_testimonial_quote_icon {
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

.cs_testimonial.cs_style_1 .cs_testimonial_quote_icon svg path {
  fill: #ffd869 !important;
}

/* Testimonial Quote Body: USE POPPINS HERE */
.cs_testimonial_text,
.cs_testimonial.cs_style_1 .cs_testimonial_text {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular) !important;
  font-size: clamp(16px, 1.45vw, 15px) !important;
  line-height: 1.7 !important;
  color: #d6d5dc !important;
  font-style: var(--fs-style) !important;
  margin-bottom: clamp(24px, 3vw, 36px) !important;
  letter-spacing: var(--ls-body) !important;
}

/* Testimonial Author Meta */
.cs_testimonial.cs_style_1 .cs_testimonial_meta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Circular Avatar: Perfect Round Avatar */
.cs_testimonial_avatar,
.cs_testimonial.cs_style_1 .cs_testimonial_avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin-right: 0 !important;
  flex: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
}

.cs_testimonial_avatar img,
.cs_testimonial.cs_style_1 .cs_testimonial_avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Author Name: Mattone Regular */
.cs_testimonial_avatar_name,
.cs_testimonial.cs_style_1 .cs_testimonial_avatar_name,
.cs_testimonial.cs_style_1.cs_color_1 .cs_testimonial_avatar_name {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
  letter-spacing: var(--ls-h3) !important;
}

/* Author Designation: Poppins */
.cs_testimonial_avatar_designation,
.cs_testimonial.cs_style_1 .cs_testimonial_avatar_designation {
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-eyebrow) !important;
  color: #8E8C9A !important;
  font-weight: var(--fw-medium) !important;
}

/* Pagination Bullets */
.cs_testimonial .cs_pagination.cs_style1 {
  margin-top: 24px !important;
}

.cs_testimonial .cs_pagination.cs_style1 .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 0 !important;
  width: 18px !important;
  height: 3px !important;
  opacity: 0.6 !important;
  transition: all 0.3s ease !important;
}

.cs_testimonial .cs_pagination.cs_style1 .swiper-pagination-bullet-active {
  background: #ffd869 !important;
  width: 32px !important;
  opacity: 1 !important;
}

/* ==========================================================================
   PARTNER CLIENTS SECTION (CLEAN POPPINS LEAD & SMOOTH LOGO TICKER)
   ========================================================================== */
.cs_partners_section {
  padding-top: 10px !important;
  padding-bottom: clamp(50px, 6vw, 80px) !important;
}

.cs_partners_lead {
  color: #8E8C9A !important;
  max-width: 62ch !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   STRATEGIC INSIGHTS SECTION (#blog)
   ========================================================================== */
#blog {
  padding-top: clamp(60px, 7vw, 100px) !important;
  padding-bottom: clamp(100px, 12vw, 160px) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ==========================================================================
   FAQ ACCORDION SECTION (WHITE PAPER, MATTONE + POPPINS, VIOLET ACCENTS)
   ========================================================================== */
.cs_faq_section {
  background: #ffffff !important;
  color: #16161A !important;
  position: relative !important;
  z-index: 5 !important;
  padding-top: clamp(100px, 11vw, 150px) !important;
  padding-bottom: clamp(100px, 11vw, 150px) !important;
}

.cs_faq_sidebar {
  position: sticky !important;
  top: 120px !important;
}

.cs_faq_section .cs_section_subtitle {
  color: #5530c6 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.cs_faq_section .cs_section_subtitle::before {
  color: #5530c6 !important;
}

.cs_faq_section .cs_section_title {
  color: #16161A !important;
}

.cs_faq_intro {
  color: #4A4754 !important;
  max-width: 36ch !important;
  margin-top: 16px !important;
}

.cs_faq_btn {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #5530c6 !important;
  background-color: #5530c6 !important;
  color: #ffffff !important;
  border: 1px solid #5530c6 !important;
  padding: 14px 28px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  position: relative !important;
}

.cs_faq_btn::before,
.cs_faq_btn::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
}

.cs_faq_btn span {
  color: #ffffff !important;
  position: relative !important;
  z-index: 2 !important;
}

.cs_faq_btn:hover {
  background: #4322a3 !important;
  background-color: #4322a3 !important;
  border-color: #4322a3 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.cs_accordian_wrap {
  border-top: 1px solid rgba(22, 22, 26, 0.12) !important;
}

.cs_accordian_item {
  border-bottom: 1px solid rgba(22, 22, 26, 0.12) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cs_accordian_header {
  padding: clamp(22px, 2.8vw, 32px) 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  user-select: none !important;
  gap: 20px !important;
}

.cs_accordian_title {
  font-family: var(--font-display) !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: var(--fw-display) !important;
  line-height: 1.3 !important;
  letter-spacing: var(--ls-h3) !important;
  color: #16161A !important;
  margin: 0 !important;
  transition: color 0.25s ease !important;
}

.cs_accordian_header:hover .cs_accordian_title {
  color: #5530c6 !important;
}

.cs_accordian_item.active .cs_accordian_title {
  color: #5530c6 !important;
}

.cs_accordian_icon {
  flex: none !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(85, 48, 198, 0.25) !important;
  border-radius: 0 !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cs_accordian_icon::before,
.cs_accordian_icon::after {
  content: "" !important;
  position: absolute !important;
  background-color: #5530c6 !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease !important;
}

.cs_accordian_icon::before {
  width: 14px !important;
  height: 1.5px !important;
}

.cs_accordian_icon::after {
  width: 1.5px !important;
  height: 14px !important;
}

.cs_accordian_item.active .cs_accordian_icon {
  border-color: #5530c6 !important;
  background-color: rgba(85, 48, 198, 0.08) !important;
}

.cs_accordian_item.active .cs_accordian_icon::after {
  transform: rotate(90deg) scaleY(0) !important;
}

.cs_accordian_item.active .cs_accordian_icon::before {
  background-color: #5530c6 !important;
}

.cs_accordian_body {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.3s ease !important;
  padding: 0 !important;
}

.cs_accordian_item.active .cs_accordian_body {
  max-height: 400px !important;
  opacity: 1 !important;
  padding-bottom: clamp(20px, 2.5vw, 30px) !important;
}

.cs_accordian_body p {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #4A4754 !important;
  margin: 0 !important;
  max-width: 64ch !important;
}

/* ==========================================================================
   FOOTER REFRESH
   ========================================================================== */
.cs_footer {
  background: #0d0d10 !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  position: relative !important;
}

.cs_footer_info img,
.cs_footer_logo {
  height: clamp(48px, 5.2vw, 64px) !important;
  width: auto !important;
  margin-bottom: 24px !important;
  display: block !important;
  object-fit: contain !important;
}

.cs_footer_info p {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #9A98A6 !important;
  margin-bottom: 0 !important;
  max-width: 42ch !important;
}

/* Footer Copyright Text: 2px Smaller, Gray */
.cs_copyright {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  color: #9A98A6 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 24px 0 !important;
}

.cs_copyright .container {
  color: #9A98A6 !important;
  font-size: 13.5px !important;
  letter-spacing: var(--ls-body) !important;
}

/* Footer social profiles: plain icons in a row — no boxes, no labels */
.cs_footer_social:not(#_) {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

.cs_footer_social a:not(#_):not(#__) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
  color: #ffffff !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

.cs_footer_social a svg {
  width: 24px !important;
  height: 24px !important;
}

.cs_footer_social a:not(#_):not(#__):hover,
.cs_footer_social a:not(#_):not(#__):focus {
  color: #ffd869 !important;
  transform: translateY(-2px) !important;
}

.cs_footer_contact_list li {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  max-width: 100% !important;
}

.cs_footer_contact_list li a:hover {
  color: #5530c6 !important;
}

/* Footer Bottom Nav Links & Hover */
.cs_footer_nav {
  border-top: none !important;
  padding-top: 10px !important;
}

.cs_footer_nav a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.cs_footer_nav a:hover,
.cs_footer_nav li.active a,
.cs_footer_nav a:focus {
  color: #5530c6 !important;
}

/* Email + Discovery Call links side by side, same style */
.cs_footer_contact_list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px 40px !important;
  margin: 0 !important;
}

.cs_footer_contact_list li {
  margin: 0 !important;
}

.cs_footer_contact_list li i {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Phones: icons stay left-aligned under the footer text */
@media screen and (max-width: 767px) {
  .cs_footer_social:not(#_) {
    justify-content: flex-start !important;
    margin-top: 30px !important;
  }
}

/* ==========================================================================
   MOBILE & OVERLAY SIDEBAR DRAWER REFRESH
   ========================================================================== */
.cs_side_header {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9999 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease, visibility 0.35s ease !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.cs_side_header.active {
  visibility: visible !important;
  opacity: 1 !important;
}

.cs_side_header_overlay {
  position: absolute !important;
  inset: 0 !important;
  cursor: pointer !important;
}

.cs_side_header_in {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 440px !important;
  height: 100% !important;
  height: 100dvh !important;
  background-color: #0d0d10 !important;
  background: #0d0d10 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  transform: translateX(100%) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cs_side_header.active .cs_side_header_in {
  transform: translateX(0) !important;
}

/* Hide default template fixed close button if present */
.cs_side_header>.cs_close {
  display: none !important;
}

/* Header Top bar inside drawer */
.cs_side_header_top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 24px !important;
}

.cs_side_logo {
  height: clamp(42px, 4vw, 52px) !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.cs_side_close_btn {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
}

.cs_side_close_btn:hover {
  background: #5530c6 !important;
  border-color: #5530c6 !important;
  color: #ffffff !important;
  transform: rotate(90deg) !important;
}

/* Drawer Body */
.cs_side_header_body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
  gap: 28px !important;
}

/* Navigation List */
.cs_side_nav_list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.cs_side_nav_list li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cs_side_nav_list li::before,
.cs_side_nav_list li::after {
  display: none !important;
  content: none !important;
}

.cs_side_nav_list li a {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: clamp(22px, 5.5vw, 28px) !important;
  line-height: 1.25 !important;
  letter-spacing: var(--ls-h2) !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

.cs_side_nav_list li a:hover,
.cs_side_nav_list li.active a {
  color: #5530c6 !important;
  transform: translateX(6px) !important;
}

/* Info Section (Email, Socials, CTA) */
.cs_side_info_wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cs_side_label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: var(--fw-medium) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.cs_side_email {
  font-family: var(--font-body) !important;
  font-size: clamp(14px, 3.8vw, 16px) !important;
  font-weight: var(--fw-regular) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  display: block !important;
  word-break: break-word !important;
  transition: color 0.2s ease !important;
}

.cs_side_email:hover {
  color: #5530c6 !important;
}

.cs_side_social_links {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.cs_side_social_links a {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.cs_side_social_links a:hover {
  color: #5530c6 !important;
}

/* CTA Button */
.cs_side_cta_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #5530c6 !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: var(--fw-display) !important;
  letter-spacing: var(--ls-button) !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(85, 48, 198, 0.35) !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 4px !important;
}

.cs_side_cta_btn:hover {
  background: #4524ab !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(85, 48, 198, 0.5) !important;
}

/* ==========================================================================
   CONTACT SECTION WITH DOODLE & FORM
   ========================================================================== */
.cs_contact_section {
  background: #101010 !important;
  padding: clamp(60px, 7vw, 100px) 0 !important;
  position: relative !important;
  z-index: 5 !important;
}

.cs_contact_doodle_wrap {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}

.cs_contact_section {
  position: relative !important;
  background: #0d0d10 !important;
  padding-top: clamp(80px, 9vw, 130px) !important;
  padding-bottom: clamp(70px, 8vw, 110px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  z-index: 5 !important;
}

.cs_contact_doodle_wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

.cs_contact_doodle_wrap picture {
  display: block !important;
  width: 100% !important;
}

.cs_contact_doodle_img {
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  max-height: 580px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.45)) !important;
}

.cs_contact_form_wrap {
  padding-left: clamp(0px, 3.5vw, 40px) !important;
}

.cs_contact_title {
  color: #ffffff !important;
  margin-bottom: 14px !important;
}

.cs_contact_subtitle {
  color: #9A98A6 !important;
  margin-bottom: 36px !important;
  max-width: 52ch !important;
}

.cs_contact_form {
  display: block !important;
  width: 100% !important;
}

.cs_input_group {
  position: relative !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
}

.cs_input_group label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase !important;
  color: #9A98A6 !important;
  margin-bottom: 6px !important;
  display: block !important;
  transition: color 0.25s ease !important;
}

.cs_input_group:focus-within label {
  color: #ffd869 !important;
}

.cs_input_group input,
.cs_input_group select,
.cs_input_group textarea {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0 !important;
  padding: 8px 0 10px 0 !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.cs_input_group select {
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239A98A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  padding-right: 24px !important;
}

.cs_input_group textarea {
  resize: vertical !important;
  min-height: 60px !important;
}

.cs_input_group input::placeholder,
.cs_input_group textarea::placeholder {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular) !important;
  color: rgba(255, 255, 255, 0.28) !important;
  font-size: 14px !important;
}

.cs_input_group input:focus,
.cs_input_group select:focus,
.cs_input_group textarea:focus {
  border-bottom: 1px solid #ffd869 !important;
  box-shadow: 0 1px 0 0 #ffd869 !important;
  background: transparent !important;
}

.cs_input_group select option {
  background-color: #16161A !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular) !important;
  padding: 10px !important;
}

.cs_contact_submit {
  background-color: #5530c6 !important;
  background: #5530c6 !important;
  color: #ffffff !important;
  border: 1px solid #5530c6 !important;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: 13px !important;
  letter-spacing: var(--ls-button) !important;
  text-transform: uppercase !important;
  padding: 13px 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(85, 48, 198, 0.25) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cs_contact_submit:hover {
  background-color: #4524ab !important;
  background: #4524ab !important;
  border-color: #4524ab !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(85, 48, 198, 0.45) !important;
}

.cs_contact_submit svg {
  transition: transform 0.25s ease !important;
}

.cs_contact_submit:hover svg {
  transform: translateX(3px) !important;
}

.cs_contact_or {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-eyebrow) !important;
}

.cs_contact_form .cbtn-link,
.cs_cta_actions .cbtn-link {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: 14px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid #ffd869 !important;
  padding-bottom: 2px !important;
  transition: color 0.25s ease, border-color 0.25s ease !important;
}

.cs_contact_form .cbtn-link:hover,
.cs_cta_actions .cbtn-link:hover {
  color: #ffd869 !important;
  border-bottom-color: #ffd869 !important;
}

/* ==========================================================================
   SIDE DRAWER REFINEMENT & SUPPRESSION OF ROGUE ELEMENTS
   ========================================================================== */
.cs_side_header>.cs_close,
.cs_side_header .cs_close:not(.cs_side_close_btn) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.cs_side_close_btn::before,
.cs_side_close_btn::after,
.cs_side_header_top::before,
.cs_side_header_top::after {
  display: none !important;
  content: none !important;
}

.cs_side_header_top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 24px !important;
  width: 100% !important;
}

.cs_side_logo {
  height: clamp(38px, 4.8vw, 48px) !important;
  max-height: 48px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.cs_side_close_btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  z-index: 5 !important;
}

.cs_side_close_btn svg {
  display: block !important;
  pointer-events: none !important;
}

.cs_side_close_btn:hover {
  background: #5530c6 !important;
  border-color: #5530c6 !important;
  color: #ffffff !important;
  transform: rotate(90deg) !important;
}

/* ==========================================================================
   WORK PAGE (PORTFOLIO) STYLES
   ========================================================================== */
.cs_page_hero {
  padding: clamp(140px, 16vw, 200px) 0 clamp(40px, 6vw, 70px) !important;
  background: #0d0d10 !important;
  position: relative !important;
  overflow: hidden !important;
}

.cs_page_hero_badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: var(--fw-medium) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-eyebrow) !important;
  color: #ffd869 !important;
  background: rgba(255, 216, 105, 0.08) !important;
  border: 1px solid rgba(255, 216, 105, 0.2) !important;
  padding: 6px 16px !important;
  border-radius: 100px !important;
  margin-bottom: 24px !important;
}

.cs_page_hero_badge::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffd869 !important;
  display: inline-block !important;
}

.cs_page_hero_title {
  color: #ffffff !important;
  margin-bottom: 20px !important;
  max-width: 920px !important;
}

.cs_page_hero_title .em {
  color: #ffd869 !important;
  font-style: var(--fs-style) !important;
}

.cs_page_hero_subtitle {
  color: rgba(255, 255, 255, 0.7) !important;
  max-width: 680px !important;
  margin-bottom: 36px !important;
}

@media (max-width: 767px) {
  .cs_page_hero_title {
    line-height: 1.2 !important;
  }
}


/* Stats Counter Row */
.cs_work_stats_row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 20px !important;
  padding-top: 30px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-top: 20px !important;
}

.cs_work_stat_item h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: var(--fw-display) !important;
  color: #ffffff !important;
  margin: 0 0 4px !important;
  line-height: 1 !important;
}

.cs_work_stat_item h3 span {
  color: #5530c6 !important;
}

.cs_work_stat_item p {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
}

/* Filter Controls */
.cs_filter_wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 48px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cs_filter_btn {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-body) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 8px 18px !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.cs_filter_btn:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.cs_filter_btn.active {
  color: #ffffff !important;
  background: #5530c6 !important;
  border-color: #5530c6 !important;
}

/* Work Grid (All 8 Projects) */
.cs_work_grid_container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(24px, 4vw, 44px) !important;
}

@media (max-width: 820px) {
  .cs_work_grid_container {
    grid-template-columns: 1fr !important;
  }
}

.cs_work_card {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  position: relative !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.cs_work_card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
}

.cs_work_card_img_wrap {
  position: relative !important;
  width: 100% !important;
  height: clamp(260px, 32vw, 380px) !important;
  overflow: hidden !important;
}

.cs_work_card_img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cs_work_card:hover .cs_work_card_img {
  transform: scale(1.04) !important;
}

.cs_work_card_badge {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: rgba(13, 13, 16, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 5px 12px !important;
  border-radius: 100px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  z-index: 2 !important;
}

.cs_work_card_body {
  padding: 22px 24px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.cs_work_card_header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.cs_work_card_title {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.4vw, 26px) !important;
  font-weight: var(--fw-display) !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 !important;
  transition: color 0.25s ease !important;
}

.cs_work_card:hover .cs_work_card_title {
  color: #ffd869 !important;
}

.cs_work_card_arrow {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.cs_work_card:hover .cs_work_card_arrow {
  background: #5530c6 !important;
  border-color: #5530c6 !important;
  transform: translate(3px, -3px) !important;
}

.cs_work_card_desc {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 0 8px !important;
}

.cs_work_card_tags {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.cs_work_card_tags span {
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Process Bento on Work Page */
.cs_work_process_section {
  padding: clamp(60px, 8vw, 100px) 0 !important;
  background: #111115 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cs_process_bento_grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 36px !important;
}

@media (max-width: 992px) {
  .cs_process_bento_grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .cs_process_bento_grid {
    grid-template-columns: 1fr !important;
  }
}

.cs_process_bento_card {
  padding: 28px 24px !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: transform 0.25s ease, border-color 0.25s ease !important;
}

.cs_process_bento_card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 216, 105, 0.3) !important;
}

.cs_process_num {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  color: #ffd869 !important;
  opacity: 0.9 !important;
}

.cs_process_bento_card h5 {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.cs_process_bento_card p {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 !important;
}

/* ==========================================================================
   CONTACT PAGE STYLES & SMOOTH HERO
   ========================================================================== */
.cs_page_hero {
  padding: 0 0 20px 0 !important;
  text-align: center !important;
}

.cs_page_hero_badge {
  display: inline-block !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase !important;
  color: #ffd869 !important;
  background: rgba(255, 216, 105, 0.08) !important;
  border: 1px solid rgba(255, 216, 105, 0.25) !important;
  padding: 6px 18px !important;
  border-radius: 100px !important;
  margin-bottom: 22px !important;
}

.cs_page_hero_title {
  color: #ffffff !important;
  margin: 0 auto 16px !important;
  max-width: 860px !important;
}

.cs_page_hero_title .em {
  color: #ffd869 !important;
  font-style: var(--fs-style) !important;
}

.cs_page_hero_subtitle {
  color: #9A98A6 !important;
  margin: 0 auto !important;
  max-width: 620px !important;
}

@keyframes csFloatDoodle {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(0.6deg);
  }
}

.cs_contact_doodle_img {
  animation: csFloatDoodle 6s ease-in-out infinite !important;
  transition: transform 0.4s ease !important;
}

.cs_contact_doodle_img:hover {
  transform: scale(1.02) !important;
}

/* FAQ Accordion Section (Clean White Background) */
.cs_faq_section,
.cs_faq_section.t-paper,
#faq {
  background: #ffffff !important;
  color: #16161A !important;
  position: relative !important;
  z-index: 5 !important;
  border-top: none !important;
}

/* ==========================================================================
   VIXAN THEME PORTFOLIO (WORK PAGE) ENHANCEMENTS
   ========================================================================== */
.cs_isotop_item_menu ul {
  display: flex !important;
  gap: clamp(20px, 3.5vw, 40px) !important;
  flex-wrap: wrap !important;
  margin-bottom: clamp(40px, 5vw, 70px) !important;
  list-style: none !important;
  padding: 0 !important;
}

.cs_isotop_item_menu ul li {
  font-family: var(--font-body) !important;
  font-size: clamp(14px, 1.6vw, 16px) !important;
  font-weight: var(--fw-medium) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  padding-bottom: 6px !important;
}

.cs_isotop_item_menu ul li:hover,
.cs_isotop_item_menu ul li.active {
  color: #ffd869 !important;
}

.cs_isotop_item_menu ul li.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: #5530c6 !important;
  border-radius: 2px !important;
}

.cs_isotop_items_details .cs_item {
  padding-bottom: 30px !important;
}

.cs_portfolio.cs_style_1 {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  border-radius: 0 !important;
  background: #111115 !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_img {
  width: 100% !important;
  height: 380px !important;
  overflow: hidden !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.04) !important;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_overlay {
  position: absolute !important;
  inset: 16px !important;
  background: rgba(13, 13, 16, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: scale(0.92) !important;
  opacity: 0 !important;
  z-index: 2 !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_info {
  width: 100% !important;
  position: absolute !important;
  bottom: -20px !important;
  left: 0 !important;
  padding: 0 36px 36px 36px !important;
  opacity: 0 !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 3 !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_title {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-weight: var(--fw-display) !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_subtitle {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: var(--fw-regular) !important;
  color: #ffd869 !important;
}

.cs_portfolio.cs_style_1:hover .cs_portfolio_overlay {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.cs_portfolio.cs_style_1:hover .cs_portfolio_info {
  bottom: 0 !important;
  opacity: 1 !important;
}

.cs_portfolio.cs_style_1:hover .cs_portfolio_img img {
  transform: scale(1.1) !important;
}

/* ==========================================================================
   EXACT VIXAN PORTFOLIO PAGE STYLING & BRAND COMPATIBILITY
   ========================================================================== */
.cs_isotop_item_menu ul {
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: clamp(24px, 4vw, 50px) !important;
  margin-bottom: clamp(50px, 6vw, 100px) !important;
  flex-wrap: wrap !important;
}

.cs_isotop_item_menu ul li {
  font-family: var(--font-body) !important;
  font-size: clamp(14px, 1.6vw, 17px) !important;
  font-weight: var(--fw-medium) !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  padding-bottom: 4px !important;
}

.cs_isotop_item_menu ul li.active,
.cs_isotop_item_menu ul li:hover {
  color: #ffd869 !important;
}

.cs_isotop_item_menu ul li.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: #5530c6 !important;
  border-radius: 2px !important;
}

.cs_isotop_items_details .cs_item {
  padding: 0 15px 30px 15px !important;
}

.cs_portfolio.cs_style_1 {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  border-radius: 0 !important;
  background-color: #111115 !important;
  transition: all 0.3s ease !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_img {
  width: 100% !important;
  aspect-ratio: 4 / 3.3 !important;
  overflow: hidden !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.06) !important;
  transition: transform 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_overlay {
  position: absolute !important;
  inset: 18px !important;
  background-color: rgba(13, 13, 16, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  transform: scale(1.1) !important;
  opacity: 0 !important;
  z-index: 2 !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_info {
  width: 100% !important;
  position: absolute !important;
  bottom: -20px !important;
  left: 0 !important;
  padding: 0 35px 35px 35px !important;
  opacity: 0 !important;
  transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  z-index: 3 !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_title {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.2vw, 24px) !important;
  font-weight: var(--fw-display) !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
  line-height: 1.2 !important;
  transition: color 0.25s ease !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_subtitle {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: var(--fw-regular) !important;
  color: #ffd869 !important;
}

.cs_portfolio.cs_style_1:hover .cs_portfolio_overlay {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.cs_portfolio.cs_style_1:hover .cs_portfolio_info {
  bottom: 0 !important;
  opacity: 1 !important;
}

.cs_portfolio.cs_style_1:hover .cs_portfolio_img img {
  transform: scale(1) !important;
}

.cs_learning_project {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: clamp(60px, 8vw, 100px) !important;
  margin-top: clamp(40px, 6vw, 80px) !important;
}

.cs_learning_project .cs_section_title_3 {
  color: #ffffff !important;
  max-width: 720px !important;
}

/* ==========================================================================
   CLEAN WORK PAGE CARDS (NO DARK OVERLAY ON HOVER)
   ========================================================================== */
.cs_portfolio_overlay,
.cs_portfolio.cs_style_1 .cs_portfolio_overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cs_portfolio.cs_style_1 .cs_portfolio_info {
  display: none !important;
}

.cs_work_clean_item {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.cs_work_clean_img_wrap {
  width: 100% !important;
  aspect-ratio: 5 / 4 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #16161a !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

.cs_work_clean_img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cs_work_clean_item:hover .cs_work_clean_img_wrap {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-4px) !important;
}

.cs_work_clean_item:hover .cs_work_clean_img {
  transform: scale(1.06) !important;
}

.cs_work_clean_meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: border-color 0.3s ease !important;
}

.cs_work_clean_item:hover .cs_work_clean_meta {
  border-bottom-color: #5530c6 !important;
}

.cs_work_clean_title {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.2vw, 24px) !important;
  font-weight: var(--fw-display) !important;
  color: #ffffff !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

.cs_work_clean_item:hover .cs_work_clean_title {
  color: #ffd869 !important;
  transform: translateX(3px) !important;
}

.cs_work_clean_sub {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  display: block !important;
}

.cs_work_clean_arrow {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.cs_work_clean_item:hover .cs_work_clean_arrow {
  background: #5530c6 !important;
  border-color: #5530c6 !important;
  color: #ffffff !important;
  transform: translate(3px, -3px) !important;
}

/* ==========================================================================
   CENTER ALIGNMENT FOR PORTFOLIO ITEMS (ROW & ITEMS)
   ========================================================================== */
.cs_isotop_item_menu ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(20px, 3.5vw, 40px) !important;
  flex-wrap: wrap !important;
  margin-bottom: clamp(40px, 5vw, 70px) !important;
  list-style: none !important;
  padding: 0 !important;
}

.cs_isotop_items_details.row,
.cs_isotop_items_details {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  position: static !important;
}

.cs_isotop_items_details .cs_item {
  position: static !important;
  transform: none !important;
  float: none !important;
  padding: 0 15px 36px 15px !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ==========================================================================
   FOOTER PARTITION DIVIDER LINE & CENTERED HEADINGS
   ========================================================================== */
.cs_section_heading.text-center,
.cs_section_heading.text-center .cs_section_heading_text,
.cs_section_heading.text-center .cs_section_title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

.cs_footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  position: relative !important;
}

.hover-zoom {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hover-zoom:hover {
  transform: scale(1.05) !important;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS ENHANCEMENTS (320px - 1024px)
   ========================================================================== */

/* 1. Global Viewport & Horizontal Overflow Prevention */
html {
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body {
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch;
}

img,
video,
svg {
  max-width: 100% !important;
}

/* 2. Mobile Header & Branding */
@media (max-width: 768px) {
  .cs_site_header .cs_main_header_in {
    min-height: 68px !important;
    padding: 8px 0 !important;
  }

  .cs_site_header .cs_main_header .cs_site_branding img,
  .cs_site_branding.logo-white img,
  .cs_site_branding.logo-dark img {
    height: 40px !important;
    max-height: 44px !important;
    width: auto !important;
  }

  .cs_site_header.cs_style1 .cs_icon_btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    cursor: pointer !important;
  }

  .cs_site_header.cs_style1 .cs_icon_btn .cs_icon_btn_in {
    width: 22px !important;
  }
}

/* 3. Mobile Navigation Drawer & iOS Safe Area */
@media (max-width: 480px) {
  .cs_side_header_in {
    max-width: 100vw !important;
    width: 100vw !important;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .cs_side_logo {
    height: 38px !important;
  }

  .cs_side_nav_list {
    gap: 16px !important;
  }

  .cs_side_nav_list li a {
    font-size: 24px !important;
  }

  .cs_side_email {
    font-size: 15px !important;
    word-break: break-all !important;
  }

  .cs_side_cta_btn {
    padding: 14px 20px !important;
    font-size: 13px !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* 4. Mobile Hero & CTA Buttons */
@media (max-width: 768px) {
  .cs_hero_container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .cs_hero .cs_title_text {
    word-break: break-word !important;
  }

  .hcta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .cbtn-pill {
    padding: 10px 22px !important;
    font-size: 12px !important;
    border-radius: 100px !important;
  }

  .cbtn-link {
    font-size: 12px !important;
    padding-bottom: 4px !important;
  }
}

@media (max-width: 360px) {

  .cbtn-pill {
    padding: 8px 16px !important;
    font-size: 11px !important;
  }

  .cbtn-link {
    font-size: 11px !important;
  }
}

/* 5. Mobile Form Usability & iOS Zoom Prevention */
@media (max-width: 768px) {

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea,
  .cs_contact_form .cs_input_group input,
  .cs_contact_form .cs_input_group select,
  .cs_contact_form .cs_input_group textarea {
    font-size: 16px !important;
    /* iOS Safari doesn't auto-zoom when font-size >= 16px */
    padding: 12px 0 !important;
    /* text lines up with its label */
  }

  .cs_contact_form .cs_input_group select {
    padding-right: 24px !important;
    /* room for the arrow */
  }

  .cs_contact_form .cs_contact_submit,
  .cs_contact_submit {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 24px !important;
  }

  /* "or" + the secondary link centred on one line under the full-width button */
  .cs_contact_form .col-12.d-flex:has(.cs_contact_submit) {
    justify-content: center !important;
    gap: 10px 12px !important;
  }

  .cs_contact_form_wrap .cbtn-link {
    width: auto !important;
    display: inline-block !important;
    margin: 0 !important;
  }
}

/* 6. Mobile Work & Portfolio Items */
@media (max-width: 768px) {
  .cs_isotop_item_menu ul {
    gap: 8px 12px !important;
    justify-content: center !important;
    margin-bottom: 28px !important;
  }

  .cs_isotop_item_menu ul li {
    font-size: 13px !important;
    padding: 4px 6px !important;
  }

  .cs_work_clean_title {
    font-size: 19px !important;
  }

  .cs_work_clean_sub {
    font-size: 12px !important;
  }

  .cs_work_clean_arrow {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }
}

/* 7. Mobile About Page Funfacts & Story */
@media (max-width: 576px) {
  .cs_funfact.cs_style1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
  }

  .cs_funfact_number {
    font-size: 34px !important;
    line-height: 1 !important;
  }

  .cs_funfact_text p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
}

/* 8. Mobile Testimonials Slider */
@media (max-width: 768px) {
  .cs_testimonial_quote_icon svg {
    width: 36px !important;
    height: 26px !important;
  }

  .cs_testimonial_text {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  .cs_testimonial_avatar {
    width: 44px !important;
    height: 44px !important;
  }

  .cs_testimonial_avatar_name {
    font-size: 16px !important;
  }

  .cs_testimonial_avatar_designation {
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   CMS additions — About CTA, lead form status, blog article
   ========================================================================== */
/* About CTA: heading + sub text left, buttons right (stacked on phones) —
   same heading, sub text and button row as the other sections */
/* Services page: list intro reads like every other section sub text */
.sh-services-intro {
  color: #9A98A6 !important;
  max-width: 620px !important;
  margin: 20px 0 0 !important;
}

/* Services page cards: a swipeable carousel — 3 visible on desktop,
   2 on tablets, 1 (with the next one peeking) on phones */
.sh-service-grid {
  --svc-gap: 48px;
  --svc-per-view: 2.5;
  /* two cards and half of the third */
  --svc-gaps: 2;
  /* gaps inside the view: after card 1 and card 2 */
  display: flex;
  gap: var(--svc-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline: none;
}

.sh-service-grid::-webkit-scrollbar {
  display: none;
}

/* page scroll drives the row (services.js): no snapping, no own scrolling */
.sh-service-grid.is-linked {
  scroll-snap-type: none;
  scroll-behavior: auto;
  overflow-x: hidden;
}

/* fallback without JS animation: grab and drag the row with the mouse */
@media (hover: hover) and (pointer: fine) {
  .sh-service-grid:not(.is-linked) {
    cursor: grab;
  }
}

.sh-service-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.sh-service-grid.is-dragging * {
  pointer-events: none;
}

.cs_section_heading+.sh-service-carousel {
  margin-top: clamp(40px, 5vw, 70px);
}

/* width so that `per-view` cards fit, counting the gap before the partly
   shown last one: (row − gaps in view) ÷ per-view */
.sh-service-grid>.sh-service-card {
  flex: 0 0 calc((100% - var(--svc-gaps) * var(--svc-gap)) / var(--svc-per-view));
  scroll-snap-align: start;
}

@media (max-width: 1199px) {
  .sh-service-grid {
    --svc-gap: 32px;
    --svc-per-view: 1.5;
    --svc-gaps: 1;
  }
}

/* Phones: the row runs to the screen's right edge so the next card peeks
   in from the edge instead of being cut off inside the page margin */
@media (max-width: 575px) {
  .sh-service-grid {
    --svc-gap: 20px;
    margin-right: calc((100% - 100vw) / 2);
  }

  .sh-service-grid>.sh-service-card {
    flex-basis: 80%;
  }

  /* scrolled to the end, the last card lines up with the page margin */
  .sh-service-grid>.sh-service-card:last-child {
    margin-right: calc(100vw - 100%);
  }

  .sh-service-card .sh-service-card__num {
    font-size: 26px !important;
  }

  .sh-service-card .sh-service-card__head {
    gap: 10px;
    margin-bottom: 16px;
  }

  /* phones: just the first three "What we do" tags, smaller */
  .sh-service-card .sh-service-card__tags li:nth-child(n + 4) {
    display: none;
  }

  .sh-service-card .sh-service-card__tags ul {
    gap: 6px;
  }

  .sh-service-card .sh-service-card__tags li {
    padding: 5px 8px;
    font-size: 9.5px !important;
    letter-spacing: 0.04em !important;
  }

  .sh-service-card .sh-service-card__tags {
    margin-top: 18px;
  }

  .sh-service-card .sh-service-card__label {
    margin-bottom: 8px;
    font-size: 10px !important;
  }

  .sh-carousel-nav {
    margin-top: 28px;
  }

  .sh-carousel-arrow {
    width: 42px;
    height: 42px;
  }

  /* page scroll moves the cards here, and the arrows would sit under the
     floating back-to-top button — the dots are enough */
  .sh-service-grid.is-linked+.sh-carousel-nav .sh-carousel-arrows {
    display: none;
  }
}

.sh-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
}

.sh-carousel-dots {
  display: flex;
  gap: 8px;
}

.sh-carousel-dots span {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s ease, width 0.2s ease;
}

.sh-carousel-dots span.is-active {
  width: 22px;
  background: #5530c6;
}

.sh-carousel-arrows {
  display: flex;
  gap: 10px;
}

.sh-carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.sh-carousel-arrow:hover:not(:disabled) {
  background: #5530c6;
  border-color: #5530c6;
}

.sh-carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Everything fits (e.g. only 3 services on desktop): no controls */
.sh-carousel-nav.is-static {
  display: none;
}

.sh-service-card {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  min-width: 0;
}

/* number and service name on one line, above the image */
.sh-service-card__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}

.sh-service-card__num {
  flex: none;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1 !important;
  color: #ffd869 !important;
}

.sh-service-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 22px;
  background: #16161a;
}

.sh-service-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-service-card:hover .sh-service-card__img img {
  transform: scale(1.04);
}

.sh-service-card__title {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: var(--fs-title) !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  margin: 0 !important;
  min-width: 0;
}

.sh-service-card__tags {
  margin-top: 22px;
}

.sh-service-card__label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: 11px !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase !important;
  color: #6f6d7a !important;
}

.sh-service-card__tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-service-card__tags li {
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* square, like every button on the site */
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #e4e4e7 !important;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.sh-service-card__tags li:hover {
  border-color: #5530c6;
  background: #5530c6;
  color: #ffffff !important;
}

/* Services page — "Our Process": bordered rows, content and image swap
   sides on every other row; stacked (image first) on tablets and phones */
.sh-steps__head {
  text-align: center;
  margin: 0 auto clamp(40px, 5vw, 64px);
  max-width: 720px;
}

.sh-steps__sub {
  color: #9A98A6 !important;
  margin: 16px auto 0 !important;
}

.sh-steps__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sh-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.015);
}

.sh-step--flip .sh-step__content {
  order: 2;
}

.sh-step__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.sh-step__title {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.sh-step__num {
  flex: none;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: clamp(26px, 3vw, 40px) !important;
  line-height: 1 !important;
  color: #ffd869 !important;
}

.sh-step__text p {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-lead) !important;
  color: #9A98A6 !important;
  margin: 0 !important;
}

.sh-step__text p+p {
  margin-top: 16px !important;
}

.sh-step__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #16161a;
}

.sh-step__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-step:hover .sh-step__img img {
  transform: scale(1.03);
}

@media (max-width: 991px) {
  .sh-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .sh-step .sh-step__content,
  .sh-step--flip .sh-step__content {
    order: 2;
  }

  .sh-step__img {
    order: 1;
  }
}

@media (max-width: 575px) {
  .sh-steps__list {
    gap: 20px;
  }

  .sh-step {
    padding: 20px;
  }

  .sh-step__top {
    margin-bottom: 14px;
  }
}

/* Services page — "Our Process", scroll layout: pinned while you scroll
   (public/js/services.js adds .is-ready); a line with one point per step,
   and the number / text / image swap in place. Without JS the steps
   simply list one after another. */
.sh-scrollsteps {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.sh-scrollsteps__rail {
  position: relative;
  align-self: stretch;
  display: none;
}

.sh-scrollsteps.is-ready .sh-scrollsteps__rail {
  display: block;
}

.sh-scrollsteps__line {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.sh-scrollsteps__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #ffd869;
}

.sh-scrollsteps__points {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-scrollsteps__point {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 14px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

/* dots: outline for steps ahead, yellow once reached */
.sh-scrollsteps__dot {
  width: 10px;
  height: 10px;
  background: #0d0d10;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.sh-scrollsteps__point.is-done .sh-scrollsteps__dot {
  background: #ffd869;
  border-color: #ffd869;
}

.sh-scrollsteps__point.is-active .sh-scrollsteps__dot {
  background: #ffd869;
  border-color: #ffd869;
  transform: scale(1.35);
}

.sh-scrollsteps__counter {
  display: none;
  margin: 0 0 20px !important;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  line-height: 1 !important;
}

.sh-scrollsteps.is-ready .sh-scrollsteps__counter {
  display: block;
}

.sh-scrollsteps__current {
  font-size: clamp(34px, 4vw, 56px);
  color: #ffd869;
}

.sh-scrollsteps__total {
  font-size: clamp(14px, 1.4vw, 18px);
  color: #6f6d7a;
}

.sh-scrollsteps__items {
  display: grid;
}

.sh-scrollsteps__item+.sh-scrollsteps__item {
  margin-top: 40px;
}

.sh-scrollsteps__item .sh-step__title {
  margin-bottom: 20px !important;
}

.sh-scrollsteps__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #16161a;
}

.sh-scrollsteps__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-scrollsteps__img.is-active {
  opacity: 1;
  transform: none;
}

/* JS on: all steps share one spot, only the active one shows */
.sh-scrollsteps.is-ready .sh-scrollsteps__item {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.sh-scrollsteps.is-ready .sh-scrollsteps__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Tablets & phones: line across the top, then image, then text */
@media (max-width: 991px) {
  .sh-scrollsteps {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .sh-scrollsteps__rail {
    order: 1;
    height: 14px;
  }

  .sh-scrollsteps__media {
    order: 2;
  }

  .sh-scrollsteps__content {
    order: 3;
  }

  .sh-scrollsteps__line {
    top: 50%;
    bottom: auto;
    left: 7px;
    right: 7px;
    width: auto;
    height: 1px;
  }

  .sh-scrollsteps__fill {
    width: 0;
    height: 100%;
  }

  .sh-scrollsteps__points {
    flex-direction: row;
  }

  .sh-scrollsteps__point {
    width: 14px;
  }

  .sh-scrollsteps__counter {
    margin-bottom: 12px !important;
  }

  .sh-scrollsteps__item .sh-step__title {
    margin-bottom: 12px !important;
  }
}

/* Services page — Process timeline: four across on desktop with one
   line running through the markers, stacked on phones with a line per step */
.sh-process {
  background: #ffffff !important;
  color: #16161A !important;
  position: relative !important;
}

.sh-process__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: clamp(44px, 5vw, 72px);
}

.sh-process__head .cs_section_title {
  max-width: 620px;
  color: #16161A !important;
}

.sh-process__eyebrow,
.sh-process__summary {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 !important;
}

.sh-process__eyebrow {
  color: #6f6d7a !important;
  margin-bottom: 14px !important;
}

.sh-process__summary {
  flex: none;
  color: #6f6d7a !important;
  padding-bottom: 6px;
}

.sh-process__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-process__step {
  position: relative;
  min-width: 0;
  padding-top: 36px;
}

/* the line: each step draws its own piece, plus the gap to the next one */
.sh-process__step::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: -28px;
  height: 1px;
  background: rgba(0, 0, 0, 0.12) !important;
}

.sh-process__step:last-child::before {
  right: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)) !important;
}

/* the marker: a yellow dot on the line */
.sh-process__marker {
  position: absolute;
  top: 1px;
  left: 0;
  width: 10px;
  height: 10px;
  background: #5530c6;
  /* same blue as the buttons */
}

.sh-process__marker:not(#_),
.sh-scrollsteps__dot:not(#_) {
  border-radius: 50% !important;
  /* the site squares corners by default */
}

.sh-process__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #71717a !important;
}

.sh-process__num {
  font-weight: var(--fw-medium);
  color: #16161a !important;
}

.sh-process__title {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: var(--fs-title) !important;
  line-height: 1.3 !important;
  color: #16161a !important;
  margin: 0 0 12px !important;
}

.sh-process__text {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-lead) !important;
  color: #55555c !important;
  margin: 0 !important;
  max-width: 300px;
}

@media (max-width: 991px) {
  .sh-process__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .sh-process__summary {
    padding-bottom: 0;
  }

  .sh-process__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .sh-process__step::before,
  .sh-process__step:last-child::before {
    right: 0;
    background: rgba(0, 0, 0, 0.12) !important;
  }

  .sh-process__text {
    max-width: 520px;
  }
}

/* Highlighted word in yellow, like the page titles on dark backgrounds */
.cs_cta_section .cs_section_title .em,
.sh-services-list .cs_section_title .em,
.sh-steps .cs_section_title .em {
  color: #ffd869 !important;
}

.cs_cta_section .cs_subheading {
  color: #9A98A6 !important;
  max-width: 560px !important;
  margin: 0 !important;
}

.cs_cta_actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

@media (min-width: 992px) {
  .cs_cta_actions {
    justify-content: flex-end !important;
  }
}

/* Phones: button, then the link under it — no lone "or" between lines */
@media (max-width: 575px) {
  .cs_cta_actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .cs_cta_actions .cs_contact_or {
    display: none !important;
  }
}

.cs_form_status {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  min-height: 1.5em;
}

.cs_form_status.is-success {
  color: #3ecf8e !important;
}

.cs_form_status.is-error {
  color: #ff7a7a !important;
}

.cs_contact_form.is-sending .cs_contact_submit {
  opacity: 0.6 !important;
  pointer-events: none !important;
}

.sh-article .container {
  max-width: 820px !important;
}

.sh-article__back {
  display: inline-block;
  margin-bottom: 28px;
  color: #9A98A6 !important;
  font-size: var(--fs-caption);
  text-decoration: none;
}

.sh-article__back:hover {
  color: #ffffff !important;
}

.sh-article__title {
  margin-bottom: 16px !important;
}

.sh-article__meta {
  color: #9A98A6 !important;
  font-size: var(--fs-caption) !important;
  margin-bottom: 36px !important;
}

.sh-article__cover {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  margin-bottom: 48px;
}

.sh-article__body {
  color: #d6d5dc;
}

.sh-article__body p,
.sh-article__body li {
  font-size: var(--fs-subtext) !important;
  line-height: var(--lh-body) !important;
}

.sh-article__body h2,
.sh-article__body h3,
.sh-article__body h4 {
  font-size: var(--fs-card-h3) !important;
  line-height: var(--lh-title) !important;
  margin: 40px 0 16px !important;
  color: #ffffff;
}

.sh-article__body a {
  color: #ffd869;
  text-decoration: underline;
}

.sh-article__body img {
  max-width: 100%;
  height: auto;
  margin: 24px 0;
}

.sh-article__body blockquote {
  border-left: 3px solid #5530c6;
  padding-left: 20px;
  margin: 28px 0;
  color: #ffffff;
}

/* ==========================================================================
   MOBILE LAYOUT (≤ 767px) — spacing & sizes matched to studiohalfway.com
   Side gutters 10.4vw (39px on a 375px phone), hero with breathing room
   above and below, smaller buttons. Font sizes come from typography.css.
   ========================================================================== */
@media (max-width: 767px) {

  .container,
  .cs_hero_container,
  .cs_hero .container {
    padding-left: clamp(24px, 10.4vw, 40px) !important;
    padding-right: clamp(24px, 10.4vw, 40px) !important;
  }

  .cs_hero .row,
  .container>.row {
    --bs-gutter-x: 0px;
  }

  .hero,
  section.hero {
    padding-top: 190px !important;
    padding-bottom: 104px !important;
    min-height: auto !important;
  }

  .cs_hero.cs_style4 .cs_text_hero,
  .cs_hero .hero-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cs_hero .cs_title_text,
  .cs_hero.cs_style4 .cs_text_hero .cs_title_text {
    font-size: var(--fs-hero) !important;
    line-height: 1.15 !important;
  }

  .cbtn {
    font-size: var(--fs-button) !important;
  }

  /* Hero buttons side by side, like the live site (they wrap on very small phones) */
  .hcta {
    flex-wrap: wrap !important;
    gap: 12px 14px !important;
  }

  .hcta .cbtn,
  .hcta .cbtn-pill,
  .hcta .cbtn-link {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.6 !important;
  }

  .hcta .cbtn-pill {
    padding: 8px 16px !important;
  }

  /* Section heading → sub text spacing, and no forced line breaks in intros */
  .shead {
    gap: 18px !important;
  }

  .shead .lead br,
  .cs_faq_intro br,
  .cs_contact_subtitle br {
    display: none !important;
  }

  /* One size for every item title on phones (subheading level) */
  .proj .meta h3,
  .proj .meta .serif,
  #about .text-section h6,
  .text-section h6,
  .cs_services_list .cs_creative_protfolio .cs_card_title,
  .cs_services_list .cs_creative_protfolio .cs_card_title .cs_service_link_title,
  .cs_accordian_item .cs_accordian_title,
  .cs_accordian_title,
  .cs_card.cs_style_2 .cs_card_title,
  .cs_testimonial .cs_testimonial_avatar_name,
  .cs_testimonial_avatar_name,
  .cs_testimonial.cs_style_1 .cs_testimonial_avatar_name,
  .cs_testimonial.cs_style_1.cs_color_1 .cs_testimonial_avatar_name,
  .cs_post.cs_style_1 .cs_post_title,
  .cs_post_title,
  .cs_work_clean_title {
    font-size: var(--fs-title) !important;
    line-height: 1.3 !important;
  }

  /* One size for body copy on phones */
  #about .text-section p,
  .text-section p,
  .cs_services_list .cs_service_mobile_desc,
  .cs_service_mobile_desc,
  .cs_accordian_body p,
  .cs_testimonial .cs_testimonial_text,
  .cs_testimonial_text,
  .cs_testimonial.cs_style_1 .cs_testimonial_text,
  .cs_card.cs_style_2 .cs_card_subtitle,
  .anim_div_ShowRightSide p {
    font-size: var(--fs-body) !important;
    line-height: var(--lh-lead) !important;
  }

  /* Unified Arrow Size across all sections on phones */
  .proj .meta .cs_proj_arrow,
  .cs_proj_arrow,
  .cs_work_clean_arrow,
  .sh-callout__link .sh-arrow,
  .sh-callout__link .cs_proj_arrow,
  .sh-case-study-card .sh-arrow,
  .cs_work_card_arrow,
  .sh-arrow {
    font-size: 15px !important;
    line-height: 1 !important;
  }
}

/* ==========================================================================
   BLOG — swipeable carousel on phones & tablets (≤ 991px)
   ========================================================================== */
.sh-blog-dots {
  display: none;
}

@media (max-width: 991px) {
  #blog .sh-blog-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 16px;
  }

  #blog .sh-blog-track::-webkit-scrollbar {
    display: none;
  }

  #blog .sh-blog-track>* {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    scroll-snap-align: start !important;
    padding-left: 0 !important;
    padding-right: 16px !important;
  }

  #blog .sh-blog-track>*:last-child {
    padding-right: 0 !important;
  }

  .sh-blog-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }

  .sh-blog-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.2s ease, width 0.2s ease;
  }

  .sh-blog-dots span.is-active {
    width: 22px;
    border-radius: 4px !important;
    background: #5530c6;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #blog .sh-blog-track>* {
    flex-basis: 46% !important;
    max-width: 46% !important;
  }
}

/* ==========================================================================
   SECTION RHYTHM — one standard gap between every section, on every page
   --------------------------------------------------------------------------
   Every section carries `sh-section` plus its background: `sh-paper` (white)
   or `sh-plain` (the dark page background). Each section gets the same space
   above and below its content. When two sections on the same background
   meet, the first drops its bottom space so the gap stays one step, not two.
   `:not(#_)` lifts specificity above the older `#blog`, `#work`… rules.
   ========================================================================== */
:root {
  --section-space: clamp(60px, 6.5vw, 96px);
  /* 96px desktop · 60px phones */
  --page-title-space: clamp(36px, 4vw, 56px);
  /* page title → first section */
}

.sh-section:not(#_):not(#__) {
  display: flow-root;
  /* children's margins stay inside the section */
  padding-top: var(--section-space) !important;
  padding-bottom: var(--section-space) !important;
}

/* Same background meeting: the gap is kept as the next section's top space
   (so every heading has room above it) and the earlier section drops its
   bottom space. The -1px overlap hides the hairline seam between two white
   sections on fractional pixel boundaries. */
.sh-paper:not(#_):not(#__):has(+ .sh-paper),
.sh-plain:not(.sh-page-title):not(.cs_testimonial_section):not(#testimonials):not(#_):not(#__):has(+ .sh-plain) {
  padding-bottom: 0 !important;
}

:is(.cs_testimonial_section, #testimonials):not(#_):not(#__) {
  padding-top: var(--section-space) !important;
  padding-bottom: var(--section-space) !important;
}

.sh-paper:not(#_):not(#__)+.sh-paper {
  margin-top: -1px !important;
}

/* No divider lines between sections — spacing alone separates them.
   The footer keeps its top line. */
:is(.cs_testimonial_section, .cs_contact_section):not(#_):not(#__) {
  border-bottom: none !important;
}

/* Inner pages (About, Work, Services, Contact, Blog…): space under the fixed
   header (87px tall) before the page title — 96px on desktop, 48px on phones */
.sh-page-top:not(#_) {
  height: calc(87px + 96px) !important;
}

@media (max-width: 991px) {
  .sh-page-top:not(#_) {
    height: calc(87px + 48px) !important;
  }
}

/* Page titles (About, Work, Contact) already sit under the header spacer;
   the section after a title starts right away. */
.sh-page-title:not(#_):not(#__) {
  padding-top: 0 !important;
  padding-bottom: var(--page-title-space) !important;
}

.sh-page-title:not(#_):not(#__)+.sh-section {
  padding-top: 0 !important;
}

/* No page title (e.g. it's switched off in the CMS): the first section sits
   straight under the header spacer instead of adding a second gap. */
.sh-page-top:not(#_)+.sh-section:not(#_):not(#__) {
  padding-top: 0 !important;
}

/* …unless that section opens with its own heading: then a full section gap */
.sh-page-title:not(#_):not(#__)+.sh-services-list {
  padding-top: calc(var(--section-space) - var(--page-title-space)) !important;
}

.cs_footer:not(#_):not(#__) {
  padding-top: var(--section-space) !important;
}


/* Trailing space left by the last item would add to the section gap */
.cs_card_2_list .cs_card.cs_style_2:last-child {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.cs_services_list> :last-child {
  padding-bottom: 0 !important;
}

.cs_ui_design .cs_isotop_items_details {
  margin-bottom: -36px !important;
}

.cs_contact_form .col-12:has(> .cs_form_status:empty) {
  display: none !important;
}

/* ==========================================================================
   BUTTON TYPOGRAPHY — one style for every button, on every page
   --------------------------------------------------------------------------
   Primary buttons: the navbar "Start a Project" style — Mattone, uppercase,
   13px (11px on phones), same letter spacing and height everywhere.
   The home hero buttons (.cbtn) keep their own original style.
   Secondary links (social links, "or schedule a call", Work filters):
   Poppins Medium 14px.
   `:not(#_)` lifts specificity above older per-button rules.
   ========================================================================== */
:is(.cs_nav_cta_btn, .cs_btn, .cs_side_cta_btn, .btn-view-all):not(#_):not(#__),
:is(.cs_nav_cta_btn, .cs_btn, .cs_side_cta_btn, .btn-view-all):not(#_):not(#__) :is(span, b, strong) {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-style: normal !important;
  font-size: var(--fs-button) !important;
  letter-spacing: var(--ls-button) !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

/* Same height for every boxed button (the navbar one stays compact) */
:is(.cs_btn, .cs_side_cta_btn, .btn-view-all):not(#_):not(#__) {
  padding: 16px 28px !important;
}

:is(.cbtn-link:not(.cbtn), .cs_footer_social a, .cs_side_social_links a, .cs_isotop_item_menu li):not(#_):not(#__) {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-style: normal !important;
  font-size: 14px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Desktop: FAQ heading */
@media (min-width: 992px) {
  .cs_faq_sidebar .cs_section_title {
    width: auto !important;
  }
}

/* ==========================================================================
   ADMIN BAR — shown only to signed-in team members browsing the website
   ========================================================================== */
.sh-admin-bar {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100vw - 96px);
  padding: 4px;
  overflow-x: auto;
  background: rgba(22, 22, 26, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  scrollbar-width: none;
}

.sh-admin-bar a,
.sh-admin-bar__tag {
  flex: none;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  color: #e4e4e7 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.sh-admin-bar a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
}

.sh-admin-bar .sh-admin-bar__brand {
  background: #5530c6;
  color: #ffffff !important;
}

.sh-admin-bar .sh-admin-bar__brand:hover {
  background: #4524ab;
}

.sh-admin-bar__tag {
  background: #ffd869;
  color: #16161a !important;
}

/* ==========================================================================
   TYPOGRAPHY CONSISTENCY — one size per role on every page
   --------------------------------------------------------------------------
   Item titles  Mattone  var(--fs-title)  24px desktop · 16px phones
   Numbers      Mattone  var(--fs-number) 40px desktop · 26px phones
   Body copy    Poppins  var(--fs-body)   15px desktop · 13.5px phones
   Labels       Poppins  11px uppercase
   `:not(#_)` lifts these above the older section-specific rules.
   ========================================================================== */
:is(.cs_testimonial_avatar_name,
  #about .text-section h6,
  #about .cs_img_card_text h6,
  .proj .meta h3,
  .proj .meta .serif,
  .cs_work_clean_title,
  .cs_accordian_title,
  .cs_card_title,
  .cs_service_link_title,
  .sh-service-card__title,
  .sh-process__title,
  .sh-step__title):not(#_):not(#__) {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: var(--fs-title) !important;
  line-height: 1.3 !important;
  letter-spacing: var(--ls-h3) !important;
}

/* Blog post titles: Poppins Medium */
:is(.cs_post_title,
  .cs_post.cs_style_1 .cs_post_title,
  #blog .cs_post_title,
  .sh-blog-track .cs_post_title):not(#_):not(#__) {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: clamp(17px, 1.8vw, 21px) !important;
  line-height: 1.4 !important;
  letter-spacing: var(--ls-body) !important;
  color: #ffffff !important;
}

/* project names read the same on the home page and the Work page */
:is(.proj .meta h3, .proj .meta .serif):not(#_):not(#__) {
  text-transform: none !important;
}

:is(.cs_card_2_list .cs_card_logo,
  #about .cs_stroke_text span,
  .sh-service-card__num,
  .sh-step__num,
  .sh-scrollsteps__current):not(#_):not(#__) {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: var(--fs-number) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
}

:is(#about .text-section p,
  .cs_card.cs_style_2 .cs_card_subtitle,
  .cs_testimonial_text,
  .cs_testimonial.cs_style_1 .cs_testimonial_text):not(#_):not(#__) {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-lead) !important;
}

.cs_testimonial_avatar_designation:not(#_):not(#__) {
  font-size: 11px !important;
  letter-spacing: var(--ls-eyebrow) !important;
}


/* Footer: contact links read as body copy, the copyright as a caption */
.cs_footer_contact_list li:not(#_):not(#__),
.cs_footer_contact_list li a:not(#_):not(#__) {
  font-size: var(--fs-body) !important;
}

.cs_copyright .container:not(#_):not(#__) {
  font-size: 13px !important;
}

/* ==========================================================================
   ABOUT — STATEMENT CARD (about_callout): white card, black statement with
   the highlighted words in blue, link on the left, image on the right.
   Stacks on phones.
   ========================================================================== */
.sh-callout__card {
  background: #ffffff;
  padding: clamp(28px, 4vw, 48px);
}

.sh-callout__title:not(#_) {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  line-height: var(--lh-title) !important;
  color: #16161A !important;
  max-width: 460px;
  margin: 0 0 36px !important;
}

.sh-callout__title .em {
  color: #5530c6 !important;
  /* button blue — yellow is too faint on the white card */
}

.sh-callout__link:not(#_),
.sh-callout__link:not(#_):visited {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: 16px !important;
  color: #16161A !important;
  border-bottom: 2px solid #ffd869;
  padding-bottom: 4px;
  text-decoration: none !important;
  transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}

.sh-callout__link .sh-arrow,
.sh-callout__link .cs_proj_arrow {
  display: inline-block !important;
  color: #16161A !important;
  font-size: 18px !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.sh-callout__link:not(#_):hover,
.sh-callout__link:not(#_):focus {
  color: #5530c6 !important;
  border-color: #5530c6 !important;
  gap: 10px;
}

.sh-callout__link:hover .sh-arrow,
.sh-callout__link:hover .cs_proj_arrow {
  color: #5530c6 !important;
  transform: translate(3px, -3px) !important;
}

.sh-callout__img {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.sh-callout__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .sh-callout__title:not(#_) {
    margin-bottom: 24px !important;
  }
}

/* Lines either side of centred headings (About → Our Studio Story): brand
   yellow instead of the template orange */
.cs_section_heading_hr.cs_style_1 .cs_hr_design:not(#_) {
  border-color: #ffd869 !important;
}

/* About → closing CTA: heading set in Poppins instead of Mattone */
.sh-about-cta .cs_section_title:not(#_):not(#__) {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0 !important;
}

/* Phones/tablets: the lines stack above and below the heading — keep only
   the one underneath */
@media (max-width: 991px) {
  .cs_section_heading_hr.cs_style_1>.cs_hr_design:first-child {
    display: none !important;
  }
}

/* Footer menu: "Quick Links" heading with the links left-aligned beneath,
   in one row (hidden on phones) */
.cs_footer_nav_title:not(#_) {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: var(--fs-kicker) !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase !important;
  color: #9A98A6 !important;
  margin: 0 0 16px !important;
}

.cs_footer_nav:not(#_):not(#__) {
  justify-content: flex-start !important;
  gap: 8px 40px !important;
  padding-top: 0 !important;
}

.cs_footer_nav:not(#_):not(#__)>li {
  margin: 0 !important;
}

/* Phones: no footer menu — the header menu already covers these links */
@media screen and (max-width: 767px) {

  .cs_footer_nav_title:not(#_),
  .cs_footer_nav:not(#_):not(#__) {
    display: none !important;
  }
}

/* Desktop footer: icons sit a little lower, and Discovery Call goes under
   the email instead of beside it */
@media screen and (min-width: 768px) {
  .cs_footer_social:not(#_) {
    margin-top: 16px !important;
  }
}

.cs_footer_contact_list:not(#_) {
  flex-direction: column !important;
  gap: 16px !important;
}

/* Forms: plain white "or" before the secondary link (e.g. Schedule discovery
   call); the link is white with the site's yellow underline */
.cs_contact_form .cs_contact_or:not(#_) {
  color: #ffffff !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
}

.cs_contact_form .cbtn-link:not(#_) {
  color: #ffffff !important;
  border-bottom: 1.5px solid #ffd869 !important;
  padding-bottom: 3px !important;
}

.cs_contact_form .cbtn-link:not(#_):hover,
.cs_contact_form .cbtn-link:not(#_):focus {
  color: #ffd869 !important;
}

/* ==========================================================================
   WORK → CASE STUDY PAGE (/work/{slug})
   Authentic Orangetribe layout & clean editorial aesthetics with Studio Halfway typography:
   - Mattone display font for brand titles & headings
   - Poppins font for challenge, solution, story body & specs
   - Clean 2-column challenge/solution & metadata grid
   - Seamless full-width hero cover and visual storytelling
   - Minimalist editorial quote callout (no duplicate divider borders)
   - Refined previous & next project dual navigation (single top divider)
   ========================================================================== */

/* Space under fixed header for case study */
.sh-page-top:has(+ .sh-case-study) {
  height: calc(87px + 24px) !important;
}

.sh-case-study {
  padding-top: 0 !important;
  padding-bottom: clamp(32px, 4vw, 56px) !important;
  position: relative;
  background: transparent;
}

/* Fallback for browsers without :has */
@supports not selector(:has(*)) {
  .sh-page-top+.sh-case-study {
    margin-top: -64px !important;
  }
}

/* Top Navigation / Back Link */
.sh-cs-top-bar {
  margin-top: 0 !important;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

.sh-cs-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9A98A6 !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium, 500) !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.sh-cs-back-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.sh-cs-back-link:hover {
  color: #ffffff !important;
}

.sh-cs-back-link:hover .sh-cs-back-arrow {
  transform: translateX(-4px);
}

/* Hero Showcase Cover */
.sh-cs-hero-wrap {
  margin-bottom: clamp(36px, 4.5vw, 64px) !important;
}

.sh-cs-hero-frame {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #111113;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sh-cs-hero-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 1. Project Title & Description Section */
.sh-cs-header-wrap {
  max-width: 920px;
  margin-bottom: clamp(36px, 4.5vw, 56px) !important;
}

.sh-cs-title {
  font-family: var(--font-display) !important;
  font-size: clamp(36px, 4.2vw, 56px) !important;
  line-height: 1.12 !important;
  color: #ffffff !important;
  margin: 0 0 12px 0 !important;
  text-transform: none !important;
}

.sh-cs-subtitle {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular, 400) !important;
  font-size: 16px !important;
  color: #9A98A6 !important;
  margin: 0 0 20px 0 !important;
}

.sh-cs-summary p {
  font-family: var(--font-body) !important;
  font-size: clamp(16px, 1.2vw, 18px) !important;
  line-height: 1.75 !important;
  color: #d1d5db !important;
  margin: 0 !important;
}

/* 2. Challenge (Left) & Solution (Right) 2-Column Section */
.sh-cs-challenge-solution-wrap {
  margin-bottom: clamp(36px, 4.5vw, 56px) !important;
}

.sh-cs-cs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.sh-cs-strategy-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sh-cs-section-label {
  display: block;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium, 500) !important;
  font-size: 16px !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Solution Label with Yellow Underline & Arrow */
.sh-cs-solution-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border-bottom: 2px solid #ffd869 !important;
  padding-bottom: 4px !important;
  margin-bottom: 6px !important;
  font-weight: 600 !important;
}

.sh-cs-solution-arrow {
  color: #ffd869;
  width: 14px;
  height: 14px;
  display: inline-block;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.sh-cs-strategy-item--discovery:hover .sh-cs-solution-arrow,
.sh-cs-strategy-item--solution:hover .sh-cs-solution-arrow {
  transform: rotate(45deg) translate(2px, -2px);
}

.sh-cs-challenge-text,
.sh-cs-solution-text {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.72 !important;
  color: #d1d5db !important;
  margin: 0 !important;
}

/* 3. Services Tags Block */
.sh-cs-services-wrap {
  margin-bottom: clamp(40px, 5vw, 68px) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sh-cs-tags-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sh-cs-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d1d5db;
  font-family: var(--font-body) !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
}

.sh-cs-tag:hover {
  background: rgba(255, 216, 105, 0.08);
  border-color: #ffd869;
  color: #ffd869;
  transform: translateY(-2px);
}

.sh-cs-external-btn {
  margin: 0;
}

/* Statement / Editorial Quote Section (Clean, No Duplicate Borders) */
.sh-cs-quote-section {
  padding: clamp(32px, 4vw, 56px) 0 !important;
  margin-bottom: clamp(32px, 4vw, 56px) !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
}

.sh-cs-quote-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}

.sh-cs-quote-text {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2.1vw, 27px) !important;
  line-height: 1.55 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  margin: 0 auto !important;
  border: none !important;
  padding: 0 !important;
  font-style: normal !important;
}

.sh-cs-quote-btn {
  margin-top: clamp(36px, 4.5vw, 56px) !important;
  display: flex;
  justify-content: center;
}

/* Gallery Showcase (Single Full-Width Landscape Images Stacked) */
.sh-cs-gallery-section {
  margin-bottom: clamp(48px, 6vw, 76px) !important;
}

.sh-cs-gallery-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sh-cs-gallery-item {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Full Width Banners (100% full width) */
.sh-cs-gallery-item--full {
  width: 100% !important;
  flex: 0 0 100% !important;
}

/* 2-Columns Side-by-Side (50% left & right) */
.sh-cs-gallery-item--half {
  width: 50% !important;
  flex: 0 0 50% !important;
}

.sh-cs-gallery-img {
  width: 100%;
  border-radius: 0 !important;
  overflow: hidden;
  background: #141416;
  border: none !important;
  position: relative;
}

.sh-cs-gallery-img--full {
  width: 100%;
}

.sh-cs-gallery-img--half {
  width: 100%;
}

.sh-cs-gallery-img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sh-cs-gallery-item:hover .sh-cs-gallery-img img {
  transform: scale(1.015);
}

@media (max-width: 767px) {
  .sh-cs-gallery-item--half {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

.sh-cs-gallery-frame {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #141416;
}

.sh-cs-gallery-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Previous & Next Dual Navigation (Seamless 2-Column Typography) */
.sh-cs-pagination-section {
  padding-top: clamp(28px, 3.5vw, 48px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
  border-top: none !important;
}

.sh-cs-pagination-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.sh-cs-nav-link {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  gap: 6px;
  transition: opacity 0.25s ease;
}

.sh-cs-nav-link--next {
  text-align: right;
  align-items: flex-end;
}

.sh-cs-nav-kicker {
  display: inline-block;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #9A98A6 !important;
  transition: color 0.25s ease, transform 0.25s ease;
}

.sh-cs-nav-title {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.2vw, 30px) !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 !important;
  transition: color 0.25s ease;
}

.sh-cs-nav-sub {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: #71717a !important;
  transition: color 0.25s ease;
}

.sh-cs-nav-link:hover .sh-cs-nav-kicker {
  color: #ffd869 !important;
}

.sh-cs-nav-link--prev:hover .sh-cs-nav-kicker {
  transform: translateX(-4px);
}

.sh-cs-nav-link--next:hover .sh-cs-nav-kicker {
  transform: translateX(4px);
}

.sh-cs-nav-link:hover .sh-cs-nav-title {
  color: #ffd869 !important;
}

.sh-cs-nav-link:hover .sh-cs-nav-sub {
  color: #d1d5db !important;
}

.sh-cs-nav-link--empty {
  display: block;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .sh-cs-cs-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .sh-cs-pagination-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sh-cs-nav-link--next {
    text-align: left;
    align-items: flex-start;
  }
}

/* Marquee separator: starburst icon instead of "*" */
.cs_moving_section_wrap .cs_marquee_bullet .cs_marquee_burst {
  display: block;
  width: 1.5em;
  height: 1.5em;
}

/* ==========================================================================
   COMING SOON CASE STUDY PAGE (White Background & Rotating Badge)
   ========================================================================== */

body:has(.sh-case-study--coming-soon) {
  background-color: #ffffff !important;
  color: #111113 !important;
}

body:has(.sh-case-study--coming-soon) .sh-page-top,
body:has(.sh-case-study--coming-soon) .cs_scrollup {
  display: none !important;
}

body:has(.sh-case-study--coming-soon) .cs_site_header {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body:has(.sh-case-study--coming-soon) .cs_site_header .cs_site_branding .logo-white {
  display: none !important;
}

body:has(.sh-case-study--coming-soon) .cs_site_header .cs_site_branding .logo-dark {
  display: block !important;
}

body:has(.sh-case-study--coming-soon) .cs_site_header .cs_nav_list>li>a {
  color: #1a1a1e !important;
}

body:has(.sh-case-study--coming-soon) .cs_site_header .cs_nav_list>li>a:hover {
  color: #5530c6 !important;
}

body:has(.sh-case-study--coming-soon) .cs_site_header .cs_btn {
  background: #111113 !important;
  color: #ffffff !important;
  border-color: #111113 !important;
}

body:has(.sh-case-study--coming-soon) .cs_site_header .cs_btn:hover {
  background: #5530c6 !important;
  border-color: #5530c6 !important;
}

.sh-card-cs-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(17, 17, 19, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffd869;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 216, 105, 0.35);
  z-index: 5;
  pointer-events: none;
}

.sh-case-study--coming-soon {
  background-color: #ffffff !important;
  color: #111113 !important;
  min-height: calc(100vh - 120px);
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
}

.sh-cs-cs-blank-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - 120px);
}

.sh-cs-cs-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 36px;
  padding: 40px 20px;
}

.sh-cs-rotating-badge-container {
  width: 290px;
  height: 290px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.sh-cs-rotating-badge {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: sh-spin 22s linear infinite;
  filter: drop-shadow(0 12px 30px rgba(85, 48, 198, 0.08));
}

.sh-cs-coming-soon-tagline {
  display: none;
}

@keyframes sh-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 767px) {
  .sh-cs-rotating-badge-container {
    width: 190px;
    height: 190px;
  }
}

/* ==========================================================================
   CASE STUDIES ARCHIVE & CARDS (/case-studies)
   ========================================================================== */

.sh-cs-index-hero {
  padding-top: 20px;
}

.sh-case-studies-archive {
  position: relative;
}

.sh-case-study-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
  background: #141418 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.sh-case-study-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 216, 105, 0.35) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
}

.sh-case-study-card__cover {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  position: relative !important;
  background: #0d0d10 !important;
}

.sh-case-study-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sh-case-study-card:hover .sh-case-study-card__img {
  transform: scale(1.05) !important;
}

.sh-case-study-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #18181f 0%, #22222b 100%);
  color: #ffd869;
  font-size: 22px;
}

.sh-case-study-card__body {
  padding: 26px 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.sh-case-study-card__meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.sh-case-study-card__client {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #ffd869 !important;
  background: rgba(255, 216, 105, 0.08) !important;
  border: 1px solid rgba(255, 216, 105, 0.25) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
}

.sh-case-study-card__cat {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.sh-case-study-card__title {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2vw, 24px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 0 12px 0 !important;
  transition: color 0.25s ease !important;
}

.sh-case-study-card:hover .sh-case-study-card__title {
  color: #ffd869 !important;
}

.sh-case-study-card__excerpt {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 20px 0 !important;
  flex-grow: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.sh-case-study-card__footer {
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-top: auto !important;
}

.sh-case-study-card__read-more {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: #5530c6 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

.sh-case-study-card:hover .sh-case-study-card__read-more {
  color: #ffd869 !important;
}

.sh-case-study-card:hover .sh-arrow {
  transform: translate(3px, -3px) !important;
}