.cf-orbit{
  --cf-orbit-bg: #0f1e3d;
  --cf-orbit-accent: #7ed957;
  --cf-orbit-text: #ffffff;
  --cf-orbit-radius: 20px;

  position: relative;
  padding: 60px 24px;
  background: var(--cf-orbit-bg);
}

.cf-orbit--full-bleed{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.cf-orbit__flat-subtitle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #7ed957;
  margin-bottom: 12px;
}

.cf-orbit__viewport{position:relative;overflow:hidden;max-width:100%;padding:30px;margin:0 auto}

.cf-orbit__track{position:relative}

/* Each slide is the WHOLE composite — left image, text, right image — as
   one unit. All slides stack on top of each other; only the active one
   sits at translateX(0), the rest wait off-screen to either side. */
.cf-orbit__flat-slide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(160px, 22%) 1fr minmax(160px, 22%);
  grid-template-areas: "left content right";
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  transition: transform var(--cf-orbit-duration, .5s) cubic-bezier(.4,0,.2,1), opacity calc(var(--cf-orbit-duration, .5s) * .8) ease;
}

.cf-orbit__flat-image--left{grid-area:left}
.cf-orbit__flat-content{grid-area:content}
.cf-orbit__flat-image--right{grid-area:right}

.cf-orbit__flat-image{
  aspect-ratio: 3/4;
  border-radius: var(--cf-orbit-radius);
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.cf-orbit__flat-image--left{--cf-tilt: -5deg}
.cf-orbit__flat-image--right{--cf-tilt: 5deg}

/* Inner reveal — plays AFTER the whole slide has finished sliding in.
   Uses a --cf-tilt custom property (rather than baking rotate() directly
   into the transform) so the resting tilt and this translateY reveal can
   combine in one transform without fighting each other, and so tablet/
   mobile can cleanly reset just the tilt to 0deg without a specificity
   battle over the whole transform property. opacity/transform change the
   instant .is-active is added (same moment the outer slide starts sliding
   in), but transition-delay holds off the VISIBLE animation until that
   outer transition has actually landed — using the same --cf-orbit-duration
   the slide itself uses — then staggers each piece slightly after that. */
.cf-orbit__flat-image--left,
.cf-orbit__flat-image--right{
  opacity: 0;
  transform: rotate(var(--cf-tilt, 0deg)) translateY(24px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}

.cf-orbit__flat-content{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}

.cf-orbit__flat-slide.is-revealed .cf-orbit__flat-image--left,
.cf-orbit__flat-slide.is-revealed .cf-orbit__flat-image--right{
  opacity: 1;
  transform: rotate(var(--cf-tilt, 0deg)) translateY(0);
}
.cf-orbit__flat-slide.is-revealed .cf-orbit__flat-content{
  opacity: 1;
  transform: translateY(0);
}

.cf-orbit__flat-slide.is-revealed .cf-orbit__flat-image--left{
  transition-delay: var(--cf-orbit-duration, .5s);
}
.cf-orbit__flat-slide.is-revealed .cf-orbit__flat-content{
  transition-delay: calc(var(--cf-orbit-duration, .5s) + .08s);
}
.cf-orbit__flat-slide.is-revealed .cf-orbit__flat-image--right{
  transition-delay: calc(var(--cf-orbit-duration, .5s) + .16s);
}

.cf-orbit__flat-image img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Tablet (768px–1024px): content takes its own full-width row,
   the two images sit side by side in a row below it ===== */
@media (max-width: 1024px) and (min-width: 768px) {
  .cf-orbit__flat-slide{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "content content"
      "left right";
    position: relative; /* was still inheriting position:absolute from the base rule — with no JS height calc running at this breakpoint anymore, that left the viewport with nothing to size itself by, which is what caused the cutoff */
    display: none; /* hidden by default; JS adds .is-active to show exactly one, same mechanism as mobile */
    transition: none;
  }
  .cf-orbit__flat-slide.is-active{
    display: grid;
  }
  .cf-orbit__flat-image--left,
  .cf-orbit__flat-image--right{
    --cf-tilt: 0deg; /* resets just the tilt component — leaves the reveal's translateY working correctly, unlike overriding the whole transform */
  }
  .cf-orbit__flat-image{
    aspect-ratio: auto;
    height: 260px;
  }
  .cf-orbit__card{padding:18px}
  .cf-orbit__card h3{font-size:17px}
  .cf-orbit__card p{font-size:13px}
  .cf-orbit__year-slot--active{font-size:21px}
  .cf-orbit__nav{margin-top:30px}
}

/* ===== Mobile (≤767px): single column — content, then each image
   stacked below at a fixed 200px height (cropped via object-fit) ===== */
@media (max-width: 767px) {
  .cf-orbit__flat-slide{
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "left";
    position: relative; /* in normal flow — height comes from actual stacked content, no JS measurement needed at this breakpoint */
    display: none; /* hidden by default; JS adds .is-active to show exactly one */
    transition: none; /* mobile swaps directly rather than sliding */
  }
  .cf-orbit__flat-slide.is-active{
    display: grid;
  }
  .cf-orbit__flat-image{
    aspect-ratio: auto;
    height: 200px;
  }
  .cf-orbit__flat-image--left,
  .cf-orbit__flat-image--right{
    --cf-tilt: 0deg;
  }
  .cf-orbit__flat-image--right{
    display: none;
  }
  .cf-orbit__viewport{padding:0}
  .cf-orbit__card{padding:16px}
  .cf-orbit__card h3{font-size:16px}
  .cf-orbit__nav{gap:10px}
  .cf-orbit__arrow{width:38px;height:38px}
  .cf-orbit__years{gap:14px}
  .cf-orbit__year-slot{font-size:14px}
  .cf-orbit__year-slot--active{font-size:18px}
  .cf-orbit__nav{margin-top:30px}
}

.cf-orbit__flat-content{text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center}

.cf-orbit__flat-heading{
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 800;
  color: var(--cf-orbit-text);
  line-height: 1.1;
  margin: 0 0 16px;
}
.cf-orbit__flat-heading .highlight{color:var(--cf-orbit-accent)}

.cf-orbit__flat-desc{
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.65);
  margin: 0;
  max-width: 46rem;
}

.cf-orbit__nav{position:relative;display:flex;justify-content:center;align-items:center;gap:16px;margin-top:0px;z-index:5}

.cf-orbit__arrow{flex:none;width:44px;height:44px;border-radius:50%;background:var(--cf-orbit-accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .2s ease;padding:0 !important}
.cf-orbit__arrow:hover{filter:brightness(1.1)}
.cf-orbit__arrow svg{width:20px;height:20px;stroke:#122149 !important}

.cf-orbit__years{display:flex;align-items:center;justify-content:center;gap:20px}

.cf-orbit__year-slot{
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  height: 1.3em;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  text-align: center;
  transition: color .2s ease, font-size .2s ease;
}

.cf-orbit__year-slot--active{
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--cf-orbit-accent);
  cursor: default;
  margin-bottom: -5px !important;
}

.cf-orbit__year-slot:hover:not(.cf-orbit__year-slot--active){
  color: rgba(255,255,255,.8);
}

.cf-orbit__year-slot span{
  display: inline-block;
  transition: transform .35s ease, opacity .35s ease;
}

.cf-orbit__year-slot span.cf-year-out-left{ transform: translateX(-100%); opacity: 0; }
.cf-orbit__year-slot span.cf-year-out-right{ transform: translateX(100%); opacity: 0; }
.cf-orbit__year-slot span.cf-year-in-start-left{ transition: none; transform: translateX(100%); opacity: 0; }
.cf-orbit__year-slot span.cf-year-in-start-right{ transition: none; transform: translateX(-100%); opacity: 0; }

.cf-orbit.cf-orbit--reveal{opacity:0;transform:scale(.96);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.cf-orbit.cf-orbit--reveal.cf-orbit--visible{opacity:1;transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  .cf-orbit__flat-slide,.cf-orbit__year-slot span,.cf-orbit.cf-orbit--reveal{transition:none!important}
}