/*
 Theme Name:   Vault Child
 Theme URI:    
 Description:  Child theme for the Vault Multi-Purpose Elementor WordPress Theme by UiCore
 Author:       
 Author URI:   
 Template:     vault
 Version:      1.0.1
 Requires at least: 5.0
 Tested up to: 6.4
 Requires PHP: 7.4
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         elementor, woocommerce, responsive, multipurpose
 Text Domain:  vault-child
*/

/* ==========================================================================
   Custom styles go below this line
   ========================================================================== */

/* Global background */
body {
  background-color: #f6f5f3 !important;
}

/* ==========================================================================
   Floating Navbar
   ========================================================================== */

/* Remove theme's navbar before pseudo-element */
.uicore-navbar .uicore-header-wrapper::before {
  content: none !important;
  display: none !important;
}

/* Make wrapper transparent and overlapping the content */
#wrapper-navbar.uicore-navbar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  z-index: 999 !important;
  padding: 48px 80px 0 80px !important;
  box-sizing: border-box !important;
}

/* When scrolled/sticky — keep floating style */
#wrapper-navbar.uicore-navbar.uicore-scrolled {
  position: fixed !important;
  padding-top: 12px !important;
}

/* The inner header wrapper becomes the floating pill */
#wrapper-navbar .uicore-header-wrapper {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow:
    0px 4px 6.5px rgba(0, 0, 0, 0.07),
    0px -1px 4px rgba(0, 0, 0, 0.15) !important;
  padding: 4px 4px 4px 16px !important;
  max-width: 1247px !important;
  margin: 0 auto !important;
}

/* Nav container — space-between for logo / links / CTA */
#wrapper-navbar .uicore-header-wrapper > nav.elementor-container {
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Logo size — Figma: 154×25px */
#wrapper-navbar .uicore-branding a {
  height: stretch !important;
  display: flex !important;
  align-items: center !important;
}

#wrapper-navbar .uicore-branding img {
  width: 154px !important;
  height: 25px !important;
  object-fit: contain !important;
}

/* Nav link text styling */
#wrapper-navbar .uicore-menu > .menu-item > a {
  color: #111 !important;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

#wrapper-navbar .uicore-menu > .menu-item > a:hover {
  color: #555 !important;
}

/* Submenu dropdown */
#wrapper-navbar .uicore-menu .sub-menu {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !important;
  padding: 8px 0 !important;
  min-width: 200px !important;
  list-style: none !important;
}

#wrapper-navbar .uicore-menu .sub-menu .menu-item a {
  color: #111 !important;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 8px 16px !important;
  display: block !important;
  background: transparent !important;
  transition:
    background 0.15s ease,
    color 0.15s ease !important;
}

#wrapper-navbar .uicore-menu .sub-menu .menu-item a:hover {
  background: #f6f5f3 !important;
  color: #555 !important;
}

#wrapper-navbar .uicore-menu .sub-menu .menu-item.current_page_item a {
  color: #555 !important;
  font-weight: 500 !important;
}

/* CTA "Book A Call" button → black pill */
#wrapper-navbar .uicore-cta-wrapper .uicore-btn {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Neue Montreal", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  min-width: 150px !important;
  transition: background 0.2s ease !important;
}

#wrapper-navbar .uicore-cta-wrapper .uicore-btn:hover {
  background: #333 !important;
}

/* Push content down so it's not hidden behind the floating navbar */
#uicore-page > .uicore-content,
#uicore-page > #content {
  padding-top: 0 !important;
}

/* Mobile/tablet nav (≤1024px) — simple bar, not floating ─────── */
/* UICore's own JS switches to hamburger mode below 1025px,        */
/* so we match that breakpoint exactly.                            */

/* ── 1025–1225px: floating pill but reduced padding to prevent overflow ── */
@media (min-width: 1025px) and (max-width: 1225px) {
  #wrapper-navbar.uicore-navbar,
  #wrapper-navbar.uicore-navbar.uicore-scrolled {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #wrapper-navbar .uicore-header-wrapper {
    max-width: 100% !important;
  }
}

/* Remove theme margin-left on .uicore-extra at 1025px+ */
@media (min-width: 1026px) {
  .uicore-navbar .uicore-extra {
    margin-left: 0 !important;
  }
}

@media (max-width: 1024px) {
  /* Reset floating — plain white bar */
  #wrapper-navbar.uicore-navbar,
  #wrapper-navbar.uicore-navbar.uicore-scrolled {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  /* Flat wrapper — no pill */
  #wrapper-navbar .uicore-header-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Inner nav row */
  #wrapper-navbar .uicore-header-wrapper > nav.elementor-container {
    height: 64px !important;
    padding: 0 !important;
    align-items: center !important;
  }

  /* 1. Hamburger → far left */
  #wrapper-navbar .uicore-toggle.uicore-ham {
    order: -1 !important;
    flex-shrink: 0 !important;
  }

  /* 2. Logo → centred */
  #wrapper-navbar .uicore-branding {
    order: 0 !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 3. CTA (JS moves .uicore-extra to nav level on mobile) → far right */
  #wrapper-navbar nav.elementor-container > .uicore-extra {
    order: 1 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  #wrapper-navbar .uicore-cta-wrapper {
    display: flex !important;
    align-items: center !important;
  }

  /* Mobile menu open state — toggled by JS via .cc-nav-open
     Note: display is controlled by JS (inline style) not here,
     because UICore's stylesheet !important would otherwise win. */
  #wrapper-navbar .uicore-nav-menu.cc-nav-open {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #fff !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
    z-index: 99999 !important;
    padding: 8px 0 24px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 64px) !important;
  }

  #wrapper-navbar .uicore-nav-menu.cc-nav-open .uicore-menu-container {
    display: block !important;
  }

  #wrapper-navbar .uicore-nav-menu.cc-nav-open .uicore-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 16px !important;
  }

  #wrapper-navbar .uicore-nav-menu.cc-nav-open .uicore-menu .menu-item a {
    display: block !important;
    padding: 14px 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #111 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-decoration: none !important;
  }

  /* Compact button size for mobile top bar */
  #wrapper-navbar .uicore-cta-wrapper .uicore-btn {
    height: 40px !important;
    min-width: auto !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   Custom Fonts
   ========================================================================== */

@font-face {
  font-family: "Bethany Elingston";
  src: url("fonts/Bethany Elingston.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasDisplayXXThin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasDisplayThin.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasDisplayLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasDisplayMediu.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasDisplayBlack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Light.eot");
  src:
    url("fonts/NeueMontreal-Light.eot?#iefix") format("embedded-opentype"),
    url("fonts/NeueMontreal-Light.woff2") format("woff2"),
    url("fonts/NeueMontreal-Light.woff") format("woff"),
    url("fonts/NeueMontreal-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-LightItalic.eot");
  src:
    url("fonts/NeueMontreal-LightItalic.eot?#iefix") format("embedded-opentype"),
    url("fonts/NeueMontreal-LightItalic.woff2") format("woff2"),
    url("fonts/NeueMontreal-LightItalic.woff") format("woff"),
    url("fonts/NeueMontreal-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Regular.eot");
  src:
    url("fonts/NeueMontreal-Regular.eot?#iefix") format("embedded-opentype"),
    url("fonts/NeueMontreal-Regular.woff2") format("woff2"),
    url("fonts/NeueMontreal-Regular.woff") format("woff"),
    url("fonts/NeueMontreal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Italic.eot");
  src:
    url("fonts/NeueMontreal-Italic.eot?#iefix") format("embedded-opentype"),
    url("fonts/NeueMontreal-Italic.woff2") format("woff2"),
    url("fonts/NeueMontreal-Italic.woff") format("woff"),
    url("fonts/NeueMontreal-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Medium.eot");
  src:
    url("fonts/NeueMontreal-Medium.eot?#iefix") format("embedded-opentype"),
    url("fonts/NeueMontreal-Medium.woff2") format("woff2"),
    url("fonts/NeueMontreal-Medium.woff") format("woff"),
    url("fonts/NeueMontreal-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-MediumItalic.eot");
  src:
    url("fonts/NeueMontreal-MediumItalic.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/NeueMontreal-MediumItalic.woff2") format("woff2"),
    url("fonts/NeueMontreal-MediumItalic.woff") format("woff"),
    url("fonts/NeueMontreal-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Bold.eot");
  src:
    url("fonts/NeueMontreal-Bold.eot?#iefix") format("embedded-opentype"),
    url("fonts/NeueMontreal-Bold.woff2") format("woff2"),
    url("fonts/NeueMontreal-Bold.woff") format("woff"),
    url("fonts/NeueMontreal-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-BoldItalic.eot");
  src:
    url("fonts/NeueMontreal-BoldItalic.eot?#iefix") format("embedded-opentype"),
    url("fonts/NeueMontreal-BoldItalic.woff2") format("woff2"),
    url("fonts/NeueMontreal-BoldItalic.woff") format("woff"),
    url("fonts/NeueMontreal-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   Global Custom Page Styles
   ========================================================================== */

.cc-page {
  font-family: "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
  color: #111;
  background-color: #f6f5f3;
  /* Figma container uses gap: 80px between every section block */
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
  overflow-x: hidden; /* clips marquee / carousel overflow without breaking sticky nav */
}

/* Shared button styles */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
  white-space: nowrap;
}

.cc-btn--dark {
  background: #111;
  color: #fff;
  border: none;
}

.cc-btn--dark:hover {
  background: #333;
  color: #fff;
}

.cc-btn--dark .cc-btn__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.cc-btn--outline {
  background: transparent;
  color: #111;
  border: 1px solid #111;
}

.cc-btn--outline:hover {
  background: #111;
  color: #fff;
}

.cc-btn--blue {
  background: #003163;
  color: #fff;
  border: none;
}

.cc-btn--blue:hover {
  background: #002147;
  color: #fff;
}

/* ==========================================================================
   Section 1 — Hero
   ========================================================================== */

.cc-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 208px; /* space for floating nav */
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* Pink blur glow */
.cc-hero__glow {
  position: absolute;
  width: 856px;
  height: 520px;
  top: 600px;
  left: 50%;
  transform: translateX(-20%) rotate(-27deg);
  transform-origin: top left;
  background: rgba(255, 178, 201, 0.35);
  filter: blur(125px);
  pointer-events: none;
  z-index: 0;
}

/* Text content block */
.cc-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 1160px;
  width: 100%;
  padding: 0 140px;
  box-sizing: border-box;
  text-align: center;
}

.cc-hero__headline {
  font-family: "Bethany Elingston", Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  color: #1b1b1b;
  line-height: 1.15;
  text-transform: capitalize;
  margin: 0;
}

.cc-hero__subtext {
  max-width: 594px;
  font-size: 20px;
  color: #353535;
  line-height: 1.5;
  margin: 0;
}

.cc-hero__subtext strong {
  font-weight: 600;
}

.cc-hero__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.cc-hero__ctas .cc-btn {
  min-width: 220px;
}

.cc-hero__trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cc-hero__trustpilot {
  width: 168px;
  height: 47px;
  object-fit: contain;
}

.cc-hero__trust-text {
  max-width: 328px;
  font-size: 16px;
  color: #353535;
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
  text-align: center;
}

.cc-hero__trust-text strong {
  font-weight: 500;
}

/* Dashboard screenshot / video player */
.cc-hero__screenshot-wrap {
  position: relative;
  z-index: 1;
  width: 1160px;
  max-width: calc(100% - 280px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0px -1px 3px rgba(0, 0, 0, 0.05),
    0px 1px 3px rgba(0, 0, 0, 0.05);
}

.cc-hero__screenshot {
  width: 100%;
  height: auto;
  display: block;
}

/* Video player — thumbnail + play button */
.cc-hero__video-player {
  position: relative;
  width: 100%;
  line-height: 0;
}

.cc-hero__video-preview {
  position: relative;
  cursor: pointer;
  display: block;
  line-height: 0;
}

.cc-hero__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  pointer-events: none;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.cc-hero__video-preview:hover .cc-hero__play-btn {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Aspect-ratio box injected by JS after click */
.cc-hero__video-ratio {
  position: relative;
  width: 100%;
  padding-bottom: 52.41%; /* 608/1160 */
  height: 0;
  overflow: hidden;
}

.cc-hero__video-ratio iframe,
.cc-hero__video-ratio video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Hero — Tablet ─────────────────────────────── */
@media (max-width: 1024px) {
  .cc-hero {
    padding-top: 56px;
    gap: 32px;
  }

  .cc-hero__content {
    padding: 0 40px;
  }

  .cc-hero__headline {
    font-size: 40px;
  }

  .cc-hero__screenshot-wrap {
    max-width: calc(100% - 80px);
  }
}

/* ── Hero — Mobile ─────────────────────────────── */
@media (max-width: 767px) {
  .cc-hero {
    padding-top: 56px;
    gap: 24px;
  }

  .cc-hero__content {
    padding: 48px 16px;
    gap: 24px;
  }

  .cc-hero__headline {
    font-size: 36px;
    max-width: 329px;
  }

  .cc-hero__subtext {
    font-size: 18px;
  }

  .cc-hero__ctas {
    flex-wrap: nowrap;
    width: 100%;
  }

  .cc-hero__ctas .cc-btn {
    flex: 1;
    min-width: 0;
  }

  .cc-hero__screenshot-wrap {
    max-width: calc(100% - 32px);
    border-radius: 16px;
  }
}

/* =============================================================================
   SECTION 2: AS SEEN IN
   ============================================================================= */

/* inter-section spacing is handled by gap on .cc-page — no padding-bottom needed here */
.cc-as-seen-in {
  width: 100%;
}

.cc-as-seen-in__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── Heading ─────────────────────────────────────────────────── */
.cc-as-seen-in__heading {
  text-align: center;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #070707;
  text-transform: capitalize;
  margin: 0;
  /* Keep heading visible in search results */
  line-height: 1.25;
}

/* ── Scrolling track wrapper ─────────────────────────────────── */
.cc-as-seen-in__track-wrap {
  position: relative;
  overflow: hidden;
  padding: 24px 0;
}

/* ── Gradient fade overlays ──────────────────────────────────── */
.cc-as-seen-in__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  z-index: 2;
  pointer-events: none;
}

.cc-as-seen-in__fade--left {
  left: 0;
  background: linear-gradient(
    to right,
    #f6f5f3 0%,
    rgba(246, 245, 243, 0) 100%
  );
}

.cc-as-seen-in__fade--right {
  right: 0;
  background: linear-gradient(to left, #f6f5f3 0%, rgba(246, 245, 243, 0) 100%);
}

/* ── Infinite marquee track ──────────────────────────────────── */
.cc-as-seen-in__track {
  display: flex;
  align-items: center;
  gap: 24px; /* space between the two repeated sets at the seam */
  width: max-content;
  animation: cc-marquee 35s linear infinite;
  will-change: transform;
}

/* Pause marquee on hover/focus for accessibility */
.cc-as-seen-in__track-wrap:hover .cc-as-seen-in__track,
.cc-as-seen-in__track-wrap:focus-within .cc-as-seen-in__track {
  animation-play-state: paused;
}

/* ── Logo sets (duplicated for seamless loop) ────────────────── */
.cc-as-seen-in__set {
  display: flex;
  align-items: center;
  gap: 72px;
  list-style: none;
  margin: 0;
  padding: 0; /* gap at seam is controlled by track-level gap above */
}

/* ── Individual logo ─────────────────────────────────────────── */
.cc-as-seen-in__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.25s ease;
}

.cc-as-seen-in__logo:hover {
  opacity: 1;
}

.cc-as-seen-in__logo img {
  display: block;
  max-height: 41px;
  width: auto;
  /* Greyscale to match Figma's muted publication logo treatment */
  filter: grayscale(1);
  transition: filter 0.25s ease;
}

.cc-as-seen-in__logo:hover img {
  filter: grayscale(0);
}

/* Placeholder shown before real logos are uploaded to media library */
.cc-as-seen-in__placeholder {
  display: block;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #353535;
  white-space: nowrap;
  letter-spacing: -0.03em;
}

/* ── Marquee keyframe ────────────────────────────────────────── */
/*
   The track holds two identical sets back-to-back.
   Moving -50% = exactly one set-width → seamless infinite loop.
*/
@keyframes cc-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Stop animation and wrap logos for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cc-as-seen-in__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 24px;
  }

  .cc-as-seen-in__set {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
  }

  .cc-as-seen-in__set--dupe {
    display: none;
  }
}

/* ── Responsive: tablet ──────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Tighten global section gap on tablet */
  .cc-page {
    gap: 60px;
  }

  .cc-as-seen-in__inner {
    gap: 32px;
  }

  .cc-as-seen-in__fade {
    width: 100px;
  }

  .cc-as-seen-in__set {
    gap: 48px;
  }
}

/* ── Responsive: mobile ──────────────────────────────────────── */
@media (max-width: 767px) {
  /* Figma mobile container uses gap: 56px */
  .cc-page {
    gap: 56px;
  }

  .cc-as-seen-in__inner {
    gap: 24px;
  }

  .cc-as-seen-in__heading {
    font-size: 24px;
  }

  .cc-as-seen-in__fade {
    width: 60px;
  }

  /* Slow the marquee down on narrow screens — applied to the track element */
  .cc-as-seen-in__track {
    animation-duration: 20s;
  }

  .cc-as-seen-in__set {
    gap: 24px;
    padding: 0 12px;
  }

  .cc-as-seen-in__logo img {
    max-height: 28px;
  }

  .cc-as-seen-in__placeholder {
    font-size: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 3: RECENT COSTLY LAWSUITS
   ═══════════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────────────── */
.cc-lawsuits {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── Header block ────────────────────────────────────────────── */
.cc-lawsuits__header {
  padding-left: 128px;
  padding-right: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cc-lawsuits__heading {
  text-align: center;
  color: #111111;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 48px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0;
}

.cc-lawsuits__subtext {
  max-width: 672px;
  text-align: center;
  color: #353535;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

/* ── Cards auto-scrolling marquee track ──────────────────────────────── */
.cc-lawsuits__track-wrap {
  position: relative;
  overflow: hidden;
  padding-top: 16px;
  padding-bottom: 16px;
}

.cc-lawsuits__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  z-index: 2;
  pointer-events: none;
}

.cc-lawsuits__fade--left {
  left: 0;
  background: linear-gradient(
    to right,
    #f6f5f3 0%,
    rgba(246, 245, 243, 0) 100%
  );
}

.cc-lawsuits__fade--right {
  right: 0;
  background: linear-gradient(to left, #f6f5f3 0%, rgba(246, 245, 243, 0) 100%);
}

.cc-lawsuits__track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  animation: cc-lawsuits-marquee 160s linear infinite;
  will-change: transform;
  -webkit-animation: cc-lawsuits-marquee 160s linear infinite;
}

.cc-lawsuits__track-wrap:hover .cc-lawsuits__track,
.cc-lawsuits__track-wrap:focus-within .cc-lawsuits__track {
  animation-play-state: paused;
}

.cc-lawsuits__set {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

@keyframes cc-lawsuits-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ── Individual card ─────────────────────────────────────────── */
.cc-lawsuit-card {
  flex-shrink: 0;
  /* Figma: content width 327px + 16px padding × 2 = 359px */
  width: 359px;
  padding: 16px;
  background: #ffffff;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  /* Figma: align-items center so logo + divider sit centred */
  align-items: center;
  gap: 24px;
  /* All cards in the track stretch to the same height */
  align-self: stretch;
}

/* Logo container sitting at the top of each card */
.cc-lawsuit-card__logo-wrap {
  width: 220px;
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Logo image inside the wrap */
.cc-lawsuit-card__logo-img {
  max-width: 180px;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Figma: width 323px, height 0, outline 0.5px #003163 */
.cc-lawsuit-card__divider {
  border: none;
  border-top: 0.5px solid #003163;
  margin: 0;
  width: 323px;
}

.cc-lawsuit-card__divider--grey {
  border-top-color: #8e8e93;
}

/* Body text block — align-self stretch so it fills the 327px inner width */
.cc-lawsuit-card__body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-lawsuit-card__title {
  color: #111111;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 24px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.3;
}

.cc-lawsuit-card__desc {
  color: #353535;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}

.cc-lawsuit-card__date {
  color: #353535;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

/* ── Responsive: tablet ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .cc-lawsuits__header {
    padding-left: 40px;
    padding-right: 40px;
  }

  .cc-lawsuit-card {
    width: 300px;
  }

  /* Tighten logo padding on tablet */
  .cc-lawsuit-card__logo-wrap {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  /* Shrink divider to fit narrower card: 300 - 32 = 268px inner */
  .cc-lawsuit-card__divider {
    width: 268px;
  }
}

/* ── Responsive: mobile ──────────────────────────────────────── */
@media (max-width: 767px) {
  .cc-lawsuits {
    gap: 24px;
  }

  .cc-lawsuits__header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cc-lawsuits__heading {
    font-size: 36px;
  }

  .cc-lawsuits__subtext {
    font-size: 16px;
    max-width: 100%;
  }

  .cc-lawsuits__track {
    gap: 16px;
  }

  .cc-lawsuits__fade--left,
  .cc-lawsuits__fade--right {
    display: none;
  }

  .cc-lawsuits__set {
    gap: 16px;
  }

  /* Figma mobile card: 294px wide */
  .cc-lawsuit-card {
    width: 294px;
  }

  /* Compact logo padding on mobile */
  .cc-lawsuit-card__logo-wrap {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 180px;
  }

  .cc-lawsuit-card__logo-img {
    max-width: 150px;
    max-height: 44px;
  }

  /* Divider: 294 - 32 = 262px inner width */
  .cc-lawsuit-card__divider {
    width: 262px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   SECTION 4 — INDUSTRIES WE COVER
   Desktop : 2-column CSS Grid, auto-flow:column (col1: Food/Fashion/Beauty,
             col2: Sports/Media/News), inner width 1184px
   Tablet  : Same grid, full-width with 64px gutters
   Mobile  : Horizontal JS carousel, vertical cards (image top, text bottom)
───────────────────────────────────────────────────────────────────── */
.cc-industries {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.cc-industries__heading {
  width: 624px;
  text-align: center;
  color: #111111;
  font-size: 48px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0;
}

/* Transparent wrapper — becomes overflow:hidden clip on mobile */
.cc-industries__scroll-wrap {
  width: 1184px;
}

/* 2-column grid — auto-flow:column fills col1 (Food/Fashion/Beauty)
   then col2 (Sports/Media/News), matching the Figma left/right columns */
.cc-industries__track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 16px;
}

/* ── card base ── */
.cc-industry-card {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 16px;
}

/* Image block — flush to left edge, full card height */
.cc-industry-card__img-wrap {
  flex-shrink: 0;
  align-self: stretch; /* fills the full card height */
  width: 220px;
  position: relative;
  overflow: hidden;
  background: #cccccc;
}

.cc-industry-card__img {
  width: 220px;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Beauty card — portrait (155×220) rotated 90° to landscape (220×155) ── */
.cc-industry-card--beauty .cc-industry-card__img-wrap {
  width: 220px;
  min-height: 155px; /* fallback floor */
  overflow: hidden;
  position: relative;
}

.cc-industry-card--beauty .cc-industry-card__img {
  width: 155px;
  height: 220px;
  transform: rotate(90deg);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

/* Text area — needs min padding so card never collapses to zero height */
.cc-industry-card__text {
  padding-top: 24px;
  padding-bottom: 24px;
  min-height: 155px; /* floor height when text is short */
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.cc-industry-card__title {
  color: #070707;
  font-size: 24px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.2;
}

.cc-industry-card__desc {
  width: 258px;
  color: #535353;
  font-size: 16px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}

/* Dots — hidden on desktop */
.cc-industries__dots {
  display: none;
}

/* ── tablet ≤ 1280px ── */
@media (max-width: 1280px) {
  .cc-industries__scroll-wrap {
    width: 100%;
    padding: 0 64px;
    box-sizing: border-box;
  }
}

/* ── tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  .cc-industries__heading {
    width: 100%;
    padding: 0 64px;
    box-sizing: border-box;
    font-size: 40px;
  }

  .cc-industry-card__img-wrap {
    width: 180px;
  }

  .cc-industry-card__img {
    width: 180px;
    height: 100%;
  }

  .cc-industry-card--beauty .cc-industry-card__img-wrap {
    width: 180px;
  }

  .cc-industry-card--beauty .cc-industry-card__img {
    width: 128px;
    height: 180px;
  }

  .cc-industry-card__desc {
    width: auto;
  }
}

/* ── mobile ≤ 767px ── */
@media (max-width: 767px) {
  .cc-industries {
    align-items: flex-start;
    gap: 40px;
    width: 100%;
  }

  .cc-industries__heading {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 36px;
    text-align: center;
  }

  .cc-industries__scroll-wrap {
    width: 100%;
    padding: 0;
    overflow: hidden;
  }

  /* Carousel track — shifted by JS via transform */
  .cc-industries__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 0 16px;
    /* width: auto — content-driven, cards drive the width */
    width: auto;
    will-change: transform;
    transition: transform 0.35s ease;
    transform: translateX(0);
  }

  /* Each card — full viewport width minus side padding */
  .cc-industry-card {
    flex-shrink: 0;
    width: calc(100vw - 32px);
    flex-direction: column;
    align-items: stretch;
    padding-right: 0;
    gap: 0;
    border-radius: 24px;
  }

  /* Image top — full card width, 254px tall */
  .cc-industry-card__img-wrap {
    width: 100%;
    height: 254px;
    align-self: stretch;
  }

  .cc-industry-card__img {
    width: 100%;
    height: 254px;
    object-fit: cover;
  }

  /* Beauty card — portrait rotated to fill the 254px slot */
  .cc-industry-card--beauty .cc-industry-card__img-wrap {
    width: 100%;
    height: 254px;
    overflow: hidden;
    position: relative;
  }

  .cc-industry-card--beauty .cc-industry-card__img {
    width: 254px;
    height: calc(100vw - 32px);
    transform: rotate(90deg);
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
  }

  /* Text bottom */
  .cc-industry-card__text {
    align-self: stretch;
    padding: 16px 16px 24px;
    gap: 8px;
  }

  .cc-industry-card__title {
    text-align: center;
    width: 100%;
  }

  .cc-industry-card__desc {
    width: 100%;
    text-align: center;
  }

  /* Pagination dots — visible on mobile */
  .cc-industries__dots {
    display: flex;
    align-self: center;
    align-items: center;
    gap: 4px;
  }

  .cc-industries__dot--left,
  .cc-industries__dot--right {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f2f2f2;
  }

  .cc-industries__dot--active {
    display: block;
    width: 40px;
    height: 12px;
    background: #111111;
    border-radius: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   SECTION 5 — SERVICES (Profile Protection + Influencer Check)
   Desktop : white card, two services stacked, 2-col body layout
   Mobile  : single column, stacked image → text → list → CTA
───────────────────────────────────────────────────────────────────── */

/* The entire section IS the white card */
.cc-services {
  max-width: 1184px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Pink glow blobs from Figma are positioned at left:2125px in the source —
   far outside the 1324px card — hidden by overflow:hidden. No CSS needed. */

/* Each service block */
.cc-services__step {
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative;
  z-index: 1;
}

/* Divider between the two steps */
.cc-services__step + .cc-services__step {
  padding-top: 48px;
}

/* Full-width row: ━━━━━(1) or (2)━━━━━ */
.cc-services__badge-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: 64px; /* badge height — row never collapses */
}

/* The growing line */
.cc-services__badge-line {
  flex: 1 1 0;
  height: 1px;
  background: #353535;
  display: block;
}

/* Circle badge */
.cc-services__step-badge {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  outline: 0.5px solid #353535;
  outline-offset: -0.5px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #353535;
  line-height: 1;
}

/* ── Content block (screenshot + body) ── */
.cc-services__content {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Screenshot strip */
.cc-services__screenshot-wrap {
  width: 100%;
  height: 288px;
  border-radius: 24px;
  overflow: hidden;
  background: #111111;
}

.cc-services__screenshot {
  width: 100%;
  height: 288px;
  object-fit: cover;
  display: block;
}

/* Two-column body row (left: text, right: services list) */
.cc-services__body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* Left column: title + description */
.cc-services__info {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cc-services__title {
  color: #111111;
  font-size: 48px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0;
}

.cc-services__desc {
  color: #353535;
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

.cc-services__desc p {
  margin: 0;
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  color: #353535;
}

.cc-services__desc strong {
  font-weight: 600;
}

/* Right column: services list */
.cc-services__list-wrap {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cc-services__list-heading {
  color: #070707;
  font-size: 24px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
}

.cc-services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Two-column service list (Influencer Check) */
.cc-services__list--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 0;
}

.cc-services__list-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 0;
  color: #353535;
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  line-height: 1.4;
}

/* Bullet dot */
.cc-services__list-item::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #353535;
  margin-top: 6px;
}

.cc-services__list-item em {
  font-style: italic;
}

/* CTA button row */
.cc-services__cta {
  display: flex;
  justify-content: center;
}

/* ── cc-btn--blue arrow (white, same as cc-btn--dark) ── */
.cc-btn--blue .cc-btn__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  .cc-services {
    padding: 48px 40px;
  }

  .cc-services__title {
    font-size: 40px;
  }

  .cc-services__desc {
    font-size: 18px;
  }

  .cc-services__list-item {
    font-size: 18px;
  }
}

/* ── mobile ≤ 767px ── */
@media (max-width: 767px) {
  .cc-services {
    padding: 24px 16px;
    gap: 32px;
    border-radius: 24px;
  }

  .cc-services__step {
    gap: 24px;
  }

  .cc-services__step + .cc-services__step {
    padding-top: 32px;
  }

  .cc-services__content {
    gap: 24px;
  }

  /* Stack body vertically on mobile */
  .cc-services__body {
    flex-direction: column;
    gap: 24px;
  }

  .cc-services__title {
    font-size: 36px;
  }

  .cc-services__desc {
    font-size: 16px;
  }

  .cc-services__list-item {
    font-size: 16px;
    padding: 8px 0;
  }

  /* Single column on mobile for both lists */
  .cc-services__list--two-col {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SECTION 6: TESTIMONIAL + STAT CARDS                                        */
/* ─────────────────────────────────────────────────────────────────────────── */

.cc-testi {
  width: 1184px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 24px;
  min-height: 384px;
}

.cc-testi__quote-card {
  flex: 1 1 0;
  padding: 24px;
  background: #ffffff;
  border-radius: 24px;
  outline: 1px #d6d6d6 solid;
  outline-offset: -1px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.cc-testi__avatar-wrap {
  flex-shrink: 0;
  align-self: center;
}

.cc-testi__avatar {
  width: 128px;
  height: 128px;
  border-radius: 85px;
  object-fit: cover;
  display: block;
}

.cc-testi__text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cc-testi__quote {
  color: #535353;
  font-size: 24px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

.cc-testi__quote strong {
  font-weight: 600;
}

.cc-testi__quote p {
  color: #535353;
  font-size: 24px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

.cc-testi__author {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cc-testi__name {
  color: #535353;
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
}

.cc-testi__role {
  color: #535353;
  font-size: 16px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.cc-testi__disclaimer {
  color: #535353;
  font-size: 16px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
}

.cc-testi__stat-col {
  flex-shrink: 0;
  width: 290px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;
}

.cc-testi__stat {
  flex: 1 1 0;
  padding: 24px;
  border-radius: 24px;
  outline: 1px #d6d6d6 solid;
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.cc-testi__stat--dark {
  background: #424242;
}

.cc-testi__stat--light {
  background: #dddddd;
}

.cc-testi__stat-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.cc-testi__stat-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.cc-testi__stat-value {
  font-size: 64px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  line-height: 1;
  flex: 1 1 0;
}

.cc-testi__stat--dark .cc-testi__stat-value {
  color: #ffffff;
}

.cc-testi__stat--light .cc-testi__stat-value {
  color: #353535;
}

.cc-testi__stat-label {
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

.cc-testi__stat--dark .cc-testi__stat-label {
  color: #ffffff;
}

.cc-testi__stat--light .cc-testi__stat-label {
  color: #353535;
}

/* Tablet */
@media (max-width: 1280px) {
  .cc-testi {
    width: 100%;
    padding: 0 64px;
    box-sizing: border-box;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .cc-testi {
    padding: 0 40px;
  }

  .cc-testi__stat-value {
    font-size: 48px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cc-testi {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    flex-direction: column;
    min-height: auto;
  }

  .cc-testi__quote-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .cc-testi__stat-col {
    width: 100%;
    flex-direction: row;
  }

  .cc-testi__stat {
    flex: 1 1 0;
    padding: 16px;
  }

  .cc-testi__stat-value {
    font-size: 40px;
  }

  .cc-testi__stat-label {
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SECTION 7: STATS                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */

.cc-stats {
  padding: 0 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cc-stats__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 16px;
  border-radius: 24px;
  width: 100%;
}

.cc-stats__heading {
  color: #111111;
  font-size: 48px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
  text-transform: capitalize;
}

.cc-stats__subtitle {
  color: #353535;
  font-size: 32px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
  max-width: 739px;
}

.cc-stats__subtitle strong {
  font-weight: 600;
}

.cc-stats__subtitle p {
  color: #353535;
  font-size: 32px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
  max-width: 739px;
}

.cc-stats__body {
  width: 100%;
  max-width: 968px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.cc-stats__cards {
  width: 443px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;
}

.cc-stats__card {
  flex: 1 1 0;
  padding: 24px;
  border-radius: 24px;
  outline: 1px #d6d6d6 solid;
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

.cc-stats__card--dark {
  background: #111111;
}

.cc-stats__card--light {
  background: #ffffff;
}

.cc-stats__card-value {
  font-size: 40px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
}

.cc-stats__card--dark .cc-stats__card-value {
  color: #ffffff;
}

.cc-stats__card--light .cc-stats__card-value {
  color: #353535;
}

.cc-stats__card-text {
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

.cc-stats__card--dark .cc-stats__card-text {
  color: #ffffff;
}

.cc-stats__card--light .cc-stats__card-text {
  color: #353535;
}

.cc-stats__visual {
  flex: 1 1 0;
  height: 480px;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  gap: 12px;
  position: relative;
}

/* Fade masks — top and bottom */
.cc-stats__visual::before,
.cc-stats__visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 2;
  pointer-events: none;
}

.cc-stats__visual::before {
  top: 0;
  background: linear-gradient(180deg, #ffffff 0%, transparent 100%);
}

.cc-stats__visual::after {
  bottom: 0;
  background: linear-gradient(0deg, #ffffff 0%, transparent 100%);
}

.cc-stats__vis-col {
  flex: 1 1 0;
  overflow: hidden;
}

.cc-stats__vis-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px; /* matches gap — ensures translateY(-50%) loops seamlessly */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.cc-stats__vis-col--a .cc-stats__vis-inner {
  animation-name: cc-stats-vis-up;
  animation-duration: 44s;
}

.cc-stats__vis-col--b .cc-stats__vis-inner {
  animation-name: cc-stats-vis-down;
  animation-duration: 22s;
}

@keyframes cc-stats-vis-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes cc-stats-vis-down {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

.cc-stats__vis-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Tablet */
@media (max-width: 1024px) {
  .cc-stats {
    padding: 0 40px;
  }

  .cc-stats__heading {
    font-size: 40px;
  }

  .cc-stats__subtitle {
    font-size: 24px;
  }

  .cc-stats__body {
    gap: 32px;
  }

  .cc-stats__cards {
    width: 360px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cc-stats {
    padding: 0 16px;
  }

  .cc-stats__heading {
    font-size: 36px;
  }

  .cc-stats__subtitle {
    font-size: 20px;
  }

  .cc-stats__body {
    flex-direction: column;
    gap: 24px;
  }

  /* Image appears first on mobile */
  .cc-stats__visual {
    order: -1;
    flex: none;
    width: 100%;
    height: 260px;
  }

  .cc-stats__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .cc-stats__cards {
    width: 100%;
    align-self: auto;
  }

  /* Let cards size to their content — no flex stretching, no clipping */
  .cc-stats__card {
    flex: none;
    overflow: visible;
  }

  .cc-stats__card-value {
    font-size: 28px;
  }

  .cc-stats__card-text {
    font-size: 17px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SECTION 8: DISCOVER YOUR RISK CTA                                          */
/* ─────────────────────────────────────────────────────────────────────────── */

.cc-cta-risk {
  display: flex;
  justify-content: center;
  padding: 0;
}

.cc-cta-risk__inner {
  width: 100%;
  max-width: 1168px;
  margin: 0 auto;
  padding: 72px 48px;
  background: #ffffff;
  border-radius: 24px;
  outline: 1px #d6d6d6 solid;
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  position: relative;
  overflow: hidden;
}

.cc-cta-risk__inner::before {
  content: "";
  position: absolute;
  width: 495px;
  height: 376px;
  left: 237px;
  top: 306px;
  background: rgba(255, 178, 201, 0.35);
  filter: blur(125px);
  transform: rotate(-44deg);
  pointer-events: none;
  border-radius: 50%;
}

.cc-cta-risk__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cc-cta-risk__trustpilot {
  display: block;
  width: 168px;
  height: 47px;
  object-fit: contain;
}

.cc-cta-risk__heading {
  font-size: 48px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  color: #111111;
  text-align: center;
  text-transform: capitalize;
  margin: 0;
}

.cc-cta-risk__sub {
  font-size: 32px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  text-align: center;
  margin: 0;
  line-height: 32px;
  text-transform: capitalize;
}

.cc-cta-risk__sub-light {
  color: #111111;
  font-weight: 300;
}

.cc-cta-risk__sub-italic {
  color: #111111;
  font-weight: 600;
  font-style: italic;
}

/* Tablet */
@media (max-width: 1024px) {
  .cc-cta-risk__inner {
    padding: 56px 40px;
    max-width: calc(100% - 80px);
  }

  .cc-cta-risk__heading {
    font-size: 40px;
  }

  .cc-cta-risk__sub {
    font-size: 24px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cc-cta-risk__inner {
    padding: 48px 24px;
    max-width: calc(100% - 32px);
    gap: 24px;
  }

  .cc-cta-risk__heading {
    font-size: 30px;
  }

  .cc-cta-risk__sub {
    font-size: 20px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SECTION 9: CASE STUDIES                                                    */
/* ─────────────────────────────────────────────────────────────────────────── */

.cc-cases {
  padding: 0 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.cc-cases__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.cc-cases__heading {
  color: #111111;
  font-size: 48px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0;
  max-width: 596px;
  text-align: center;
}

.cc-cases__subheading {
  color: #353535;
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
  text-align: center;
}

.cc-cases__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cc-cases__nav-btn {
  width: 48px;
  height: 48px;
  padding: 8px;
  border-radius: 1000px;
  outline: 1px #111111 solid;
  outline-offset: -1px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  color: #111111;
}

.cc-cases__nav-btn:hover {
  background: #111111;
  color: #ffffff;
}

.cc-cases__nav-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.cc-cases__track-wrap {
  width: 100%;
  overflow: hidden;
  padding: 16px;
  box-sizing: border-box;
}

.cc-cases__track {
  display: flex;
  gap: 24px;
}

/* ── Card ── */
.cc-cases__card {
  flex: 1 1 0;
  height: 521px;
  position: relative;
  background: #f6f5f3;
  overflow: hidden;
  border-radius: 24px;
}

/* Background image fills the card */
.cc-cases__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Frosted glass overlay — anchored to bottom, grows upward on hover */
.cc-cases__card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 24px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Always-visible bar: tag pill + "See more" + arrow */
.cc-cases__card-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.cc-cases__tag {
  height: 36px;
  padding: 0 16px;
  border-radius: 1000px;
  font-size: 16px;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 500;
  color: #111111;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cc-cases__tag--fashion {
  background: #efae97;
}

.cc-cases__tag--health {
  background: #aad3fa;
}

.cc-cases__see-more {
  flex: 1 1 0;
  text-align: right;
  font-size: 16px;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 400;
  color: #111111;
  text-decoration: none;
}

.cc-cases__arrow-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 8px;
  border-radius: 1000px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111111;
  transition:
    background 0.25s,
    color 0.25s;
}

.cc-cases__arrow-btn--outline {
  outline: 1px #111111 solid;
  outline-offset: -1px;
}

.cc-cases__card:hover .cc-cases__arrow-btn--outline {
  background: #111111;
  color: #ffffff;
}

/* Detail section — collapsed by default, expands on hover */
.cc-cases__card-detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s ease;
}

.cc-cases__card:hover .cc-cases__card-detail {
  max-height: 400px;
}

/* Brand logo on dark background */
.cc-cases__card-logo {
  border-radius: 8px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
}

.cc-cases__card-logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

.cc-cases__desc {
  color: #353535;
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
  max-width: 397px;
}

.cc-cases__stats-row {
  display: flex;
  gap: 16px;
}

.cc-cases__stat-pill {
  flex: 1 1 0;
  padding: 8px;
  background: #111111;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cc-cases__pill-value {
  color: #ffffff;
  font-size: 32px;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 500;
  line-height: 1;
}

.cc-cases__pill-label {
  color: #ffffff;
  font-size: 16px;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 500;
  line-height: 1;
}

.cc-cases__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.cc-cases__dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: #f2f2f2;
}

.cc-cases__dot--active {
  width: 40px;
  background: #111111;
  border-radius: 12px;
}

/* Tablet */
@media (max-width: 1024px) {
  .cc-cases {
    padding: 0 40px;
  }

  .cc-cases__heading {
    font-size: 40px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cc-cases {
    padding: 0 16px;
    gap: 24px;
  }

  .cc-cases__heading {
    font-size: 36px;
  }

  .cc-cases__header {
    align-items: center;
  }

  .cc-cases__track {
    flex-direction: column;
  }

  .cc-cases__card {
    flex: none;
    width: 100%;
    height: 420px;
  }

  .cc-cases__nav {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SECTION 10: SOCIAL MEDIA PLATFORMS                                         */
/* ─────────────────────────────────────────────────────────────────────────── */

.cc-platforms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cc-platforms__wave {
  display: block;
  width: 360px;
  max-width: 100%;
  height: 120px;
  flex-shrink: 0;
}

.cc-platforms__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 128px;
  width: 100%;
  box-sizing: border-box;
}

.cc-platforms__heading {
  color: #111111;
  font-size: 48px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
  max-width: 648px;
}

.cc-platforms__sub {
  color: #353535;
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

.cc-platforms__icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.cc-platforms__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  .cc-platforms__content {
    padding: 0 40px;
  }

  .cc-platforms__heading {
    font-size: 36px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cc-platforms__content {
    padding: 0 16px;
  }

  .cc-platforms__heading {
    font-size: 28px;
  }

  .cc-platforms__icons {
    gap: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SECTION 11: HOW WE REMOVE YOUR RISK (PROCESS)                              */
/* ─────────────────────────────────────────────────────────────────────────── */

.cc-process {
  padding: 72px 128px;
  background: #f6f5f3;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.cc-process__header {
  max-width: 700px;
}

.cc-process__heading {
  color: #111111;
  font-size: 48px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0;
}

/* ── Card grid ── */

.cc-process__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cc-process__card {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 8px rgba(0, 0, 0, 0.05),
    0 4px 24px rgba(0, 0, 0, 0.04);
}

.cc-process__card-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f0ede8;
}

.cc-process__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cc-process__card-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
}

.cc-process__card-num {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 500px;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 22px;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 400;
}

.cc-process__card-title {
  font-family: "Neue Montreal", sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #111111;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.2;
}

.cc-process__card-title em {
  font-style: italic;
  font-weight: 400;
}

.cc-process__card-desc {
  font-family: "Neue Montreal", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: #353535;
  margin: 0;
}

.cc-process__card-desc p {
  font-family: "Neue Montreal", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: #353535;
  margin: 0;
}

.cc-process__card-desc strong {
  font-weight: 500;
  color: #111111;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
  .cc-process {
    padding: 56px 40px;
    gap: 48px;
  }

  .cc-process__heading {
    font-size: 36px;
  }

  .cc-process__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .cc-process__card-title {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .cc-process {
    padding: 48px 16px;
  }

  .cc-process__heading {
    font-size: 28px;
  }

  .cc-process__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cc-process__card-body {
    padding: 24px;
  }

  .cc-process__card-title {
    font-size: 22px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SECTION 12: FAQ                                                             */
/* ─────────────────────────────────────────────────────────────────────────── */

.cc-faq {
  padding: 0 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}

.cc-faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.cc-faq__heading {
  color: #353535;
  font-size: 48px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0;
}

.cc-faq__sub {
  color: #353535;
  font-size: 20px;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 400;
  margin: 0;
  line-height: 26px;
}

.cc-faq__list {
  width: 100%;
  max-width: 965px;
  display: flex;
  flex-direction: column;
}

.cc-faq__item {
  border-top: 1px solid #353535;
}

.cc-faq__item:last-of-type {
  border-bottom: 1px solid #353535;
}

.cc-faq__item summary::-webkit-details-marker,
.cc-faq__item summary::marker {
  display: none;
  content: "";
}

.cc-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  cursor: pointer;
  list-style: none;
  color: #111111;
  font-size: 24px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
}

.cc-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-faq__icon::before,
.cc-faq__icon::after {
  content: "";
  position: absolute;
  background: #353535;
  border-radius: 2px;
  transition: transform 0.2s;
}

.cc-faq__icon::before {
  width: 12px;
  height: 12px;
  background: #353535;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(180deg);
}

.cc-faq__icon::after {
  display: none;
}

.cc-faq__item[open] .cc-faq__icon--open::before,
.cc-faq__item[open] .cc-faq__icon::before {
  transform: rotate(45deg) scale(1.1);
  clip-path: none;
  width: 13px;
  height: 13px;
  background: #353535;
}

.cc-faq__answer {
  padding: 0 16px 48px;
  color: #353535;
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
}

.cc-faq__answer p {
  margin: 0;
}

/* Button variant: outline dark */
.cc-btn--outline-dark {
  background: none;
  outline: 1px #111111 solid;
  outline-offset: -1px;
  color: #111111;
  border-radius: 12px;
  padding: 0 24px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.cc-btn--outline-dark:hover {
  background: #111111;
  color: #ffffff;
}

/* Tablet */
@media (max-width: 1024px) {
  .cc-faq {
    padding: 0 40px;
  }

  .cc-faq__heading {
    font-size: 36px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cc-faq {
    padding: 0 16px;
    gap: 48px;
  }

  .cc-faq__heading {
    font-size: 28px;
  }

  .cc-faq__question {
    font-size: 18px;
    padding: 20px 0;
  }

  .cc-faq__answer {
    font-size: 16px;
    padding: 0 0 24px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SECTION 13: WHAT OUR CUSTOMERS SAY (REVIEW WALL)                           */
/* ─────────────────────────────────────────────────────────────────────────── */

.cc-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  padding: 0 128px;
}

.cc-reviews__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.cc-reviews__heading {
  color: #111111;
  font-size: 48px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0;
}

.cc-reviews__sub {
  color: #353535;
  font-size: 20px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
}

.cc-reviews__wall {
  display: flex;
  gap: 24px;
  height: 600px;
  overflow: hidden;
  width: 100%;
  max-width: 1184px;
  margin: 0 auto;
  position: relative;
}

/* Fade masks top and bottom */
.cc-reviews__wall::before,
.cc-reviews__wall::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 2;
  pointer-events: none;
}

.cc-reviews__wall::before {
  top: 0;
  background: linear-gradient(180deg, #f6f5f3 0%, transparent 100%);
}

.cc-reviews__wall::after {
  bottom: 0;
  background: linear-gradient(0deg, #f6f5f3 0%, transparent 100%);
}

.cc-reviews__col {
  flex: 1 1 0;
  overflow: hidden;
}

.cc-reviews__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.cc-reviews__col--a .cc-reviews__inner {
  animation-name: cc-reviews-up;
  animation-duration: 60s;
}

.cc-reviews__col--b .cc-reviews__inner {
  animation-name: cc-reviews-down;
  animation-duration: 60s;
}

.cc-reviews__col--b {
}

.cc-reviews__wall:hover .cc-reviews__inner {
  animation-play-state: paused;
}

@keyframes cc-reviews-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes cc-reviews-down {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

.cc-reviews__col--a .cc-reviews__inner,
.cc-reviews__col--b .cc-reviews__inner {
  /* Double the content by visual stacking — CSS animation loops work by repeating cards */
}

.cc-reviews__card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  outline: 2px #f6f5f3 solid;
  outline-offset: -2px;
}

.cc-reviews__card-header {
  display: flex;
  align-items: center;
  gap: 19px;
}

.cc-reviews__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-reviews__avatar--img img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 500px;
  display: block;
}

.cc-reviews__avatar--initials {
  background: #353535;
  color: #ffffff;
  font-size: 24px;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 600;
}

.cc-reviews__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
}

.cc-reviews__reviewer-name {
  color: #111111;
  font-size: 24px;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 500;
  line-height: 24px;
}

.cc-reviews__reviewer-role {
  color: #353535;
  font-size: 20px;
  font-family: "Neue Montreal", sans-serif;
  font-weight: 400;
  line-height: 20px;
}

.cc-reviews__text {
  color: #353535;
  font-size: 16px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}

/* Tablet */
@media (max-width: 1024px) {
  .cc-reviews {
    padding: 0 40px;
  }

  .cc-reviews__heading {
    font-size: 36px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cc-reviews {
    padding: 0 16px;
    gap: 48px;
  }

  .cc-reviews__heading {
    font-size: 28px;
  }

  .cc-reviews__wall {
    height: 500px;
  }

  .cc-reviews__col--b {
    display: none;
  }

  .cc-reviews__col {
    flex: 1 1 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SECTION 14: SAMPLE REPORT CTA (FINAL)                                      */
/* ─────────────────────────────────────────────────────────────────────────── */

.cc-sample {
  padding: 0 128px;
  display: flex;
  justify-content: center;
}

.cc-sample__link {
  display: block;
  width: 100%;
  max-width: 968px;
  border-radius: 24px;
  overflow: hidden;
  line-height: 0; /* removes inline gap below img */
}

.cc-sample__link:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
}

.cc-sample__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.cc-sample__img--mobile {
  display: none;
}

/* Tablet */
@media (max-width: 1024px) {
  .cc-sample {
    padding: 0 40px;
  }

  .cc-sample__link {
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cc-sample {
    padding: 0 16px;
  }

  .cc-sample__img--desktop {
    display: none;
  }

  .cc-sample__img--mobile {
    display: block;
    border-radius: 16px;
  }
}

/* ==========================================================================
   Hide UICore default footer — replaced by vault-child/footer.php
   ========================================================================== */
#wrapper-footer {
  display: none !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Screen-reader-only heading */
.cc-footer__sr-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cc-footer {
  background: #111;
  color: #a5a5a5;
  font-family: "Neue Montreal", "Neue Haas Grotesk", system-ui, sans-serif;
}

/* Inner grid: three columns on desktop
   brand  | services | company
   brand  | demo     | demo
*/
.cc-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "brand services company"
    "brand demo     .";
  gap: 48px;
  padding: 72px 128px 24px;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: start;
}

.cc-footer__brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Logo */
.cc-footer__logo-link {
  display: inline-block;
  line-height: 0;
}

.cc-footer__logo {
  display: block;
  width: auto;
  height: 34px;
}

.cc-footer__logo-text {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

/* Tagline */
.cc-footer__tagline {
  color: #a5a5a5;
  font-size: 16px;
  line-height: 1.5;
  max-width: 307px;
  margin: 0;
}

/* Offices */
.cc-footer__offices-heading {
  color: var(--Main-White, #fff);
  font-family: "Neue Montreal";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0 0 16px;
}

.cc-footer__offices-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-footer__office {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #a5a5a5;
  font-family: "Neue Montreal";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.cc-footer__pin {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Contact email */
.cc-footer__contact {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cc-footer__contact-icon {
  flex-shrink: 0;
}

.cc-footer__email-link {
  color: #a5a5a5;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
}

.cc-footer__email-link:hover {
  color: #fff;
}

/* Nav columns */
.cc-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cc-footer__nav-col--services {
  grid-area: services;
}

.cc-footer__nav-col--company {
  grid-area: company;
}

.cc-footer__nav-heading {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  font-family: "Neue Montreal", "Neue Haas Grotesk", system-ui, sans-serif;
  line-height: 1.2;
  margin: 0;
}

.cc-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-footer__nav-link {
  color: #a5a5a5;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  line-height: 1.2;
  transition: color 0.15s ease;
}

.cc-footer__nav-link:hover {
  color: #fff;
}

/* Watch Demo card */
.cc-footer__demo {
  grid-area: demo;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-footer__demo-thumb {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #3a3835;
  flex-shrink: 0;
  text-decoration: none;
}

.cc-footer__demo-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.cc-footer__demo-thumb:hover .cc-footer__demo-thumb-img {
  transform: scale(1.03);
}

.cc-footer__demo-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.cc-footer__demo-thumb:hover .cc-footer__demo-play {
  opacity: 0.8;
}

.cc-footer__demo-cta {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  font-family: "Neue Montreal", "Neue Haas Grotesk", system-ui, sans-serif;
  line-height: 1.2;
  text-decoration: none;
}

.cc-footer__demo-cta:hover {
  color: #ccc;
}

/* Demo video modal */
.cc-demo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-demo-modal[hidden] {
  display: none;
}

.cc-demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.cc-demo-modal__box {
  position: relative;
  z-index: 1;
  width: min(90vw, 960px);
}

.cc-demo-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  line-height: 0;
  opacity: 0.8;
  transition: opacity 0.15s;
}

.cc-demo-modal__close:hover {
  opacity: 1;
}

.cc-demo-modal__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.cc-demo-modal__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.cc-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 128px;
  border-top: 0.25px solid #353535;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.cc-footer__copy {
  color: #353535;
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
}

.cc-footer__legal {
  display: flex;
  gap: 24px;
}

.cc-footer__legal-link {
  color: #353535;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s ease;
}

.cc-footer__legal-link:hover {
  color: #a5a5a5;
}

/* ── Footer tablet/mobile (≤1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  /* Single column on mobile */
  .cc-footer__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "brand"
      "services"
      "company"
      "demo";
    padding: 48px 16px 24px;
    gap: 48px;
  }

  .cc-footer__tagline {
    max-width: 100%;
  }

  .cc-footer__demo-cta {
    font-size: 20px;
  }

  /* Bottom bar stacks on mobile */
  .cc-footer__bar {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 16px;
    text-align: center;
  }

  .cc-footer__copy {
    text-align: center;
  }
}

/* ==========================================================================
   About Page (ca-) components
   ========================================================================== */

/* ── Hero ── */

.ca-hero {
  padding: 208px 64px 64px; /* matches homepage floating-nav offset */
  position: relative;
  overflow: hidden;
}

.ca-hero__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.ca-hero__title {
  font-family: "Bethany Elingston", Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  text-align: center;
  color: #111;
  text-transform: capitalize;
  line-height: 1.1;
  max-width: 552px;
  margin: 0;
}

.ca-hero__subtitle {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #111;
  max-width: 552px;
  line-height: 1.4;
  margin: 0;
}

.ca-hero__subtitle strong {
  font-weight: 600;
}

/* Hero photo cluster */

.ca-hero__cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

.ca-hero__cluster-glow {
  position: absolute;
  width: 856px;
  height: 390px;
  left: 50%;
  top: 0;
  transform: translateX(-50%) rotate(-14deg);
  transform-origin: top left;
  background: rgba(255, 178, 201, 0.35);
  filter: blur(125px);
  pointer-events: none;
}

.ca-hero__photo {
  width: 150px;
  height: 150px;
  border-radius: 24px;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* ── Content Panel ── */

.ca-panel {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0px -0.5px 14px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  position: relative;
  max-width: 1330px;
  width: calc(100% - 116px);
  margin: 0 auto;
  box-sizing: border-box;
}

.ca-panel__glow {
  position: absolute;
  width: 683px;
  height: 519px;
  right: -200px;
  top: 200px;
  transform: rotate(161deg);
  background: rgba(255, 178, 201, 0.35);
  filter: blur(125px);
  pointer-events: none;
}

.ca-panel__inner {
  max-width: 1184px;
  margin: 0 auto;
  padding: 72px 32px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/* Split two-column layout */

.ca-split {
  display: flex;
  align-items: center;
  gap: 56px;
}

.ca-split--reverse {
  flex-direction: row-reverse;
}

.ca-split__image {
  flex: 1;
  min-height: 500px;
  background: #111;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
  align-self: stretch;
}

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

.ca-split__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ca-split__title {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  line-height: 1.15;
  margin: 0;
}

.ca-split__body {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #111;
  line-height: 1.5;
  margin: 0;
}

/* Numbered list */

.ca-numlist {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* suppress native marker */
.ca-numlist__item summary::-webkit-details-marker,
.ca-numlist__item summary::marker {
  display: none;
  content: "";
}

.ca-numlist__item {
  border-bottom: 1px solid #353535;
}

.ca-numlist__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 16px 0;
  cursor: pointer;
  list-style: none;
}

.ca-numlist__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #353535;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #353535;
  flex-shrink: 0;
}

.ca-numlist__label {
  flex: 1;
  font-size: 24px;
  font-weight: 400;
  color: #111;
}

/* +/× toggle icon */
.ca-numlist__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  margin-left: auto;
}

.ca-numlist__icon::before,
.ca-numlist__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: #353535;
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.ca-numlist__icon::before {
  width: 2px;
  height: 14px;
}

.ca-numlist__icon::after {
  width: 14px;
  height: 2px;
}

/* open state: vertical bar rotates to form × */
.ca-numlist__item[open] .ca-numlist__icon::before {
  transform: rotate(45deg);
}

.ca-numlist__item[open] .ca-numlist__icon::after {
  transform: rotate(45deg);
}

/* body text */
.ca-numlist__body {
  padding: 0 16px 20px 52px;
  color: #353535;
  font-size: 16px;
  font-family: "Neue Montreal", "Neue Haas Grotesk", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

.ca-numlist__body p {
  margin: 0;
}

/* Panel CTA */

.ca-panel__cta {
  display: flex;
  justify-content: center;
}

/* ── Mission ── */

.ca-mission {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
}

.ca-mission__text {
  max-width: 918px;
  text-align: center;
  font-size: 40px;
  font-weight: 400;
  color: #111;
  line-height: 1.3;
  margin: 0;
}

.ca-mission__accent {
  color: #85c3ff;
  font-style: italic;
  font-weight: 400;
}

.ca-mission__normal {
  font-style: normal;
  color: #111;
}

/* ── Meet the Founder ── */

.ca-founder {
  padding: 0 128px;
  box-sizing: border-box;
}

.ca-founder__inner {
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ca-founder__heading {
  font-size: 48px;
  font-weight: 400;
  color: #111;
  text-align: center;
  text-transform: capitalize;
  margin: 0;
}

.ca-founder__card {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.ca-founder__photo-wrap {
  width: 328px;
  flex-shrink: 0;
  background: #9dd8fd;
  border-radius: 24px;
  overflow: hidden;
}

.ca-founder__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Desktop: column layout — quote top, meta bottom */

.ca-founder__bio {
  flex: 1;
  background: #fff;
  border-radius: 24px;
  outline: 1px solid #d6d6d6;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.ca-founder__quote {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #353535;
  line-height: 1.5;
  margin: 0;
}

.ca-founder__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.ca-founder__identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ca-founder__name {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #111;
  text-transform: capitalize;
  margin: 0;
}

.ca-founder__role {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #353535;
  margin: 0;
}

.ca-founder__linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.ca-founder__linkedin:hover {
  opacity: 0.75;
}

/* ── Sample Report CTA Card ── */

.ca-sample-card {
  display: flex;
  justify-content: center;
  padding: 0 128px;
  box-sizing: border-box;
}

.ca-sample-card__inner {
  max-width: 968px;
  width: 100%;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
  outline: 0.5px solid #d6d6d6;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ca-sample-card__glow {
  position: absolute;
  width: 567px;
  height: 431px;
  left: 82px;
  top: 230px;
  transform: rotate(-45deg);
  background: rgba(255, 178, 201, 0.35);
  filter: blur(125px);
  pointer-events: none;
}

.ca-sample-card__title {
  font-size: 36px;
  font-weight: 600;
  color: #111;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
  margin: 0;
}

.ca-sample-card__title em {
  font-style: italic;
  font-weight: 400;
}

.ca-sample-card__body {
  font-size: 20px;
  font-weight: 400;
  color: #353535;
  max-width: 640px;
  position: relative;
  z-index: 1;
  margin: 0;
}

/* ── About Page CTA (Section 5) ── */

.ca-cta {
  padding: 0 128px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.ca-cta__link {
  display: block;
  width: 100%;
  max-width: 968px;
  border-radius: 24px;
  overflow: hidden;
  line-height: 0;
}

.ca-cta__link:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
}

.ca-cta__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.ca-cta__img--mobile {
  display: none;
}

/* desktop image is always visible unless overridden by mobile breakpoint */
.ca-cta__img--desktop {
  display: block;
}

/* ==========================================================================
   About Page — Responsive (≤1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .ca-hero {
    padding: 56px 16px 40px;
    overflow: hidden;
  }

  .ca-hero__title {
    font-size: 36px;
  }

  .ca-hero__subtitle {
    font-size: 16px;
  }

  /* Mobile cluster: simple centered flex row */

  .ca-hero__cluster {
    width: 100%;
    height: auto;
    left: auto;
    transform: none;
  }

  .ca-hero__photo {
    width: 87px;
    height: 87px;
    border-radius: 14px;
  }

  .ca-panel {
    width: calc(100% - 32px);
    border-radius: 16px;
  }

  .ca-panel__inner {
    padding: 48px 24px;
    gap: 48px;
  }

  .ca-split,
  .ca-split--reverse {
    flex-direction: column;
  }

  .ca-split__image {
    width: 100%;
    min-height: 1px;
    height: 288px;
    align-self: auto;
    order: -1;
  }

  .ca-split__text {
    order: 0;
    padding: 0;
  }

  .ca-split__title {
    font-size: 36px;
  }

  .ca-split__body {
    font-size: 16px;
  }

  .ca-numlist__label {
    font-size: 18px;
  }

  .ca-panel__cta {
    padding: 0 16px;
  }

  .ca-mission {
    padding: 0 16px;
  }

  .ca-mission__text {
    font-size: 30px;
  }

  .ca-founder {
    padding: 0 16px;
  }

  .ca-founder__heading {
    font-size: 32px;
  }

  .ca-founder__card {
    flex-direction: column;
  }

  .ca-founder__photo-wrap {
    width: 100%;
    height: 302px;
  }

  /* Mobile: column — quote top, meta bottom */

  .ca-founder__bio {
    flex-direction: column;
    justify-content: flex-start;
    padding: 24px;
    gap: 24px;
  }

  .ca-founder__quote {
    font-size: 18px;
  }

  .ca-sample-card {
    padding: 0 16px;
  }

  .ca-sample-card__inner {
    padding: 48px 16px;
  }

  .ca-sample-card__body {
    font-size: 16px;
  }

  .ca-cta {
    padding: 0 16px;
  }

  .ca-cta__link {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .ca-cta__img--desktop {
    display: none;
  }

  .ca-cta__img--mobile {
    display: block;
    border-radius: 16px;
  }
}

/* ─────────────────────────────────────────────────
   SERVICES PAGE  (cs-*)
───────────────────────────────────────────────── */

/* ── Section 1: Hero ── */

.cs-hero {
  padding: 208px 128px 64px; /* top clears the floating nav */
  position: relative;
  overflow: hidden;
}

.cs-hero__inner {
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.cs-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 690px;
  text-align: center;
}

.cs-hero__title {
  font-family: "Bethany Elingston", Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0;
}

.cs-hero__subtitle {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #111;
  max-width: 552px;
  line-height: 1.4;
  margin: 0;
}

.cs-hero__subtitle strong {
  font-weight: 600;
}

/* Three-panel image row */

.cs-hero__cluster {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}

.cs-hero__slot {
  flex: 1 1 0;
  height: 316px;
  border-radius: 24px;
  overflow: hidden;
}

.cs-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Services hero: tablet ── */
@media (max-width: 1024px) {
  .cs-hero {
    padding: 56px 32px 48px;
  }

  .cs-hero__title {
    font-size: 44px;
  }

  .cs-hero__subtitle {
    font-size: 20px;
  }

  .cs-hero__slot {
    height: 240px;
  }
}

/* ── Section 2: Service Cards ── */

.cs-cards {
  padding: 0 128px;
}

.cs-cards__inner {
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.cs-cards__heading {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: #111;
  text-align: center;
  text-transform: capitalize;
  max-width: 690px;
  margin: 0;
  line-height: 1.15;
}

.cs-cards__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.cs-card {
  width: 378px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cs-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.cs-card__title {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #111;
  text-align: center;
  text-transform: capitalize;
  margin: 0;
}

.cs-card__badge {
  display: inline-block;
  padding: 6px 12px;
  background: #f6f5f3;
  border-radius: 6px;
  outline: 0.25px solid #ababab;
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ff004c;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cs-card__whats-included {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #353535;
  text-decoration: underline;
}

.cs-card__whats-included:hover {
  color: #111;
}

.cs-card__image-wrap {
  width: 262px;
  height: 262px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cs-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cs-card__footer {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Service cards — tablet */
@media (max-width: 1100px) {
  .cs-cards {
    padding: 0 32px;
  }

  .cs-cards__row {
    flex-wrap: wrap;
  }

  .cs-card {
    width: calc(50% - 12px);
  }

  .cs-cards__heading {
    font-size: 40px;
  }
}

/* Service cards — mobile */
@media (max-width: 767px) {
  .cs-cards {
    padding: 0 16px;
  }

  .cs-card {
    width: 100%;
  }

  .cs-cards__heading {
    font-size: 32px;
  }
}

/* ── Section 4: Service Detail Panels ── */

.cs-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 0 128px;
  box-sizing: border-box;
}

.cs-detail {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0px -0.5px 14px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.cs-detail__inner {
  padding: 72px 72px;
  display: flex;
  align-items: center;
  gap: 56px;
}

/* image always on left unless --img-right */
.cs-detail--img-right .cs-detail__inner {
  flex-direction: row-reverse;
}

.cs-detail__image-wrap {
  flex: 1 1 0;
  min-width: 0;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.cs-detail__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cs-detail__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.cs-detail__badge {
  display: inline-block;
  padding: 6px 12px;
  background: #f6f5f3;
  border-radius: 6px;
  outline: 0.25px solid #ababab;
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ff004c;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cs-detail__title {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.1;
}

.cs-detail__text {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #111;
  line-height: 1.5;
  margin: 0;
}

.cs-detail__text p {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #111;
  line-height: 1.5;
  margin: 0;
}

.cs-detail__text strong {
  font-weight: 700;
}

.cs-detail__time {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #111;
  text-transform: capitalize;
  margin: 0;
}

/* Detail panels — tablet */
@media (max-width: 1024px) {
  .cs-details {
    padding: 0 16px;
  }

  .cs-detail__inner {
    padding: 48px 40px;
    gap: 40px;
  }

  .cs-detail__image-wrap {
    height: 360px;
  }

  .cs-detail__title {
    font-size: 36px;
  }

  .cs-detail__text {
    font-size: 18px;
  }
}

/* Detail panels — mobile */
@media (max-width: 767px) {
  .cs-detail__inner,
  .cs-detail--img-right .cs-detail__inner {
    flex-direction: column;
    padding: 32px 24px;
    gap: 32px;
  }

  .cs-detail__image-wrap {
    width: 100%;
    height: 260px;
    flex-shrink: 0;
  }

  .cs-detail__title {
    font-size: 32px;
  }

  .cs-detail__text {
    font-size: 16px;
  }

  .cs-detail__time {
    font-size: 18px;
  }
}

/* ── Services hero: mobile ─ images stack and fan ── */
@media (max-width: 767px) {
  .cs-hero {
    padding: 56px 16px 40px;
  }

  .cs-hero__title {
    font-size: 36px;
  }

  .cs-hero__subtitle {
    font-size: 18px;
  }

  .cs-hero__cluster {
    display: block;
    position: relative;
  }

  .cs-hero__slot {
    display: block;
    width: 100%;
    height: 240px;
    border-radius: 20px;
    position: relative;
  }

  /* image 1: bottom half covered by image 2 */
  .cs-hero__slot--1 {
    z-index: 1;
  }

  /* image 2: pulls up 120px (half of image 1), covers bottom of image 1 */
  .cs-hero__slot--2 {
    margin-top: -120px;
    z-index: 2;
  }

  /* image 3: pulls up 120px (half of image 2), fully visible on top */
  .cs-hero__slot--3 {
    margin-top: -120px;
    z-index: 3;
  }
}

/* ─────────────────────────────────────────────────
   CASE STUDY PAGE  (cst-*)
───────────────────────────────────────────────── */

/* ── Section 1: Hero ── */

.cst-hero {
  padding: 208px 128px 64px; /* top clears the floating nav */
  position: relative;
  overflow: hidden;
}

.cst-hero__inner {
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* Text block: heading + logo + badges */
.cst-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 690px;
  text-align: center;
}

.cst-hero__title {
  font-family: "Bethany Elingston", Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  line-height: 1.15;
  margin: 0;
}

.cst-hero__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cst-hero__logo {
  display: block;
  max-width: 190px;
  height: auto;
}

.cst-hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.cst-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  background: #f6f5f3;
  border-radius: 6px;
  outline: 0.25px solid #ababab;
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #ff004c;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Image gallery */
.cst-hero__gallery-wrap {
  width: 100%;
}

.cst-hero__gallery {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}

.cst-hero__slide {
  flex: 1 1 0;
  min-width: 0;
  height: 464px;
  border-radius: 24px;
  overflow: hidden;
}

.cst-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ── Case study hero: tablet ── */
@media (max-width: 1024px) {
  .cst-hero {
    padding: 56px 32px 48px;
  }

  .cst-hero__title {
    font-size: 42px;
  }

  .cst-hero__slide {
    height: 340px;
  }
}

/* ── Case study hero: mobile — horizontal scroll gallery ── */
@media (max-width: 767px) {
  .cst-hero {
    padding: 56px 0 40px; /* 0 sides so gallery bleeds edge-to-edge */
  }

  .cst-hero__inner {
    gap: 36px;
  }

  /* constrain text block to viewport with side padding */
  .cst-hero__text {
    padding: 0 24px;
    max-width: 100%;
  }

  .cst-hero__title {
    font-size: 34px;
  }

  .cst-hero__badges {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .cst-hero__badge {
    font-size: 13px;
    padding: 5px 12px;
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }

  /* gallery becomes a horizontal scroll strip */
  .cst-hero__gallery-wrap {
    width: 100%;
    overflow: hidden;
  }

  .cst-hero__gallery {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    gap: 12px;
    padding: 0 24px 16px; /* side padding so first/last card peek */
    /* no flex-wrap — stays single row */
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
  }

  .cst-hero__gallery::-webkit-scrollbar {
    display: none;
  }

  .cst-hero__slide {
    flex: 0 0 80vw; /* each card ~80% of viewport width */
    max-width: 320px;
    height: 360px;
    scroll-snap-align: start;
    border-radius: 20px;
  }
}

/* ── Section 2: Stats ── */

.cst-stats {
  padding: 0 128px;
}

.cst-stats__inner {
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}

.cst-stats__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cst-stats__top {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}

.cst-stats__icon {
  display: block;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  object-fit: contain;
}

.cst-stats__number {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #111;
  text-transform: capitalize;
  line-height: 1;
  display: flex;
  align-items: center;
}

.cst-stats__label {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #353535;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
}

/* Stats: tablet */
@media (max-width: 1024px) {
  .cst-stats {
    padding: 0 32px;
  }

  .cst-stats__number {
    font-size: 40px;
  }

  .cst-stats__label {
    font-size: 20px;
  }
}

/* Stats: mobile */
@media (max-width: 767px) {
  .cst-stats {
    padding: 0 24px;
  }

  .cst-stats__inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .cst-stats__item {
    width: 100%;
  }

  .cst-stats__number {
    font-size: 40px;
  }

  .cst-stats__label {
    font-size: 18px;
  }
}

/* ── Section 3: Report Card ── */

.cst-report {
  padding: 0 80px;
}

.cst-report__inner {
  max-width: 1184px;
  margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 -0.5px 14px rgba(0, 0, 0, 0.12);
  padding: 72px 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  overflow: hidden;
}

.cst-report__row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 56px;
}

.cst-report__img-wrap {
  flex: 1 1 0;
  min-width: 0;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
}

.cst-report__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cst-report__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cst-report__title {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  line-height: 1.15;
  margin: 0;
}

.cst-report__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* suppress native marker */
.cst-report__list-item summary::-webkit-details-marker,
.cst-report__list-item summary::marker {
  display: none;
  content: "";
}

.cst-report__list-item {
  border-bottom: 1px solid #353535;
}

.cst-report__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}

.cst-report__item-label {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #111;
  line-height: 1;
}

/* +/× toggle icon */
.cst-report__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.cst-report__icon::before,
.cst-report__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: #353535;
  border-radius: 2px;
  transition: transform 0.25s ease;
}

.cst-report__icon::before {
  width: 2px;
  height: 14px;
}

.cst-report__icon::after {
  width: 14px;
  height: 2px;
}

.cst-report__list-item[open] .cst-report__icon::before {
  transform: rotate(45deg);
}

.cst-report__list-item[open] .cst-report__icon::after {
  transform: rotate(45deg);
}

/* body text */
.cst-report__body {
  padding: 0 0 20px 0;
  color: #353535;
  font-size: 16px;
  font-family: "Neue Montreal", "Neue Haas Grotesk", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

.cst-report__body p {
  margin: 0;
}

.cst-report__cta-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cst-report__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 220px;
  height: 48px;
  padding: 8px 16px;
  background: #003163;
  border-radius: 12px;
  color: #fff;
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.cst-report__cta:hover {
  background: #004280;
}

/* Report card: tablet */
@media (max-width: 1024px) {
  .cst-report {
    padding: 0 32px;
  }

  .cst-report__inner {
    padding: 56px 48px;
    gap: 56px;
  }

  .cst-report__row {
    gap: 32px;
  }

  .cst-report__img-wrap {
    height: 380px;
  }

  .cst-report__title {
    font-size: 36px;
  }

  .cst-report__item-label {
    font-size: 20px;
  }
}

/* Report card: mobile */
@media (max-width: 767px) {
  .cst-report {
    padding: 0 16px;
  }

  .cst-report__inner {
    padding: 40px 24px;
    gap: 48px;
    border-radius: 20px;
  }

  /* Both rows: column, image always on top */
  .cst-report__row {
    flex-direction: column;
    gap: 24px;
  }

  /* flip row: content is first in DOM, image is second;
     column-reverse puts image visually on top */
  .cst-report__row--flip {
    flex-direction: column-reverse;
  }

  .cst-report__img-wrap {
    width: 100%;
    height: 240px;
    flex: none;
    border-radius: 20px;
  }

  .cst-report__content {
    width: 100%;
    flex: none;
  }

  .cst-report__title {
    font-size: 26px;
  }

  .cst-report__item-label {
    font-size: 17px;
  }

  .cst-report__cta {
    width: 100%;
    max-width: 280px;
  }
}

/* ── Section 4: Result ── */

.cst-result {
  display: none;
  padding: 0 128px;
}

.cst-result__inner {
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.cst-result__heading {
  font-family: "Bethany Elingston", Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  line-height: 1.2;
  max-width: 690px;
  margin: 0;
}

.cst-result__body {
  font-family: "Bethany Elingston", Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.4;
  letter-spacing: 0.05em;
  margin: 0;
}

.cst-result__body--dark {
  color: #111;
}

.cst-result__body--muted {
  color: #b6b6b6;
}

/* Result: tablet */
@media (max-width: 1024px) {
  .cst-result {
    padding: 0 32px;
  }

  .cst-result__heading {
    font-size: 44px;
  }

  .cst-result__body {
    font-size: 36px;
  }
}

/* Result: mobile */
@media (max-width: 767px) {
  .cst-result {
    padding: 0 24px;
  }

  .cst-result__heading {
    font-size: 36px;
    max-width: 100%;
  }

  .cst-result__body {
    font-size: 26px;
    letter-spacing: 0.03em;
  }
}

/* ── Section 5: Testimonial ── */

.cst-quote {
  padding: 0 128px;
}

.cst-quote__inner {
  max-width: 1184px;
  margin: 0 auto;
}

.cst-quote__card {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 48px;
  background: #fff;
  border-radius: 24px;
}

/* Photo + floating badge */
.cst-quote__photo-wrap {
  position: relative;
  flex-shrink: 0;
  width: 240px; /* a little wider to let badge overflow naturally */
  height: 254px; /* taller than photo to accommodate badge below */
}

.cst-quote__photo {
  display: block;
  width: 220px;
  height: 220px;
  border-radius: 33px;
  object-fit: cover;
  object-position: center top;
}

.cst-quote__badge {
  position: absolute;
  left: 50%; /* roughly mid-photo horizontally */
  bottom: 0;
  background: #f6f5f3;
  border-radius: 24px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cst-quote__badge-logo {
  display: block;
  width: 122px;
  height: 35px;
  object-fit: contain;
}

/* Quote body */
.cst-quote__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cst-quote__text {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #111;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  border-left: none;
}

.cst-quote__author {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cst-quote__name {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #535353;
}

.cst-quote__role {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #535353;
}

/* Testimonial: tablet */
@media (max-width: 1024px) {
  .cst-quote {
    padding: 0 32px;
  }

  .cst-quote__card {
    gap: 32px;
    padding: 40px;
  }

  .cst-quote__text {
    font-size: 20px;
  }
}

/* Testimonial: mobile */
@media (max-width: 767px) {
  .cst-quote {
    padding: 0 16px;
  }

  .cst-quote__card {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 32px 24px;
    border-radius: 20px;
  }

  .cst-quote__photo-wrap {
    width: 220px;
    height: 254px;
  }

  .cst-quote__body {
    text-align: left;
  }

  .cst-quote__text {
    font-size: 18px;
  }

  .cst-quote__name {
    font-size: 18px;
  }

  .cst-quote__role {
    font-size: 14px;
  }
}

/* ─────────────────────────────────────────────────
   FAQ PAGE  (cfq-*)
───────────────────────────────────────────────── */

/* Push the FAQ section down so the floating nav doesn't overlap */
.cfq-faq {
  padding-top: 208px;
}

@media (max-width: 1024px) {
  .cfq-faq {
    padding-top: 56px;
  }
}

@media (max-width: 767px) {
  .cfq-faq {
    padding-top: 56px;
  }
}

/* ─────────────────────────────────────────────────
   PRICING PAGE  (cpr-*)
───────────────────────────────────────────────── */

/* ── Section 1: Hero ── */

.cpr-hero {
  padding: 208px 128px 0; /* top clears floating nav */
  position: relative;
  overflow: hidden;
}

/* Pink glow blob */
.cpr-hero__glow {
  position: absolute;
  width: 856px;
  height: 520px;
  top: 600px;
  left: 50%;
  transform: translateX(-20%) rotate(-27deg);
  transform-origin: top left;
  background: rgba(255, 178, 201, 0.12);
  filter: blur(125px);
  pointer-events: none;
  z-index: 0;
}

.cpr-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* Title + subtitle */
.cpr-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.cpr-hero__title {
  font-family: "Bethany Elingston", Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  line-height: 1.15;
  max-width: 690px;
  margin: 0;
}

.cpr-hero__subtitle {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #111;
  line-height: 1.5;
  max-width: 830px;
  margin: 0;
}

/* Hero image */
.cpr-hero__img-wrap {
  width: 100%;
  height: 464px;
  border-radius: 24px;
  overflow: hidden;
}

.cpr-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Platform icons row */
.cpr-hero__platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.cpr-hero__platform-icon {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Pricing hero: tablet ── */
@media (max-width: 1024px) {
  .cpr-hero {
    padding: 56px 32px 0;
  }

  .cpr-hero__title {
    font-size: 44px;
  }

  .cpr-hero__subtitle {
    font-size: 20px;
  }

  .cpr-hero__img-wrap {
    height: 360px;
  }
}

/* ── Pricing hero: mobile ── */
@media (max-width: 767px) {
  .cpr-hero {
    padding: 56px 16px 0;
  }

  .cpr-hero__title {
    font-size: 36px;
  }

  .cpr-hero__subtitle {
    font-size: 17px;
  }

  .cpr-hero__img-wrap {
    height: 240px;
    border-radius: 20px;
  }

  .cpr-hero__platforms {
    gap: 20px;
  }

  .cpr-hero__platform-icon {
    width: 36px;
    height: 36px;
  }
}

/* ── Section 2: Pricing Cards ── */

.cpr-plans {
  padding: 0 128px;
}

.cpr-plans__inner {
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.cpr-plans__heading {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  text-align: center;
  max-width: 872px;
  margin: 0;
  line-height: 1.2;
}

.cpr-plans__heading em {
  font-style: italic;
}

/* Cards row */
.cpr-plans__cards {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 24px;
}

/* Individual card */
.cpr-card {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Wide card gets more visual weight */
.cpr-card--wide {
  flex: 1.45 1 0;
}

.cpr-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Number badge + title */
.cpr-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cpr-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 37px;
  border-radius: 500px;
  border: 1px solid #353535;
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #353535;
  flex-shrink: 0;
}

.cpr-card__title {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #111;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.2;
}

/* Card image */
.cpr-card__img-wrap {
  position: relative;
  height: 166px;
  border-radius: 12px;
  overflow: hidden;
}

.cpr-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* "Top Price" overlay badge */
.cpr-card__badge {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: #f6f5f3;
  border-radius: 6px;
  outline: 0.25px solid #ababab;
  padding: 6px 12px;
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ff004c;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Price line */
.cpr-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  line-height: 1.2;
}

.cpr-card__price-amount {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
}

.cpr-card__price-note {
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #111;
}

/* Feature list */
.cpr-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cpr-card__features--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.cpr-card__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #111;
  line-height: 1.3;
}

/* SVG dot icon */
.cpr-card__feature::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.cpr-card__feature--on::before {
  background-image: url("images/dot-red.svg");
}

.cpr-card__feature--off::before {
  background-image: url("images/dot-blue.svg");
}

/* CTA button */
.cpr-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 8px 16px;
  background: #003163;
  border-radius: 12px;
  color: #fff;
  font-family:
    "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.cpr-card__cta:hover {
  background: #004280;
}

/* Pricing cards: tablet */
@media (max-width: 1024px) {
  .cpr-plans {
    padding: 0 32px;
  }

  .cpr-plans__heading {
    font-size: 36px;
  }

  .cpr-card--wide {
    flex: 1.2 1 0;
  }

  .cpr-card__price-amount {
    font-size: 36px;
  }

  .cpr-card__features--two-col {
    grid-template-columns: 1fr;
  }
}

/* Pricing cards: mobile — stack vertically */
@media (max-width: 767px) {
  .cpr-plans {
    padding: 0 16px;
  }

  .cpr-plans__heading {
    font-size: 28px;
  }

  .cpr-plans__cards {
    flex-direction: column;
  }

  .cpr-card,
  .cpr-card--wide {
    flex: none;
    width: 100%;
  }

  .cpr-card__price-amount {
    font-size: 36px;
  }

  .cpr-card__features--two-col {
    grid-template-columns: 1fr;
  }
}

/* ── Section 3: Violation callout ── */

.cpr-callout {
  padding: 0 128px;
}

.cpr-callout__inner {
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.cpr-callout__text {
  font-family: "Bethany Elingston", Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  text-align: center;
  max-width: 872px;
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .cpr-callout {
    padding: 0 32px;
  }

  .cpr-callout__text {
    font-size: 44px;
  }
}

@media (max-width: 767px) {
  .cpr-callout {
    padding: 0 24px;
  }

  .cpr-callout__text {
    font-size: 32px;
  }
}

/* ==========================================================================
   CONTACT PAGE  —  cco-*
   ========================================================================== */

/* ── Section 1: Contact ── */
.cco-contact {
  padding: 208px 128px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.cco-contact__title {
  font-family: "Bethany Elingston", Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  color: #353535;
  text-align: center;
  text-transform: capitalize;
  max-width: 826px;
  margin: 0;
  line-height: 1.2;
}

.cco-contact__body {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  width: 100%;
  max-width: 1184px;
}

/* Left column */
.cco-contact__left {
  flex: 1 1 0;
  max-width: 575px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cco-contact__heading {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #111;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.15;
}

.cco-contact__desc {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #353535;
  margin: 0;
  line-height: 1.6;
}

/* Info items */
.cco-contact__info {
  display: flex;
  flex-direction: column;
}

.cco-contact__info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
}

.cco-contact__info-icon {
  flex: 0 0 24px;
  margin-top: 4px;
}

.cco-contact__info-icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.cco-contact__info-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cco-contact__info-label {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #111;
  line-height: 1.2;
}

.cco-contact__info-link {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #111;
  text-decoration: underline;
}

.cco-contact__info-addr {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #111;
  line-height: 1.5;
}

/* Right column — form card */
.cco-contact__right {
  flex: 1 1 0;
  max-width: 592px;
  min-width: 0;
}

.cco-contact__form-card {
  background: #fff;
  border-radius: 24px;
  outline: 0.5px solid #d6d6d6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cco-contact__form-title {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #111;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.3;
}

/* ── CF7 overrides inside the form card ── */
.cco-contact__form-card .wpcf7 {
  width: 100%;
}

.cco-contact__form-card .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cco-contact__form-card .wpcf7-form label,
.cco-contact__form-card .wpcf7-form > p > .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.cco-contact__form-card .wpcf7-form p {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 8px;
}

.cco-contact__form-card .wpcf7-form .wpcf7-text,
.cco-contact__form-card .wpcf7-form .wpcf7-email,
.cco-contact__form-card .wpcf7-form .wpcf7-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 24px;
  border: 1px solid #747474;
  border-radius: 12px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #111;
  background: #fff;
  outline: none;
  appearance: none;
}

.cco-contact__form-card .wpcf7-form .wpcf7-text::placeholder,
.cco-contact__form-card .wpcf7-form .wpcf7-email::placeholder,
.cco-contact__form-card .wpcf7-form .wpcf7-textarea::placeholder {
  color: #8b8b8b;
}

.cco-contact__form-card .wpcf7-form .wpcf7-textarea {
  height: 131px;
  resize: vertical;
}

.cco-contact__form-card .wpcf7-form .wpcf7-submit {
  width: 100%;
  height: 48px;
  padding: 8px 16px;
  background: #111;
  border: none;
  border-radius: 12px;
  font-family: "Neue Montreal", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  margin-top: 8px;
}

.cco-contact__form-card .wpcf7-form .wpcf7-submit:hover {
  background: #333;
}

/* ── Section 2: Distributed team ── */
.cco-team {
  padding: 0 128px;
}

.cco-team__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cco-team__heading {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #353535;
  text-transform: capitalize;
  text-align: center;
  max-width: 826px;
  margin: 0;
  line-height: 1.2;
}

.cco-team__sub {
  font-family: "Neue Montreal", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #353535;
  text-align: center;
  margin: 0;
  line-height: 1.3;
}

/* Location pills */
.cco-team__locations {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.cco-team__location {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 38px;
  background: #f6f5f3;
  border-radius: 12px;
  outline: 1px solid #8b8b8b;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #111;
  white-space: nowrap;
}

.cco-team__location img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Map */
.cco-team__map {
  position: relative;
  width: 1010px;
  max-width: 100%;
}

.cco-team__map-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ── Responsive: large viewport ≤ 1439px ── */
@media (max-width: 1439px) {
  .cco-contact {
    padding: 160px 64px 0;
  }

  .cco-contact__body {
    gap: 48px;
  }
}

/* ── Responsive: tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  .cco-contact {
    padding: 56px 32px 0;
  }

  .cco-contact__body {
    gap: 40px;
  }

  .cco-contact__left {
    flex: 1;
    max-width: none;
  }

  .cco-contact__right {
    flex: 1;
    max-width: none;
  }

  .cco-contact__form-card {
    padding: 32px;
  }

  .cco-contact__heading {
    font-size: 36px;
  }

  .cco-team {
    padding: 0 32px;
  }

  .cco-team__heading {
    font-size: 36px;
  }

  .cco-team__map {
    width: 100%;
  }
}

/* ── Responsive: mobile ≤ 767px ── */
@media (max-width: 900px) {
  .cco-contact {
    padding: 56px 24px 0;
    gap: 32px;
  }

  .cco-contact__title {
    font-size: 40px;
  }

  .cco-contact__body {
    flex-direction: column;
    gap: 40px;
  }

  .cco-contact__left,
  .cco-contact__right {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .cco-contact__heading {
    font-size: 28px;
  }

  .cco-contact__info-label {
    font-size: 20px;
  }

  .cco-contact__form-card {
    padding: 24px;
  }

  .cco-contact__form-title {
    font-size: 20px;
  }

  .cco-team {
    padding: 0 24px;
  }

  .cco-team__heading {
    font-size: 28px;
  }

  .cco-team__sub {
    font-size: 16px;
  }

  .cco-team__location {
    font-size: 18px;
    padding: 12px 24px;
  }

  .cco-team__map {
    width: 100%;
  }
}

/* ==========================================================================
   BLOG INDEX  —  cblog-*
   ========================================================================== */

.cblog-page {
  padding-top: 0;
}

/* ── Section wrapper ── */
.cblog-index {
  padding: 208px 128px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* ── Page title ── */
.cblog-title {
  font-family: "Bethany Elingston", Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  color: #111;
  text-align: center;
  text-transform: capitalize;
  max-width: 690px;
  margin: 0;
  line-height: 1.2;
}

/* ── Category filter tabs ── */
.cblog-cats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}

.cblog-cats__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  min-width: 100px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #353535;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.cblog-cats__tab--active,
.cblog-cats__tab:hover {
  text-decoration: underline;
  color: #111;
}

/* ── Grid wrapper ── */
.cblog-grid-wrap {
  width: 100%;
  max-width: 1184px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── "Newest" header row ── */
.cblog-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cblog-grid-label {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #111;
  text-transform: capitalize;
  margin: 0;
}

.cblog-grid-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cblog-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  outline: 1px solid #111;
  color: #111;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
  flex-shrink: 0;
}

.cblog-nav-btn:hover {
  background: #111;
  color: #fff;
}

.cblog-nav-btn--disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ── 3-column card grid ── */
.cblog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* ── Individual card ── */
.cblog-card {
  background: #fff;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
  overflow: hidden;
}

/* Image area */
.cblog-card__img-link {
  display: block;
  text-decoration: none;
}

.cblog-card__img-wrap {
  position: relative;
  height: 241px;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: #f6f5f3;
}

.cblog-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.cblog-card__img--placeholder {
  background: linear-gradient(
    135deg,
    rgba(255, 178, 201, 0.35) 0%,
    #f6f5f3 100%
  );
}

/* Date badge overlaid bottom-right of image */
.cblog-card__img-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.cblog-card__date-badge {
  display: inline-block;
  padding: 6px 8px;
  background: #f6f5f3;
  border-radius: 8px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #8e8e93;
  line-height: 1;
}

/* Card body */
.cblog-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0 24px;
}

/* Meta row: date · category · read time */
.cblog-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.cblog-card__date {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #8e8e93;
}

.cblog-card__cat {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #ff004c;
  text-decoration: none;
}

.cblog-card__cat:hover {
  text-decoration: underline;
}

.cblog-card__read-time {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #8e8e93;
}

/* Card title */
.cblog-card__title {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #111;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.2;
}

.cblog-card__title a {
  color: inherit;
  text-decoration: none;
}

.cblog-card__title a:hover {
  text-decoration: underline;
}

/* Card excerpt */
.cblog-card__excerpt {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #353535;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read more link */
.cblog-card__read-more {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #353535;
  text-decoration: underline;
  align-self: flex-end;
}

.cblog-card__read-more:hover {
  color: #111;
}

/* ── Dot pagination ── */
.cblog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.cblog-pagination__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: #d9d9d9;
  text-decoration: none;
  transition:
    background 0.2s,
    width 0.2s;
  flex-shrink: 0;
}

.cblog-pagination__dot--active {
  width: 40px;
  background: #111;
  border-radius: 12px;
}

/* ── Empty state ── */
.cblog-empty {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 18px;
  color: #8e8e93;
  text-align: center;
  padding: 48px 0;
  margin: 0;
}

/* ── Responsive: tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  .cblog-index {
    padding: 56px 32px 0;
    gap: 32px;
  }

  .cblog-title {
    font-size: 44px;
  }

  .cblog-cats__tab {
    font-size: 17px;
    padding: 8px 12px;
  }

  .cblog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Responsive: mobile ≤ 767px ── */
@media (max-width: 767px) {
  .cblog-index {
    padding: 56px 24px 0;
    gap: 24px;
  }

  .cblog-title {
    font-size: 36px;
  }

  .cblog-cats {
    gap: 0;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 4px;
  }

  .cblog-cats__tab {
    font-size: 16px;
    flex-shrink: 0;
  }

  .cblog-grid {
    grid-template-columns: 1fr;
  }

  .cblog-card__title {
    font-size: 20px;
  }

  .cblog-grid-label {
    font-size: 20px;
  }
}

/* ==========================================================================
   TERMS OF SERVICE PAGE  —  ctos-*
   ========================================================================== */

.ctos-page {
  padding-top: 0;
}

.cc-terms {
  max-width: 1184px;
  margin: 0 auto;
  padding: 160px 128px 120px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.cc-terms__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-terms__heading {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 56px;
  font-weight: 500;
  color: #111111;
  margin: 0;
  line-height: 1.1;
}

/* Rich-text body — styles headings, paragraphs, lists */
.cc-terms__body {
  font-family: "Neue Montreal", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #353535;
  line-height: 1.75;
  max-width: 800px;
}

.cc-terms__body h2 {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #111111;
  margin: 48px 0 16px;
}

.cc-terms__body h3 {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #111111;
  margin: 32px 0 12px;
}

.cc-terms__body p {
  margin: 0 0 16px;
}

.cc-terms__body ul,
.cc-terms__body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.cc-terms__body li {
  margin-bottom: 8px;
}

.cc-terms__body a {
  color: #111111;
  text-decoration: underline;
}

.cc-terms__body a:hover {
  color: #555;
}

@media (max-width: 1024px) {
  .cc-terms {
    padding: 120px 48px 80px;
  }

  .cc-terms__heading {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .cc-terms {
    padding: 100px 24px 64px;
    gap: 32px;
  }

  .cc-terms__heading {
    font-size: 32px;
  }

  .cc-terms__body {
    font-size: 15px;
  }
}

/* ==========================================================================
   SINGLE POST  —  cpost-*
   ========================================================================== */

.cpost-page {
  padding-top: 0;
}

/* ── Hero ── */
.cpost-hero {
  padding: 208px 256px 0;
}

.cpost-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

/* Meta chip: date + separator dot + read time */
.cpost-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f6f5f3;
  border-radius: 8px;
  padding: 8px 16px;
}

.cpost-hero__chip-date,
.cpost-hero__chip-time {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #8e8e93;
}

.cpost-hero__chip-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8e8e93;
  flex-shrink: 0;
}

/* Post title */
.cpost-hero__title {
  font-family: "Bethany Elingston", serif;
  font-size: 56px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.1;
}

/* Featured image */
.cpost-hero__img-wrap {
  width: 100%;
  height: 466px;
  overflow: hidden;
  border-radius: 24px;
  background: #111;
}

.cpost-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Post body (prose content) ── */
.cpost-body {
  padding: 0 256px;
}

.cpost-body__inner {
  width: 100%;
}

.cpost-body__content {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #353535;
  line-height: 1.4;
}

/* Content block headings */
.cpost-body__content h2 {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #111;
  text-transform: capitalize;
  margin: 48px 0 16px;
  line-height: 1.1;
}

.cpost-body__content h3 {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #111;
  margin: 40px 0 16px;
  line-height: 1.2;
}

.cpost-body__content h4 {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #111;
  margin: 32px 0 12px;
}

.cpost-body__content p {
  margin: 0 0 16px;
}

.cpost-body__content ul,
.cpost-body__content ol {
  margin: 0 0 16px 1.5em;
  padding: 0;
}

.cpost-body__content li {
  margin-bottom: 8px;
}

/* Content images — full-width 466px blocks */
.cpost-body__content img,
.cpost-body__content figure.wp-block-image img,
.cpost-body__content figure img {
  display: block;
  width: 100%;
  height: 466px;
  object-fit: cover;
  border-radius: 24px;
  margin: 48px 0;
}

.cpost-body__content figure.wp-block-image,
.cpost-body__content figure {
  margin: 0;
}

.cpost-body__content blockquote {
  border-left: 4px solid #ff004c;
  margin: 32px 0;
  padding: 16px 24px;
  background: #f6f5f3;
  border-radius: 0 12px 12px 0;
  font-style: italic;
}

.cpost-body__content a {
  color: #ff004c;
  text-decoration: underline;
}

/* ── Recent posts section ── */
.cpost-recent {
  padding: 0 128px;
}

.cpost-recent__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cpost-recent__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.cpost-recent__heading {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #111;
  text-transform: capitalize;
  margin: 0;
  flex: 1;
}

.cpost-recent__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.cpost-recent__nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 1000px;
  border: none;
  outline: 1px solid #111;
  outline-offset: -1px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  padding: 0;
  transition:
    background 0.2s,
    color 0.2s;
}

.cpost-recent__nav-btn:not(:disabled):hover {
  background: #111;
  color: #fff;
}

.cpost-recent__nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* 3-column grid — reuses .cblog-card */
.cpost-recent__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Pagination dots */
.cpost-recent__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.cpost-recent__dot {
  width: 12px;
  height: 12px;
  background: #d9d9d9;
  border-radius: 9999px;
  flex-shrink: 0;
}

.cpost-recent__dot--active {
  width: 40px;
  background: #111;
  border-radius: 12px;
}

/* ── Responsive: tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  .cpost-hero {
    padding: 140px 40px 0;
  }

  .cpost-hero__title {
    font-size: 42px;
  }

  .cpost-hero__img-wrap {
    height: 360px;
  }

  .cpost-body {
    padding: 0 40px;
  }

  .cpost-body__content h2 {
    font-size: 36px;
  }

  .cpost-body__content h3 {
    font-size: 26px;
  }

  .cpost-body__content img,
  .cpost-body__content figure.wp-block-image img,
  .cpost-body__content figure img {
    height: 360px;
  }

  .cpost-recent {
    padding: 0 40px;
  }

  .cpost-recent__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Responsive: mobile ≤ 767px ── */
@media (max-width: 767px) {
  .cpost-hero {
    padding: 120px 24px 0;
  }

  .cpost-hero__inner {
    gap: 16px;
  }

  .cpost-hero__title {
    font-size: 32px;
  }

  .cpost-hero__img-wrap {
    height: 240px;
  }

  .cpost-body {
    padding: 0 24px;
  }

  .cpost-body__content h2 {
    font-size: 26px;
    margin: 32px 0 12px;
  }

  .cpost-body__content h3 {
    font-size: 22px;
  }

  .cpost-body__content img,
  .cpost-body__content figure.wp-block-image img,
  .cpost-body__content figure img {
    height: 220px;
    margin: 32px 0;
  }

  .cpost-recent {
    padding: 0 24px;
  }

  .cpost-recent__grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   BOOK A CALL  —  cbac-*
   ========================================================================== */

.cbac-page {
  padding-top: 0;
}

/* ── Hero ── */
.cbac-hero {
  position: relative;
  padding: 208px 128px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  overflow: hidden;
}

/* Pink glow blob */
.cbac-hero__glow {
  position: absolute;
  width: 856px;
  height: 391px;
  background: rgba(255, 178, 201, 0.35);
  filter: blur(125px);
  border-radius: 50%;
  transform: rotate(-14deg);
  top: 40%;
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
  z-index: 0;
}

/* Hero text block */
.cbac-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 766px;
  text-align: center;
}

.cbac-hero__title {
  font-family: "Bethany Elingston", serif;
  font-size: 56px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.1;
}

.cbac-hero__sub {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.4;
}

/* Calendly inline widget wrapper */
.cbac-calendly {
  position: relative;
  z-index: 1;
  width: 100%;
}

.cbac-calendly .calendly-inline-widget {
  min-width: 320px;
  height: 720px;
  border: none;
}

/* ── Responsive: tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  .cbac-hero {
    padding: 56px 40px 0;
    gap: 40px;
  }

  .cbac-hero__title {
    font-size: 42px;
  }

  .cbac-hero__sub {
    font-size: 20px;
  }

  .cbac-calendly .calendly-inline-widget {
    height: 900px;
  }
}

/* ── Responsive: mobile ≤ 767px ── */
@media (max-width: 767px) {
  .cbac-hero {
    padding: 56px 24px 0;
    gap: 32px;
  }

  .cbac-hero__title {
    font-size: 32px;
  }

  .cbac-hero__sub {
    font-size: 18px;
  }

  .cbac-calendly .calendly-inline-widget {
    height: 1100px;
  }
}

/* ─────────────────────────────────────────────────
   SECTION 14: SAMPLE REPORT CTA  (cc-sample)
───────────────────────────────────────────────── */

.cc-sample {
  position: relative;
  width: 100%;
  max-width: 968px;
  margin: 0 auto;
  background-image: url("images/reportcta.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

.cc-sample__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 80px 0;
  text-align: center;
  box-sizing: border-box;
}

.cc-sample__arrow {
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
  width: 123.656px;
  height: 100px;
  pointer-events: none;
}

/* Arrow: 930px – 1440px */
@media (min-width: 930px) and (max-width: 1440px) {
  .cc-sample__arrow {
    right: 300px;
    top: 55%;
  }
}

/* Arrow: 768px – 930px */
@media (min-width: 768px) and (max-width: 930px) {
  .cc-sample__arrow {
    right: 215px;
    top: 57%;
  }
}

/* Arrow: 425px and below */
@media (max-width: 425px) {
  .cc-sample__arrow {
    right: 20px;
    top: 57%;
  }
}

/* Arrow: 375px – 424px */
@media (min-width: 375px) and (max-width: 424px) {
  .cc-sample__arrow {
    right: 10px;
    top: 57%;
  }
}

/* Arrow: 320px – 374px */
@media (min-width: 320px) and (max-width: 374px) {
  .cc-sample__arrow {
    right: -12px;
    top: 63%;
  }
}

.cc-sample__title {
  margin: 0;
  font-size: 36px;
  line-height: 1.2;
  color: #111;
}

.cc-sample__title-regular {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: capitalize;
}

.cc-sample__title-italic {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 400;
  font-style: italic;
  text-transform: capitalize;
}

.cc-sample__body {
  margin: 0;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #353535;
  line-height: 1.5;
}

.cc-sample__report-img {
  display: block;
  width: 168px;
  height: 47px;
  object-fit: contain;
}

.cc-sample__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 345px;
  height: 48px;
  padding: 8px 16px;
  background: #111;
  border-radius: 12px;
  font-family: "Neue Montreal", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  transition: background 0.2s;
  box-sizing: border-box;
}

.cc-sample__btn:hover {
  background: #333;
  color: #fff;
}

@media (max-width: 767px) {
  .cc-sample {
    border-radius: 16px;
    background-image: url("images/reportcta.png");
  }

  .cc-sample__arrow {
    /* positioning handled by dedicated arrow breakpoints above */
  }

  .cc-sample__title {
    font-size: 28px;
  }

  .cc-sample__body {
    font-size: 17px;
  }

  .cc-sample__btn {
    width: 100%;
  }
}

/* ── Remove UICore/Elementor grid line overlay ── */
#uicore-page::before {
  content: none !important;
  background-image: none !important;
}

/* =============================================================================
   HERO — PAGE LOAD ANIMATIONS
   Staggered entrance on first paint, no JS required.
============================================================================= */
@keyframes cc-hero-load {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cc-hero__headline {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.cc-hero__subtext {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
.cc-hero__ctas {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.cc-hero__trust {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}
.cc-hero__screenshot-wrap {
  animation: cc-hero-load 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

@media (prefers-reduced-motion: reduce) {
  .cc-hero__headline,
  .cc-hero__subtext,
  .cc-hero__ctas,
  .cc-hero__trust,
  .cc-hero__screenshot-wrap {
    animation: none;
  }
}

/* =============================================================================
   SCROLL REVEAL — utility classes driven by IntersectionObserver in main.js
============================================================================= */

/* Base hidden state */
.cc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Directional variants */
.cc-reveal--left {
  transform: translateX(-32px);
}
.cc-reveal--right {
  transform: translateX(32px);
}

/* Visible (triggered by JS) */
.cc-reveal--visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
.cc-reveal--d1 {
  transition-delay: 0.08s;
}
.cc-reveal--d2 {
  transition-delay: 0.16s;
}
.cc-reveal--d3 {
  transition-delay: 0.24s;
}
.cc-reveal--d4 {
  transition-delay: 0.32s;
}
.cc-reveal--d5 {
  transition-delay: 0.4s;
}
.cc-reveal--d6 {
  transition-delay: 0.48s;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .cc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================================================
   INNER PAGE HERO LOAD ANIMATIONS
   Reuses the cc-hero-load keyframe defined above — fires on page paint,
   no JS required. Keeps above-fold content flash-free.
============================================================================= */

/* ── About page ── */
.ca-hero__title {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.ca-hero__subtitle {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
.ca-hero__cluster {
  animation: cc-hero-load 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

/* ── Book a Call page ── */
.cbac-hero__title {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.cbac-hero__sub {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
.cbac-calendly {
  animation: cc-hero-load 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ── Case Study page ── */
.cst-hero__text {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.cst-hero__gallery-wrap {
  animation: cc-hero-load 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

/* ── Contact page ── */
.cco-contact__title {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.cco-contact__left {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
.cco-contact__right {
  animation: cc-hero-load 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

/* ── FAQ standalone page — header only (list may extend below fold) ── */
.cfq-page .cc-faq__header {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

/* ── Terms of Service page ── */
.ctos-page .cc-terms__header {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

/* ── Pricing page ── */
.cpr-hero__text {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.cpr-hero__img-wrap {
  animation: cc-hero-load 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.cpr-hero__platforms {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ── Services page ── */
.cs-hero__text {
  animation: cc-hero-load 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.cs-hero__cluster {
  animation: cc-hero-load 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

@media (prefers-reduced-motion: reduce) {
  .ca-hero__title,
  .ca-hero__subtitle,
  .ca-hero__cluster,
  .cbac-hero__title,
  .cbac-hero__sub,
  .cbac-calendly,
  .cst-hero__text,
  .cst-hero__gallery-wrap,
  .cco-contact__title,
  .cco-contact__left,
  .cco-contact__right,
  .cfq-page .cc-faq__header,
  .ctos-page .cc-terms__header,
  .cpr-hero__text,
  .cpr-hero__img-wrap,
  .cpr-hero__platforms,
  .cs-hero__text,
  .cs-hero__cluster {
    animation: none;
  }
}