:root{
  --pills-h: 0px; /* desktop pills bar height */
}

/* Outer layout */
.remidia-hero{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:0 !important;
  margin:0 !important;
  overflow: visible; /* allow badges outside */
}
.remidia-hero.is-fullscreen{
  height:100vh;
  height:115svh;
  min-height:100vh;
  min-height:123svh;
}

/* Top white section */
.remidia-hero__section{
  flex:0 0 auto;
  width:100%;
  box-sizing:border-box;
  background:#fff;
  margin:0;
  padding-top:20px;
  padding-bottom:20px;
  border-radius:0;
}
.remidia-hero__grid{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  width:100%;
  box-sizing:border-box;
}
.remidia-hero__col{flex:1 1 0;min-width:0;margin:0;padding:0;}
.remidia-hero__col--left{text-align:left;}
.remidia-hero__col--right{text-align:right;}

/* Image area */
.remidia-hero__imagewrap{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  overflow: visible;          /* allow badges outside */
  background:#000;
  display:block;
  z-index: 1;
}

/* Top badges container */
.remidia-hero__topbadges{
  position:absolute;
  top:0; left:0; right:0;
  z-index:6;
  pointer-events:none;
}

/* ======== CONTINUOUS SCROLLING BADGE 1 ======== */
.badge-1-wrap{
  --w: 2659.999876267642px;
  --h: 59.99999890127875px;
  --speed: 28s;

  position:absolute;
  top: -222px;
  left: 464px;
  width: var(--w);
  height: var(--h);
  transform: rotate(9.43deg);
  transform-origin: left top;
  z-index: 7;
  pointer-events: none;
}
.badge-1-wrap .scroll-track{
  position: relative;
  width: calc(var(--w) * 2);
  height: var(--h);
  display: flex;
  animation: badge-scroll var(--speed) linear infinite;
  will-change: transform;
}
.badge-1-wrap .badge-1{
  /* flex: 0 0 var(--w); */
  width: var(--w);
  height: var(--h);
  max-height: none !important;
  opacity: 1;
  object-fit: contain;
  display:block;
}

/* ======== CONTINUOUS SCROLLING BADGE 2 ======== */
.badge-2-wrap{
  --w: 2659.9997537264376px;
  --h: 59.99999613719136px;
  --speed: 32s;

  position:absolute;
  top: 102px;
  left: 27.18px;
  width: var(--w);
  height: var(--h);
  transform: rotate(-10.75deg);
  transform-origin: left top;
  z-index: 7;
  pointer-events: none;
}
.badge-2-wrap .scroll-track{
  position: relative;
  width: calc(var(--w) * 2);
  height: var(--h);
  display: flex;
  animation: badge-scroll var(--speed) linear infinite;
  will-change: transform;
}
.badge-2-wrap .badge-2{
  /* flex: 0 0 var(--w); */
  width: var(--w);
  height: var(--h);
  max-height: none !important;
  opacity: 1;
  /* object-fit: contain; */
  display:block;
}

/* Shared keyframes */
@keyframes badge-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--w))); }
}

@media (max-width: 768px){
  .badge-1-wrap{
    transform: rotate(9.43deg) scale(0.7);
    transform-origin: left top;
    top: calc(-222px * 0.8);
    left: calc(464px * 0.7);
    --speed: 24s;
  }
  .badge-2-wrap{
    transform: rotate(-10.75deg) scale(0.7);
    transform-origin: left top;
    top: calc(102px * 0.8);
    left: calc(27.18px * 0.7);
    --speed: 27s;
  }
}

/* Base image — INSTANT swap (no animation) */
.remidia-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover !important;
  object-position:center center !important;
  display:block;
  transition: none !important;
  opacity: 1 !important;
}

/* optional dim overlay */
.remidia-hero__imgoverlay{
  position:absolute; inset:0;
  background:#000;
  opacity:.25;
  pointer-events:none;
  z-index: 2;
}

/* Raised white gradient above buttons */
.remidia-hero__imagewrap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 260px;
  pointer-events:none;
  z-index: 3;
  background: linear-gradient(0deg, #FFFFFF 12%, rgba(0, 0, 0, 0) 78%);
}
@media (max-width: 768px){
  .remidia-hero__imagewrap::after{
    height: 300px;
    background: linear-gradient(0deg, #FFFFFF 14%, rgba(0,0,0,0) 80%);
  }
}

/* Two-line copy over gradient */
.remidia-hero__whitecopy{
  position:absolute;
  left:0; right:0; bottom: calc(var(--pills-h) + 12px);
  z-index: 4;
  display:flex; flex-direction:column; gap:4px;
  padding: 0 55px;
  pointer-events:none;
}
.remidia-hero__whitecopy.is-center{ align-items:center; text-align:center; }
.remidia-hero__whitecopy.is-right{  align-items:flex-end; text-align:right; }
.remidia-hero__whitecopy .wc-line1{
  font-family: 'goodspace', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, 'Noto Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 29.4px;
  letter-spacing: 0.03em;
  color: #000000;
  margin: 0;
}
.remidia-hero__whitecopy .wc-line2{
  font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, 'Noto Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 29.23px;
  letter-spacing: 0;
  color: #000000BF;
  margin: 0;
}
@media (max-width: 768px){
  .remidia-hero__whitecopy{
    bottom: calc(var(--pills-h) + 10px);
    padding: 0 16px;
  }
}

/* Pills bar */
.remidia-hero__pillsbar{
  flex:0 0 var(--pills-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:0; width:100%; box-sizing:border-box;
  background: transparent;
  border-top:1px solid rgba(255,255,255,0.06);
  padding-bottom:max(0px, env(safe-area-inset-bottom));
  z-index: 5;
}

/* Frosted pills */
.remidia-pill{
  background:#000929BF;
  -webkit-backdrop-filter:blur(30px);
  backdrop-filter:blur(30px);
  color:#FFFFFF; text-decoration:none; white-space:nowrap;

  transition:filter .2s ease, background-color .2s ease, border-color .2s ease;
  border-left:1px solid rgba(255,255,255,0.10);
  border-right:1px solid rgba(255,255,255,0.10);

  padding-top:34px; padding-bottom:34px;
  flex:1 1 20%;
  display:flex; align-items:center; justify-content:center;

  font-family:'goodspace',system-ui,-apple-system,'Segoe UI',Roboto,Arial,'Noto Sans','Helvetica Neue',sans-serif;
  font-weight:400; font-size:clamp(14px,1.6vw,20px); line-height:1.1;
}
.remidia-pill:hover{ filter:brightness(1.12); }
.remidia-pill[data-active="1"]{
  background:#134785 !important;
  border-color:#134785 !important;
  color:#FFFFFF !important;
  filter:none !important;
}

/* Responsive extras */
@media (max-width: 1024px){
  :root{ --pills-h: 66px; }
  .remidia-hero__grid{ flex-wrap:wrap !important; gap:14px !important; }
  .remidia-hero__col{ flex:1 1 100% !important; }
  .remidia-hero__col--right{ text-align:left !important; }
  .remidia-hero__section{
    padding-left: max(12px, var(--xpad)) !important;
    padding-right: max(12px, var(--xpad)) !important;
  }
  .remidia-hero__pillsbar{
    gap:8px !important; overflow-x:auto; scrollbar-width:thin;
  }
  .remidia-hero__pillsbar::-webkit-scrollbar{ height:6px; }
  .remidia-hero__pillsbar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.25); border-radius:999px;
  }
  .remidia-hero__pillsbar::-webkit-scrollbar-track{ background:transparent; }
  .remidia-pill{
    flex:0 0 auto !important;
    min-width:220px !important;
    border-right:none !important;
    border-left:1px solid rgba(255,255,255,.12);
    padding-top:22px !important; padding-bottom:22px !important;
  }
  .remidia-pill:first-child{ border-left:none !important; }
}
@media (max-width: 768px){
  :root{ --pills-h: 60px; }
  .remidia-hero__section{ padding-left:14px !important; padding-right:14px !important; }
  .remidia-hero__grid{ gap:12px !important; }
  .remidia-hero__col--left{
    border-left:1px solid #00000033 !important;
    padding-left:12px !important; padding-right:12px !important;
  }
}
@media (max-width: 480px){
  :root{ --pills-h: 56px; }
  .remidia-hero__section{ padding-left:10px !important; padding-right:10px !important; }
  .remidia-pill{
    min-width:180px !important;
    font-size:14px !important;
    padding-top:18px !important; padding-bottom:18px !important;
  }
}