/* =========================
   AluK-style Hero Carousel (CSS only)
   - Desktop: 1/3 text + 2/3 image
   - Image fades to page background on the LEFT
   - Optional image reveal (snappy white wash) can be enabled below
   ========================= */

:root{
  --page-bg: #f5f5f5;         /* change to your page background */
  --text-dark: #15181d;
  --text-mid: rgba(21,24,29,.78);
  --radius: 22px;
}

.getQuoteHero {
    background: linear-gradient(
    180deg,
    #f7c55a 0%,
    #f0a83a 45%,
    #e68a00 100%
  );
    color: #111;
    border: 1px solid #c87f00;
    box-shadow: 0 2px 0 #b36a00,
    0 6px 16px rgba(0,0,0,.18);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.10);

    color: #111;
    text-decoration: none;
    font-weight: 650;
    font-size: 14px;
}
/* HERO WRAPPER */
.hero2026{
  position: relative;
  height: 60vh;
  min-height: 460px;
  overflow: hidden;
  background: var(--page-bg);
}

/* Hide radios */
.hero2026 input{
  position: absolute;
  left: -9999px;
}

/* SLIDES TRACK */
.slides2026{
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform .65s cubic-bezier(.4,0,.2,1);
}

/* Slide switching */
#slide1:checked ~ .slides2026{ transform: translateX(0%); }
#slide2:checked ~ .slides2026{ transform: translateX(-33.3333%); }
#slide3:checked ~ .slides2026{ transform: translateX(-66.6666%); }

/* EACH SLIDE */
.slide2026{
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

/* LEFT: TEXT AREA (1/3) */
.slide-content{
  flex: 0 0 38%;
  width: 38%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(18px, 6vw, 90px);
  padding-right: clamp(16px, 2vw, 8px);

  /* clean editorial background */
  background: var(--page-bg);
}

/* Typography */

.kicker2026{
  margin: 0 0 8px 0;
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: .18em;   /* was .55rem – too spaced */
  font-weight: 600;        /* was 300 */
  color: #15181d;          /* full strength */
}


.slide-content h2{
  margin: 0 0 10px 0;
  font-size: 1.40rem;
  letter-spacing: .25rem;
  font-weight: 300;
  color: rgba(21,24,29,.65);
}

.slide-content h1{
  margin: 0;
  font-size: clamp(28px, 6vw, 2.4em);
  letter-spacing: .02em;
  font-weight: 650;
  color: var(--text-dark);
}

.slide-content p{
  margin: 14px 0 0;
  max-width: 50h;
  color: var(--text-mid);
  line-height: 1.55;
  font-size: 22px;
}

/* Button (simple brand style – swap to your Amazon CTA if you prefer) */
.btn-primary{
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: #0063a6;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.btn-primary:hover{ background: #004e85; }

/* RIGHT: IMAGE AREA (2/3) */
.slide-image{
  flex: 0 0 62%;
  width: 62%;
  position: relative;
  background-size: cover;
  background-position: center;
}

/* IMAGE FADE (solid bg on left -> transparent into image)
   This is the key "solid-to-opaque" blend */
.slide-image::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    var(--page-bg) 0%,
    var(--page-bg) 10%,
    rgba(245,245,245,.0) 32%,
    rgba(245,245,245,.0) 42%,
    rgba(245,245,245,0) 85%
  );
  pointer-events:none;
}

/* If you change --page-bg away from #f5f5f5, update these rgba() stops too.
   (CSS can’t put var() inside rgba() reliably everywhere)
   Quick alternative: set --page-bg-rgb: 245,245,245; and use rgba(var(--page-bg-rgb),.65) etc. */


/* =========================
   OPTIONAL: Snappy white “wipe” reveal on slide change
   Enable by uncommenting this block.
   (Works with your radio-button switching)
   ========================= */

/*
.slide2026::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.70) 0%,
    rgba(255,255,255,.70) 8%,
    rgba(255,255,255,.45) 14%,
    rgba(255,255,255,.18) 20%,
    rgba(255,255,255,0) 26%
  );
  pointer-events:none;
  transform: translateX(0);
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}

#slide1:checked ~ .slides2026 .slide2026:nth-child(1)::after,
#slide2:checked ~ .slides2026 .slide2026:nth-child(2)::after,
#slide3:checked ~ .slides2026 .slide2026:nth-child(3)::after{
  transform: translateX(100%);
}
*/


/* =========================
   MOBILE: stack layout
   ========================= */
@media (max-width: 900px){
  .hero2026{
    height: auto;
    min-height: 0;
  }

  .slides2026{
    width: 300%;
  }

  .slide2026{
    flex-direction: column;
    min-height: 620px;
  }

  .slide-content,
  .slide-image{
    width: 100%;
    flex: 0 0 auto;
  }

  .slide-content{
    padding: 34px 18px 18px;
  }

  .slide-content h1{
    font-size: clamp(34px, 9vw, 54px);
  }

  /* On mobile, a bottom fade usually looks better than left fade */
  .slide-image::before{
    background: linear-gradient(
      180deg,
      rgba(245,245,245,0) 0%,
      rgba(245,245,245,.00) 55%,
      var(--page-bg) 100%
    );
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .slides2026{ transition: none; }
  .slide2026::after{ transition: none; }
}



/* =========================
   ARROWS + DOTS (restored)
   ========================= */

.arrows2026 .set{ display:none; }

#slide1:checked ~ .arrows2026 .set.s1{ display: contents; }
#slide2:checked ~ .arrows2026 .set.s2{ display: contents; }
#slide3:checked ~ .arrows2026 .set.s3{ display: contents; }

.arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  width: 46px;
  height: 46px;
  border-radius: 14px;

  display:grid;
  place-items:center;

  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);

  cursor:pointer;
  user-select:none;

  color: #15181d;
  font-size: 22px;
  line-height: 1;
}

.arrow.prev{ left: 14px; }
.arrow.next{ right: 14px; }

.arrow:hover{
  background: rgba(255,255,255,.70);
}

/* Dots */
.dots2026{
  position:absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 20;

  display:flex;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.dots2026 label{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(21,24,29,.35);
  cursor:pointer;
}

/* Active dot */
#slide1:checked ~ .dots2026 label[for="slide1"],
#slide2:checked ~ .dots2026 label[for="slide2"],
#slide3:checked ~ .dots2026 label[for="slide3"]{
  background: #0063a6;
  box-shadow: 0 0 0 6px rgba(0,99,166,.18);
}


.btn2026{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 4px 8px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 650;
  text-decoration: none;

  transition: all .25s ease;
  cursor: pointer;
}
.btn2026--primary{
  background: linear-gradient(
    180deg,
    #f7c55a 0%,
    #f0a83a 45%,
    #e68a00 100%
  );

  color: #111;
  border: 1px solid #c87f00;

  box-shadow:
    0 2px 0 #b36a00,
    0 8px 20px rgba(0,0,0,.18);
}

.btn2026--primary:hover{
  background: linear-gradient(
    180deg,
    #f5b948 0%,
    #e79a27 45%,
    #d97800 100%
  );
}
/*.btn2026--primary::after{
  content: "→";
  margin-left: 6px;
  transition: transform .25s ease;
}*/
.btn2026--primary:active{
  background: #d97800;
  box-shadow:
    0 1px 0 #b36a00,
    inset 0 2px 4px rgba(0,0,0,.22);
  transform: translateY(1px);
}
.btn2026--secondary{
  background: rgba(0,0,0,.06);
  color: #15181d;
  border: 1px solid rgba(0,0,0,.10);

  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
/*.btn2026--secondary::after{
  content: "→";
  margin-left: 6px;
  transition: transform .25s ease;
}*/

.btn2026--secondary:hover::after{
  transform: translateX(4px);
}

@media (max-width: 900px){

  .hero2026{
    height: auto;
    min-height: 0;
  }

  .slides2026{
    height: auto;
  }

  .slide2026{
    flex-direction: column;
    min-height: 0;
    position: relative;
  }

  /* IMAGE TOP */
  .slide-image{
    order: 1;
    width: 100%;
    flex: 0 0 auto;

    /* give it real height */
    height: 54vw;          /* responsive */
    min-height: 260px;
    max-height: 440px;

    background-size: cover;
    background-position: center;

    /* helps when we overlap content */
    position: relative;
  }

  /* Fade at the bottom of the image (so text reads well) */
  .slide-image::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background: linear-gradient(
      180deg,
      rgba(245,245,245,0) 0%,
      rgba(245,245,245,0) 55%,
      rgba(245,245,245,.90) 82%,
      var(--page-bg) 100%
    );
  }

  /* TEXT UNDER, PULLED UP INTO IMAGE */
  .slide-content{
    order: 2;
    width: 100%;
    flex: 0 0 auto;

    padding: 18px 16px 22px;

    /* this is the overlap */
    margin-top: -56px;       /* adjust: -40 to -90 depending how “in” you want it */
    z-index: 5;

    /* readable card */
    background: rgba(245,245,245,.92);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    box-shadow: 0 14px 38px rgba(0,0,0,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .slide-content h1{
    font-size: clamp(34px, 9vw, 54px);
  }

  /* OPTIONAL: move dots up so they sit on the image (feels more "carousel") */
  .dots2026{
    bottom: 14px;
    z-index: 30;
  }

  /* OPTIONAL: keep arrows centered on the image area */
  .arrow{
    top: calc((54vw / 2));         /* approx vertical center of image */
    transform: translateY(-50%);
    z-index: 30;
  }

  /* prevent arrows going too high/low on very small screens */
  @supports (top: clamp(0px, 0px, 0px)){
    .arrow{
      top: clamp(140px, 27vw, 220px);
    }
  }
}