:root{
      --brand: #ffffff;            /* bluish panel (adjust to match your CI) */
      --brand-strong: rgba(159,196,232,.85);
      --brand-weak: rgba(159,196,232,.65);
      --txt: #2a2a2a;
      --txt-on-dark: #ffffff;
      --btn: #e87567;              /* coral button */
      --btn-hover: #d96556;
      --radius: 999px;
      --gap: clamp(16px, 3vw, 32px);
      --panel-w: 50%;              /* left text panel width on desktop */
      --slide-h: 50vh;             /* desktop height */
      --slide-h-m: 50vh;           /* tablet/phone height for the whole slide */
    }

    @media (max-width: 860px) {
      :root {
          --slide-h: 70vh;
          --slide-h-m: 70vh; 
      }
    }

    /* Core slider wrap */
    .split-hero {
      max-width: 100%;
      margin: 0;
    }
    .splide__track { overflow: hidden; }

    /* Slide (two-column on desktop) */
    .split-slide {
      position: relative;
      display: grid;
      grid-template-columns: var(--panel-w) 1fr;
      align-items: stretch;
      height: var(--slide-h);
      max-height: 600px;
      color: var(--txt);
      isolation: isolate;
      background: #fff;
    }

    /* Left text panel */
    .panel {
      position: relative;
      padding: clamp(24px, 5vw, 72px);
      display: grid;
      align-content: center;
      gap: 1rem;
      z-index: 2;
    }
    .panel--brand { background: var(--brand); color: #25405b; }
    .eyebrow { font-size: .95rem; letter-spacing: .02em; opacity: .7; }
    .h1 {
      font-size: clamp(28px, 4.5vw, 48px);
      line-height: 1.15;
      margin: 0;
    }
    .lead {
      font-size: clamp(16px, 2.2vw, 22px);
      line-height: 1.45;
      margin: 0;
      opacity: .8;
    }

    .button-cta {
      display: inline-block;
      margin-top: 1rem;
      background: var(--btn);
      color: #fff;
      text-decoration: none;
      padding: .9rem 1.25rem;
      border-radius: var(--radius);
      font-weight: 600;
      transition: transform .12s ease, background .2s ease;
      width: fit-content;
    }
    .button-cta:focus-visible { outline: 3px solid rgba(0,0,0,.2); outline-offset: 3px; }
    .button-cta:hover { background: var(--btn-hover); transform: translateY(-1px); }

    /* Right media area */
    .media-pane {
      position: relative;
      overflow: hidden;
    }
    .media-pane img,
    .media-pane video,
    .media-pane picture {
      width: 100%;
      height: 100% !important;
      display: block;
      object-fit: cover;
    }

    /* Optional blue tint over image/video for “brand” slides (subtle on desktop) */
    .split-slide[data-theme="brand"] .media-pane::after{
      content: "";
      position: absolute; inset: 0;
      background: var(--brand-weak);
      pointer-events: none;
    }

    /* Arrows & bullets styling */



    .splide__arrow { background: transparent; border: 0;  filter: invert(50%); }
    .splide__arrow:hover { background: transparent); }
    .splide__pagination__page{ background: #5e625d; }
    .splide__pagination__page.is-active{ background: #dbc089; transform: none; }

    /* ======= Responsive ======= */
    @media (max-width: 1024px){
      .split-slide { height: var(--slide-h-m); }
    }
    @media (max-width: 860px){
      /* Stack: brand panel on top, media below – like your mobile screenshot */
      .split-slide {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
      }
      .panel { padding: clamp(20px, 5.2vw, 36px); }
      /*.media-pane { min-height: 42vh; }

      /* Stronger tint on mobile to mirror the look */
      .split-slide[data-theme="brand"] .media-pane::after{ background: var(--brand-strong); }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      .splide__list, .splide__slide { scroll-behavior: auto !important; }
    }





    /* Panel becomes a 3-row grid so the last child (button) sits at the bottom */
.panel {
  position: relative;
  padding: clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-rows: auto 1fr auto;  /* title/lead | spacer | button */
  gap: 1rem;
  z-index: 2;
}

/* Button style like in your image */
.link-box {
  justify-self: start;            /* left align */
  width: max-content;             /* only as wide as its text */
  background: transparent;
  color: #5a5a5a;
  text-decoration: none;
  border: 2px solid #c9cccf;      /* subtle grey border */
  border-radius: 4px;
  padding: .9rem 1.25rem;
  font-weight: 600;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.link-box:hover {
  background: #f5f6f7;
  border-color: #b8bbbe;
  color: #3a3a3a;
}

.link-box:focus-visible {
  outline: 3px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}






/* Panel grid: top area auto, flexible middle, fixed bottom button */
.panel {
  position: relative;
  padding: clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-rows: 1fr auto;   /* flexible space + button at bottom */
  z-index: 2;
  gap: 1.5rem;
}

/* Inner wrapper: center content vertically inside top cell */
.panel__content {
  display: flex;
  flex-direction: column;
  justify-content: center;        /* vertical center */
  gap: 1rem;
  height: 100%;
}

/* Typography */
.h1 {
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.15;
  margin: 0;
}

.lead {
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.45;
  margin: 0;
  opacity: .8;
}

/* Button stays at bottom */
.link-box {
  justify-self: start;
  width: max-content;
  background: transparent;
  color: #5a5a5a;
  text-decoration: none;
  border: 2px solid #c9cccf;
  border-radius: 4px;
  padding: .9rem 1.25rem;
  font-weight: 600;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.link-box:hover {
  background: #f5f6f7;
  border-color: #b8bbbe;
  color: #3a3a3a;
}

.link-box:focus-visible {
  outline: 3px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}


/* (Optional) on small screens give it a little breathing room from bottom */
@media (max-width: 860px){
  .split-slide {
        grid-template-columns: 1fr;
        grid-template-rows: 35% 65%;
  }
  .panel { 
    padding-bottom: clamp(24px, 6vw, 40px); 
    grid-template-rows:  1fr ;
  }
  .media-pane img, .media-pane video, .media-pane picture {
    width: 100%;
    /*height: 40vh !important;*/
    display: block;
    object-fit: cover;
  } 
   
}