body {
/*  background-image: 
      url("../images/clients/xumo/xumo-hero-bg-4.jpg"),
      url("../images/clients/xumo/blue-tile.gif"); 
  background-repeat: no-repeat, repeat;
  background-size: min(180vw, 2800px) auto, auto;
  background-position: center top, top left;*/
  background-color: #F7F6FA;

}

:root {
  --theme-color-blue: #0817e5;
  --theme-color-purple: #7200ff;
  --theme-color-white: #fff;
}

.project-wells { 
  background-color: #F7F6FA; 
}  

.project-xumo  { 
  background-color: #fff; 
  padding-top: 100px;
}

.project-hyundai  { 
  background-color: #000; 
  padding-top: 100px;
  padding-bottom: 100px;
}

.project-bmc  { 
  background-color: #191919; 
  padding-top: 100px;
  padding-bottom: 100px;
}


/*------------------------------BLADE SYSTEM------------------------------*/

.blade-hero {
  /*min-height: 100vh;*/
}

.blade-intro {
  /*background-color: var(--theme-color);*/
}

.blade-project-01 {
  /*background-color: #fff;*/
}

.blade-project-02 {
  /*background-color: #fff;*/
}

.blade-project-03 {
  /*background-color: #fff;*/
}

.blade-project-04 {
  /*background-color: #fff;*/
}

/*  .blade-intro-wells {
    height: 100vh;
  }

  .blade-intro-xumo {
    height: 100vh;
  }*/

/*------------------------------HEADLINE------------------------------*/

.eyebrow {
  color: var(--theme-color-blue);
}

.headline {
  color: var(--theme-color-blue);
}

/*------------------------------SPEC TABLE------------------------------*/

.four-col-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--theme-color-blue);
  margin-bottom: 100px;
  -webkit-text-stroke: 0.2px currentColor;
}

.four-col-table td {
  width: 25%; 
  padding: 12px 32px 12px 0; 
  border-top: 1px solid var(--theme-color-blue);
  vertical-align: top;
  text-align: left; 
  box-sizing: border-box; 
}

.five-col-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--theme-color-purple);
  margin-bottom: 100px;
}

.five-col-table td {
  width: 20%; 
  padding: 12px 32px 12px 0; 
  border-top: 1px solid var(--theme-color-purple);
  vertical-align: top;
  text-align: left; 
  box-sizing: border-box; 
  -webkit-text-stroke: 0.2px currentColor;
}

/*------------------------------INTRO COPY------------------------------*/

.intro {
  color: var(--theme-color-blue);
  position: relative;   /* keeps the paragraph painting above the image */
  z-index: 1;
}

.intro-bg-image {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 600px;
  max-width: 50%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease 0.5s;
}

.intro-bg-image.is-visible {
  opacity: 1;
}

.blade-intro .container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
} 

.intro-bg-image.animate-in {
  opacity: 1;
  transform: translateY(-50%);
}

.intro-wells {
  max-width: 80%;
}

.purple-bg {
  background-color: #7200ff;
}

.white-bg {
  background-color: #fff;
}
/*------------------------------PROJECT DETAILS------------------------------*/

.label {
  color: var(--theme-color-blue);
}

.project-header {
  color: var(--theme-color-blue);
}


/*------------------------------SWIRL CAROUSEL------------------------------*/


.carousel-container {
  width: 100%;
  max-width: 1888px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.carousel-fullbleed {
  width: 100%;
  position: relative;
}

.carousel-viewport {
  width: 100%;
  overflow: visible;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
  padding-left: 0; 
}

.carousel-track img {
  width: auto;
  flex-shrink: 0;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
}

.carousel-controls-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 48px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  gap:20px;
}

.carousel-arrow {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.carousel-arrow img {
  display: block;
  width: 24px;
}


/*------------------------------PACKAGING ------------------------------*/

.full-width-image {
  width: 100%;
}

/*------------------------------SCROLLBAR------------------------------*/

/*::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border: 3px solid var(--theme-color);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}*/

/*.scroll-container {
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}*/


/*------------------------------VIDEO PLAYER------------------------------*/

.video-container {
  width: 100%;
  /*max-width: 1888px;*/
  margin: 0 auto;
  margin-bottom: 56px;
}

.full-width-video {
  width: 100%;
  height: auto;
  display: block;
}



.caption {
  color: var(--theme-color-blue);
}


.video-mobile { display: none; }
@media (max-width: 639px) {
  .video-desktop { display: none; }
  .video-mobile { display: block; }
}

/*------------------------------STACKED CAROUSEL------------------------------*/

.stacked-carousel-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.stacked-carousel {
  position: relative;
  width: 100%;
}

.stacked-carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.stacked-carousel img:first-child {
  position: relative; /* First image sets container height */
}

.stacked-carousel img.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.stacked-carousel-controls {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 48px;
  gap: 20px;
}

.stacked-carousel-arrow {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.stacked-carousel-arrow img {
  display: block;
  width: 24px;
}

.newsmakers-carousel-controls-wrapper,
.stacked-carousel-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 48px;
}

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

.stacked-carousel img:not(.active) {
  pointer-events: none;
}


/* ============================================================
   1. THUMB CAROUSEL — copy from here down
   ============================================================ */


.thumb-carousel {
  container-type: inline-size;   /* makes this the measuring stick */
}

/* --- Stage: the large image area --- */
.thumb-carousel-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.2;      /* match your artwork's ratio */
  overflow: hidden;
}

@media (max-width: 639px) {
  .thumb-carousel-stage {
    aspect-ratio: 1 / 1;   /* set to your mobile art's actual ratio */
  }
}

.thumb-carousel-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;     /* stage is non-interactive; thumbs drive it */
}

.thumb-carousel-stage img.is-active {
  opacity: 1;
}

/* --- Controls row: caption left, thumbnails right ---
   Mirrors your .stacked-carousel-controls layout. If that class
   already handles the flex split, you can reuse it and only keep
   the .carousel-thumbs rules below. */
.thumb-carousel-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-top: 24px;
}

.thumb-carousel-controls .caption {
  /*max-width: 56ch;*/
  margin: 0;
}

/* --- Thumbnail strip --- */
.carousel-thumbs {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;  /* belt-and-suspenders: stop the stretch */
}

.carousel-thumb {
  /* button reset */
  appearance: none;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 0;

  width: 2.5cqw;                 /* 1/40th of the carousel/stage width */
  aspect-ratio: 1 / 1;           /* stays square at any size */
  min-width: 28px;               /* floor so they stay usable when small */
  border: 1px solid #e3e3e3;
  margin-left: -1px;        /* collapse shared borders into one hairline */
  position: relative;
  overflow: hidden;

  flex-shrink: 0;        /* don't let the flex row squeeze them */
}

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

/* Active state: blue keyline like the mock. z-index lifts the
   active border above neighbours sharing the collapsed edge. */
.carousel-thumb.is-active {
  border-color: #2331ff;
  z-index: 1;
}

.carousel-thumb:focus-visible {
  outline: 2px solid #2331ff;
  outline-offset: 2px;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .thumb-carousel-stage img {
    transition: none;
  }
}

/* Stack caption above thumbs on small screens */
@media (max-width: 640px) {
  .thumb-carousel-controls {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .thumb-carousel-controls {
    flex-direction: column;
    gap: 20px;
  }
  .carousel-thumbs {
    order: -1;              /* jump above the caption */
    align-self: flex-end;   /* pin to the right edge */
  }
}



.wells-hero {
  margin-bottom: 56px;
}


/*=================WELLS STYLES=================*/

/*------------------------------CONTENT STRATEGY CAROUSEL------------------------------*/

.newsmakers-carousel-container {
  width: 100%;
  max-width: 1888px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.newsmakers-carousel-fullbleed {
  width: 100%;
  position: relative;
}

.newsmakers-carousel-viewport {
  width: 100%;
  overflow: visible;
}

.newsmakers-carousel-wrapper {
  position: relative;
  width: 100%;
}

.newsmakers-carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
  padding-left: 0;
  gap: 0; /* No gap between images by default */
}

.newsmakers-carousel-track img {
  width: auto;
  flex-shrink: 0;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  margin-right: 1px;
}

.newsmakers-carousel-track img.last-in-group {
  margin-right: 80px; /* Gap after every 4th image */
}

.newsmakers-carousel-controls-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 48px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  gap: 20px;
}

.newsmakers-carousel-arrow {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.newsmakers-carousel-arrow img {
  display: block;
  width: 24px;
}

/* Mobile - 70vw max width */
@media (max-width: 639px) {
  .newsmakers-carousel-track img {
    max-width: 70vw;
    height: auto;
  }
}

/* Tablet */
@media (min-width: 640px) {
  .newsmakers-carousel-track img {
    max-width: 480px;
    height: auto;
  }
}


/*------------------------------COMPARE SLIDER------------------------------*/

.compare-slider {
  position: relative;
  width: 100%;
  overflow: visible;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.compare-before,
.compare-after {
  position: relative;
}

.compare-before img,
.compare-after img {
  width: 100%;
  display: block;
}

.compare-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* JS will update this */
  height: 100%;
  overflow: hidden;
}

.compare-after img {
  width: 100%; 
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left;
  position: absolute;
  top: 0;
  left: 0;
}

.compare-before img {
  visibility: hidden; /* Hidden by default, after sits on top */
}

.compare-before {
  position: relative;
  width: 100%;
}

.compare-before img {
  visibility: visible;
}

.compare-divider {
  position: absolute;
  top: 0;
  left: 50%; /* JS will update this */
  width: 1px;
  height: 100%;
  background-color: #7200ff;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

.compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*  background-color: #F7F6FA;
  outline: 0.5px solid #5A469B;
  border-radius: 50%;*/
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: col-resize;
}

.compare-handle img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  width: 60px;
  height: 60px;
}

.compare-handle svg {
  display: block;
}

.compare-labels {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 3;
  pointer-events: none;
}

.compare-label-before,
.compare-label-after {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 5%;
  color: white;
  background-color: rgba(0,0,0,0.5);
  padding: 4px 10px;
  border-radius: 2px;
}

.compare-slider .slider-mobile {
  display: none;
}

@media (max-width: 1079px) {
  .compare-slider .slider-desktop {
    display: none;
  }
  .compare-slider .slider-mobile {
    display: block;
  }
}


/*=================HYUNDAI VIDEO=================*/


.cf-stream-wrap {
  position: relative;
  padding-top: 56.25%;
}
.cf-stream-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}



/*=================AWARDS=================*/

.award-row {
  display: flex;
  gap: 3vw;
  align-items: flex-start;
  width: 100%;         
  margin-top: 100px;
  margin-bottom: 100px;
}
.award-item {
  flex: 0 0 40%;        
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}
.award {
  width: 100%;          
  height: auto;
}



/*=================BREAKPOINTS=================*/


@media (max-width: 639px) {
 
  .intro-wells {
    font-size: 24px;
  }

  .blade-intro-wells {
    padding-top: 80px;
    padding-bottom: 80px;
  }

}

@media (min-width: 640px) and (max-width: 1079px) {

  .intro-wells {
    font-size: 28px;
  }

  .blade-intro-wells {
    padding-top: 110px;
    padding-bottom: 110px;
  }

}

@media (min-width: 1080px) and (max-width: 1439px) {

  .intro-wells {
    font-size: 32px;
  }

  .blade-intro-wells {
    padding-top: 140px;
    padding-bottom: 140px;
  }

}

@media (min-width: 1440px) and (max-width: 1887px) {

  .intro-wells {
    font-size: 36px;
  }

  .blade-intro-wells {
    padding-top: 170px;
    padding-bottom: 170px;
  }

}

@media (min-width: 1888px) {

  .intro-wells {
    font-size: 40px;
    /*left: -5vw;*/
  }

  .blade-intro-wells {
    padding-top: 200px;
    padding-bottom: 200px;
  }

}


/*=================GLOBAL STYLES=================*/

.xumo-blue {
    color: var(--theme-color-blue);
}

.wells-purple {
    color: var(--theme-color-purple);
}

.white {
    color: var(--theme-color-white);
}