/* ==========================================================================
   Companion Consultancy — design tokens + the few helpers Elementor free
   cannot do natively. Everything else is built with stock Elementor widgets.
   ========================================================================== */
:root {
  --cc-magenta: #d20060;
  --cc-magenta-deep: #b80054;
  --cc-magenta-tonal: #dc3b77;
  --cc-hero-from: #7c0d3c;
  --cc-hero-mid: #b21259;
  --cc-hero-to: #bd1362;
  --cc-teal: #69b5b6;
  --cc-teal-deep: #58a3a4;
  --cc-teal-bg: #eff8f8;
  --cc-pink: #e8709a;
  --cc-pink-soft: #f8d9e3;
  --cc-lilac: #e5acd3;
  --cc-lilac-soft: #f7e8f2;
  --cc-teal-soft: #e2eff0;
  --cc-accent: #dc3b77;
  --cc-ink: #44464b;
  --cc-ink-soft: #5f6168;
  --cc-heading: #3f4046;
  --cc-muted: #7a7c82;
}

/* --- Centred section heading with the pink underline accent --------------- */
.cc-heading .elementor-heading-title { position: relative; }
.cc-heading .elementor-heading-title::after {
  content: '';
  display: block;
  width: 86px;
  height: 4px;
  background: var(--cc-accent);
  border-radius: 2px;
  margin: 18px auto 0;
}

/* --- Sticky white header -------------------------------------------------- */
.cc-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* --- Service icon tiles: enlarge the stacked Icon-Box square -------------- */
.cc-icobox .elementor-icon {
  width: 116px;
  height: 116px;
  border-radius: 2px;
  display: inline-flex !important;   /* inline-flex so the cell's text-align:center keeps the tile centred */
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cc-icobox .elementor-icon svg,
.cc-icobox .elementor-icon i { font-size: 52px; width: 52px; height: 52px; line-height: 1; }

/* --- Hero floating squares (the one decorative custom block) -------------- */
.cc-hero-squares {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.cc-hero-squares .sq {
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  will-change: transform, opacity;
  animation: cc-drift var(--d, 18s) ease-in-out infinite,
             cc-shimmer var(--s, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.cc-hero-squares .sq.teal    { background: rgba(105,181,182,0.92); }
.cc-hero-squares .sq.pink    { background: rgba(255,255,255,0.20); }
.cc-hero-squares .sq.pink2   { background: rgba(228,96,150,0.62); }
.cc-hero-squares .sq.outline { border: 3px solid rgba(255,255,255,0.65); }

/* One-time CC constellation ident. */
.cc-hero-constellation {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  animation: cc-constellation-screen 8s ease both;
}
.elementor-element-cc00013 {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible;
}
.cc-constellation-wash {
  position: absolute;
  inset: 0;
  background: #8E174E;
  animation: cc-constellation-wash 8s ease both;
}
.cc-constellation-ripples,
.cc-constellation-ripples i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
}
.cc-constellation-ripples i {
  display: block;
  width: 180px;
  aspect-ratio: 1;
  border: 9px solid rgba(243,162,192,.7);
  border-radius: 50%;
  opacity: 0;
  animation: cc-constellation-ripple 2s cubic-bezier(.12,.72,.2,1) 2.45s both;
}
.cc-constellation-ripples i:nth-child(2) { border-color: rgba(197,38,104,.7); border-width: 7px; animation-delay: 2.58s; }
.cc-constellation-ripples i:nth-child(3) { border-color: rgba(129,186,188,.62); border-width: 5px; animation-delay: 2.72s; }
.cc-constellation-ripples i:nth-child(4) { border-color: rgba(255,255,255,.36); border-width: 3px; animation-delay: 2.86s; }
.cc-constellation-main,
.cc-constellation-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  aspect-ratio: 1;
  object-fit: contain;
  will-change: transform, opacity;
}
.cc-constellation-main {
  z-index: 2;
  width: min(44vw, 520px);
  filter: brightness(1.45) saturate(.85) drop-shadow(0 0 20px rgba(229,77,139,.55));
  animation: cc-constellation-main 7s cubic-bezier(.4,0,.2,1) both;
}
.cc-constellation-mark {
  z-index: 3;
  width: var(--size);
  opacity: 0;
  filter: brightness(1.4) saturate(.8);
  animation: cc-constellation-mark 4.25s cubic-bezier(.12,.82,.22,1) calc(2.6s + var(--delay)) both;
}
.cc-hero-woof {
  position: absolute;
  z-index: 8;
  width: auto;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(19px, 1.8vw, 28px);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 8px rgba(82,5,42,.22);
  opacity: 0;
  pointer-events: none;
  animation: cc-woof-flash .5s ease 7.72s both;
}
.cc-hero-woof-left {
  right: clamp(345px, calc(25vw + 58px), 448px);
  top: 11%;
}
.cc-hero-woof-right {
  right: clamp(12px, 1.5vw, 32px);
  top: 43%;
  animation-delay: 8.25s;
}
@keyframes cc-woof-flash {
  0% { opacity: 0; transform: scale(.94); }
  22%, 70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}
@keyframes cc-constellation-main {
  0%, 5% { opacity: 0; transform: translate(-50%,-50%) scale(.08); clip-path: inset(48% 0 48% 0 round 40%); }
  24% { opacity: 1; transform: translate(-50%,-50%) scale(1); clip-path: inset(0 round 0); }
  38% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: brightness(1.65) saturate(.95) drop-shadow(0 0 24px rgba(229,77,139,.7)); }
  49% { opacity: 0; transform: translate(-50%,-50%) scale(.08); filter: brightness(1.8) saturate(1.05) drop-shadow(0 0 35px rgba(229,77,139,.9)); }
  50%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.08); }
}
@keyframes cc-constellation-mark {
  0%, 2% { opacity: 0; transform: translate(-50%,-50%) scale(.02) rotate(0); }
  15% { opacity: calc(var(--opacity) * .75); }
  48% { opacity: var(--opacity); transform: translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.14) rotate(calc(var(--rotate) * 1.3)); }
  62%, 78% { opacity: var(--opacity); transform: translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1) rotate(var(--rotate)); filter: brightness(1.4) saturate(.8) drop-shadow(0 0 0 rgba(243,162,192,0)); }
  90% { opacity: calc(var(--opacity) * .68); filter: brightness(1.75) saturate(1) drop-shadow(0 0 14px rgba(243,162,192,.9)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.92) rotate(var(--rotate)); filter: brightness(1.9) saturate(1.05) drop-shadow(0 0 22px rgba(243,162,192,.95)); }
}
@keyframes cc-constellation-ripple {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.15); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(8); border-width: 1px; }
}
@keyframes cc-constellation-wash {
  0% { opacity: 0; }
  12%, 80% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes cc-constellation-screen {
  0%, 100% { opacity: 1; visibility: visible; }
}

@keyframes cc-drift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(var(--dx,16px), var(--dy,20px)); }
  50%  { transform: translate(calc(var(--dx,16px) * 0.25), calc(var(--dy,20px) * -1.05)); }
  75%  { transform: translate(calc(var(--dx,16px) * -0.85), calc(var(--dy,20px) * -0.35)); }
  100% { transform: translate(0,0); }
}
@keyframes cc-shimmer {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-hero-squares .sq { animation: none; }
}
/* Hero layering: gradient (section) < squares (1) < dog (2) < copy (3).
   NB: Elementor drops section-level custom classes from imported data, so the
   hero section is targeted via :has() on the dog widget (whose class renders),
   and its columns are made static so the dog/squares anchor to the full-width
   section (flush to the viewport edge), not the boxed 1140 container. */
.cc-hero-sec { position: relative; overflow: hidden; }
.elementor-section:has(.cc-hero-dog) { position: relative; overflow: hidden; }
.elementor-section:has(.cc-hero-dog),
.elementor-section:has(.cc-hero-dog) > .elementor-container { min-height: clamp(400px, 31.4vw, 500px); }
/* Neutralise every positioned wrapper between the dog widget and the full-width
   section so the dog/squares anchor to the section (flush to the viewport edge). */
.elementor-section:has(.cc-hero-dog) > .elementor-container,
.elementor-section:has(.cc-hero-dog) > .elementor-container > .elementor-column,
.elementor-section:has(.cc-hero-dog) > .elementor-container > .elementor-column > .elementor-widget-wrap { position: static; }
/* the squares live in a zero-height HTML widget; make it static so the squares
   layer anchors to the full-height hero section, not the collapsed widget. */
.elementor-section:has(.cc-hero-dog) .elementor-widget-html,
.elementor-section:has(.cc-hero-dog) .elementor-widget-html > .elementor-widget-container { position: static; }
.elementor-section:has(.cc-hero-dog) .elementor-inner-section {
  position: relative;
  z-index: 3;
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  transform: translateY(58px);
}
.elementor-section:has(.cc-hero-dog) .cc-hero-dog {
  opacity: 0;
  animation: cc-hero-dog-reveal .22s cubic-bezier(.2,.85,.3,1) 6.8s both;
}
.elementor-section:has(.cc-hero-dog) .elementor-inner-section {
  opacity: 0;
  animation: cc-hero-content-reveal .35s ease 7.3s both;
}
@keyframes cc-hero-dog-reveal {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cc-hero-content-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
.elementor-section:has(.cc-hero-dog) .elementor-element-cc00010 {
  width: 74%;
  padding-left: 0;
}
.elementor-section:has(.cc-hero-dog) .elementor-element-cc00011 {
  width: 26%;
}

/* Dog anchored to the right edge at NATURAL proportions (height drives width). */
.cc-hero-dog {
  position: absolute !important;
  top: auto; right: 0; bottom: 0; left: auto !important;
  width: auto !important;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  margin: 0 !important;
}
.cc-hero-dog > .elementor-widget-container {
  position: relative;
  z-index: 2;
  height: 100%;
  width: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.cc-hero-dog img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  display: block;
  filter:
    drop-shadow(0 0 18px rgba(255, 128, 208, .72))
    drop-shadow(0 0 34px rgba(255, 128, 208, .46));
}
.cc-hero-copy { position: relative; z-index: 3; }
.elementor-section:has(.cc-hero-dog) .elementor-element-cc0000d { display: none; }

@media (max-width: 767px) {
  .elementor-section:has(.cc-hero-dog),
  .elementor-section:has(.cc-hero-dog) > .elementor-container {
    height: 283px;
    min-height: 283px;
    max-height: 283px;
  }
  .cc-hero-squares { display: none; }
  .cc-hero-constellation { display: block; animation-duration: 6.4s; }
  .cc-constellation-wash { animation-duration: 6.4s; }
  .cc-constellation-main {
    width: min(76vw, 330px);
    animation-duration: 5.25s;
  }
  .cc-constellation-ripples i {
    width: 110px;
    border-width: 6px;
    animation-duration: 1.5s;
    animation-delay: 1.9s;
  }
  .cc-constellation-ripples i:nth-child(2) { animation-delay: 2s; }
  .cc-constellation-ripples i:nth-child(3) { animation-delay: 2.1s; }
  .cc-constellation-ripples i:nth-child(4) { animation-delay: 2.2s; }
  .cc-constellation-mark {
    width: min(var(--size), 145px);
    animation-duration: 3.2s;
    animation-delay: calc(2.25s + var(--delay));
    display: none;
  }
  .cc-constellation-mark:nth-of-type(2) { display: block; --x:-39vw !important; --y:-78px !important; --size:86px !important; }
  .cc-constellation-mark:nth-of-type(4) { display: block; --x:-37vw !important; --y:74px !important; --size:76px !important; }
  .cc-constellation-mark:nth-of-type(6) { display: block; --x:-14vw !important; --y:-86px !important; --size:92px !important; }
  .cc-constellation-mark:nth-of-type(8) { display: block; --x:-12vw !important; --y:86px !important; --size:80px !important; }
  .cc-constellation-mark:nth-of-type(11) { display: block; --x:13vw !important; --y:-82px !important; --size:84px !important; }
  .cc-constellation-mark:nth-of-type(13) { display: block; --x:14vw !important; --y:82px !important; --size:88px !important; }
  .cc-constellation-mark:nth-of-type(16) { display: block; --x:38vw !important; --y:-72px !important; --size:76px !important; }
  .cc-constellation-mark:nth-of-type(18) { display: block; --x:39vw !important; --y:76px !important; --size:86px !important; }
  .cc-hero-woof { display: none; }
  .cc-hero-dog { display: none !important; }
  .elementor-section:has(.cc-hero-dog) .cc-hero-dog { animation: none; opacity: 0; }
  .elementor-section:has(.cc-hero-dog) .elementor-inner-section {
    opacity: 0;
    animation: cc-hero-content-reveal .3s ease 5.9s both;
  }
  .elementor-section:has(.cc-hero-dog) .elementor-inner-section {
    width: 100%;
    align-items: flex-start;
    transform: none;
  }
  .elementor-section:has(.cc-hero-dog) .elementor-element-cc00010 { width: 100%; padding-left: 0; }
  .elementor-section:has(.cc-hero-dog) .elementor-element-cc00011 { display: none; }
  .elementor-section:has(.cc-hero-dog) .elementor-element-cc0000e p:last-child { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-section:has(.cc-hero-dog) .cc-hero-dog,
  .elementor-section:has(.cc-hero-dog) .elementor-inner-section {
    opacity: 1;
    animation: none;
  }
}

/* --- Header nav (Icon List used as a menu) -------------------------------- */
.cc-nav .elementor-icon-list-items { justify-content: flex-end; }
.cc-nav .elementor-icon-list-item > a {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--cc-ink);
  transition: color .18s ease;
}
.cc-nav .elementor-icon-list-text { transition: color .18s ease; }
.cc-nav .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--cc-magenta); }

/* --- Blog & testimonial card helpers ------------------------------------- */
.cc-card-pink   { background: var(--cc-pink); }
.cc-card-teal   { background: var(--cc-teal); }
.cc-card-lilac  { background: var(--cc-lilac); }
.cc-overlap .elementor-widget-container { margin-top: -34px; }

/* Team photos: portrait tile, zoomed toward the faces (scaled image clipped). */
.cc-photo { overflow: hidden; display: block; }
.cc-photo img {
  width: 100% !important;
  aspect-ratio: 1 / 1.08;
  height: auto;
  object-fit: cover;
  object-position: center 16%;
  transform: scale(1.34);
  transform-origin: center 18%;
  display: block;
}

/* Testimonial photos: filled circular crop, centred, focused on the face. */
.elementor-element.cc-round img {
  width: 104px !important; height: 104px !important;
  object-fit: cover; object-position: center 22%;
  border-radius: 50%;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Equal spacing between the coloured blog/testimonial cards. Elementor paints
   the column background on the inner wrap (so cards otherwise touch) and drops
   custom classes from imported columns, so we target the card columns by the
   image they contain and inset each card with column padding (border-box). */
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image img[src*="blog-"]),
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image img[src*="client-"]) {
  padding-left: 11px;
  padding-right: 11px;
}

/* --- Constrained text blocks --------------------------------------------- */
.cc-narrow { max-width: 920px; margin-inline: auto; }
.cc-intro  { max-width: 720px; margin-inline: auto; }

.cc-content-anchor { position: relative; }

/* --- Inner page contact form (HTML widget) ------------------------------- */
.cc-contact-form { display: flex; flex-direction: column; gap: 16px; }
.cc-contact-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: var(--cc-heading);
}
.cc-contact-form input,
.cc-contact-form textarea {
  font-family: 'Open Sans', sans-serif; font-size: 15px;
  padding: 12px 14px; border: 1px solid #dcdde0; border-radius: 4px; background: #fff; color: var(--cc-ink);
}
.cc-contact-form input:focus,
.cc-contact-form textarea:focus { outline: none; border-color: var(--cc-teal); }
.cc-form-btn {
  align-self: flex-start;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.06em;
  color: #fff; background: var(--cc-teal); border: 0; border-radius: 999px;
  padding: 16px 48px; cursor: pointer; transition: background 0.2s ease;
}
.cc-form-btn:hover { background: var(--cc-teal-deep); }
.cc-form-note { font-size: 12px; color: var(--cc-muted); margin-top: 4px; }

/* --- FAQ toggle: '+/-' in a white circle on the right -------------------
   Selectors are deliberately specific (…toggle .elementor-toggle…) so they win
   against Elementor's own equal-specificity defaults, which load later. */
.elementor-widget-toggle .elementor-toggle .elementor-tab-title {
  position: relative;
  padding: 18px 62px 18px 24px !important;
  line-height: 1.5;
}
.elementor-widget-toggle .elementor-toggle .elementor-toggle-icon {
  position: absolute !important;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px !important; height: 32px !important;
  margin: 0 !important;
  float: none !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: flex !important; align-items: center; justify-content: center;
}
.elementor-widget-toggle .elementor-toggle .elementor-toggle-icon i { font-size: 13px; line-height: 1; }
.elementor-widget-toggle .elementor-toggle .elementor-toggle-icon svg { width: 13px; height: 13px; margin: 0; }
/* No !important here: jQuery slideToggle animates padding inline, and !important
   would block that animation (causing the "text then blank space" jump). */
.elementor-widget-toggle .elementor-toggle .elementor-tab-content { padding: 2px 24px 22px; }

/* --- Decorative carousel arrows around a grid row ----------------------- */
.cc-arrows { position: relative; }
.cc-arrows::before, .cc-arrows::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Poppins', sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #c7cad0;
  pointer-events: none;
}
.cc-arrows::before { content: '\2039'; left: clamp(0px, -34px + 2vw, 30px); }
.cc-arrows::after  { content: '\203A'; right: clamp(0px, -34px + 2vw, 30px); }
@media (max-width: 992px) { .cc-arrows::before, .cc-arrows::after { display: none; } }

/* ==========================================================================
   Dynamic card grids (rendered by the [cc_case_studies] / [cc_blogs] shortcodes)
   ========================================================================== */
.cc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cc-cards-empty { text-align: center; color: var(--cc-muted); }

/* Case study tiles: the Featured Image is the complete designed tile. */
.cc-cs-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 447 / 461;
}
.cc-cs-card .cc-cs-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.45s ease;
}
.cc-cs-card:hover .cc-cs-img { transform: scale(1.05); }
.cc-cs-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px;
  background: var(--cc-magenta); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 22px;
}

/* Blog cards: image on top + coloured caption (title + excerpt). */
.cc-blog-card { display: flex; flex-direction: column; color: #fff; border-radius: 2px; overflow: hidden; }
.cc-blog-card .cc-blog-img {
  display: block; aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
}
.cc-blog-card .cc-blog-body {
  flex: 1;
  padding: 22px 24px 26px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}
.cc-blog-card .cc-blog-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 19px; color: #fff; }
.cc-blog-card .cc-blog-excerpt { font-size: 13px; line-height: 1.6; color: #fff; }
.cc-blog-card--pink  .cc-blog-body { background: var(--cc-pink); }
.cc-blog-card--teal  .cc-blog-body { background: var(--cc-teal); }
.cc-blog-card--lilac .cc-blog-body { background: var(--cc-lilac); }

/* Lazy-loaded images and custom card backgrounds reveal gently on arrival. */
.cc-lazy-image,
.cc-lazy-bg {
  opacity: 0;
  transition: opacity .55s ease, transform .55s ease;
}
.cc-lazy-image { transform: translateY(8px); }
.cc-lazy-loaded {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .cc-lazy-image,
  .cc-lazy-bg { transition: none; transform: none; }
}

/* --- Veterinary Woman + Vet Report linked partner strip ----------------- */
.cc-partner-strip-half {
  overflow: hidden;
}
.cc-partner-strip-half .elementor-widget-container,
.cc-partner-strip-half a {
  display: block;
  overflow: hidden;
}
.cc-partner-strip-half img {
  display: block;
  width: 200% !important;
  max-width: none !important;
  transition: transform .25s ease, filter .25s ease;
}
.cc-partner-strip-left img { transform: translateX(0); }
.cc-partner-strip-right img { transform: translateX(-50%); }
.cc-partner-strip-half:hover img { filter: brightness(.97); }
.cc-partner-strip-left:hover img { transform: translateX(0) scale(1.012); transform-origin: left center; }
.cc-partner-strip-right:hover img { transform: translateX(-50%) scale(1.012); transform-origin: right center; }
@media (max-width: 767px) {
  .elementor-element-ccprt01 > .elementor-container {
    display: flex;
    flex-wrap: nowrap;
  }
  .elementor-element-ccprt01 > .elementor-container > .elementor-column {
    width: 50%;
  }
  .cc-partner-strip-half img {
    width: 200% !important;
  }
}

@media (max-width: 880px) {
  .cc-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cc-cards { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}

/* --- Native Elementor values slider ------------------------------------- */
.cc-values-native-section,
.elementor-element-ca00001 { overflow: visible; }
.cc-values-native-section > .elementor-container,
.elementor-element-ca00001 > .elementor-container {
  position: relative;
}
.cc-values-native-track > .elementor-container,
.elementor-element-ca00003 > .elementor-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cc-values-native-track > .elementor-container::-webkit-scrollbar,
.elementor-element-ca00003 > .elementor-container::-webkit-scrollbar { display: none; }
.cc-values-native-track > .elementor-container > .elementor-column,
.elementor-element-ca00003 > .elementor-container > .elementor-column {
  flex: 0 0 calc((100% - 24px) / 3);
  width: calc((100% - 24px) / 3);
  min-height: 260px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  scroll-snap-align: start;
}
.cc-values-native-track > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-ca00003 > .elementor-container > .elementor-column > .elementor-widget-wrap {
  position: relative;
  z-index: 2;
}
.cc-values-native-track > .elementor-container > .elementor-column::before,
.cc-values-native-track > .elementor-container > .elementor-column::after,
.elementor-element-ca00003 > .elementor-container > .elementor-column::before,
.elementor-element-ca00003 > .elementor-container > .elementor-column::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 205px;
  height: 205px;
  border: 28px solid rgba(255,255,255,.13);
  border-radius: 50%;
  pointer-events: none;
}
.cc-values-native-track > .elementor-container > .elementor-column::before,
.elementor-element-ca00003 > .elementor-container > .elementor-column::before {
  left: -166px;
  top: -18px;
}
.cc-values-native-track > .elementor-container > .elementor-column::after,
.elementor-element-ca00003 > .elementor-container > .elementor-column::after {
  right: -166px;
  bottom: -95px;
}
.cc-values-native-track > .elementor-container > .elementor-column:nth-child(even)::before,
.elementor-element-ca00003 > .elementor-container > .elementor-column:nth-child(even)::before {
  left: auto;
  right: -158px;
  top: -95px;
}
.cc-values-native-track > .elementor-container > .elementor-column:nth-child(even)::after,
.elementor-element-ca00003 > .elementor-container > .elementor-column:nth-child(even)::after {
  right: auto;
  left: 18%;
  bottom: -185px;
  width: 300px;
  height: 300px;
}
.cc-values-native-arrow {
  position: absolute !important;
  z-index: 4;
  top: 50%;
  width: 32px !important;
  transform: translateY(-50%);
  cursor: pointer;
}
.cc-values-native-arrow .elementor-icon-wrapper { line-height: 1; }
.cc-values-native-arrow .elementor-icon { transition: color .18s ease; }
.cc-values-native-arrow:hover .elementor-icon { color: var(--cc-magenta) !important; }
.cc-values-native-prev { left: -38px; }
.cc-values-native-next { right: -38px; }
@media (max-width: 1000px) {
  .cc-values-native-section > .elementor-container,
  .elementor-element-ca00001 > .elementor-container { padding-inline: 34px; }
  .cc-values-native-prev { left: 0; }
  .cc-values-native-next { right: 0; }
}
@media (max-width: 900px) {
  .cc-values-native-track > .elementor-container > .elementor-column,
  .elementor-element-ca00003 > .elementor-container > .elementor-column {
    flex-basis: calc((100% - 12px) / 2);
    width: calc((100% - 12px) / 2);
  }
}
@media (max-width: 600px) {
  .cc-values-native-section > .elementor-container,
  .elementor-element-ca00001 > .elementor-container { padding-inline: 28px; }
  .cc-values-native-track > .elementor-container > .elementor-column,
  .elementor-element-ca00003 > .elementor-container > .elementor-column {
    flex-basis: 100%;
    width: 100%;
    min-height: 240px;
  }
}

/* In Elementor edit mode, show every card so all five remain easy to edit. */
.elementor-editor-active .elementor-element-ca00003 > .elementor-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}
.elementor-editor-active .elementor-element-ca00003 > .elementor-container > .elementor-column {
  width: 100%;
  min-height: 260px;
}
.elementor-editor-active .cc-values-native-arrow { display: none; }