/* =========================
   Banner (image only)
========================= */
.pnk-banner{
  position: relative;
  height: clamp(240px, 34vw, 620px);
  overflow: hidden;
}

.pnk-banner-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.0) 40%),
    var(--bn);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

/* =========================
   Divider
=========================
.section-divider{ padding: 0; }
.section-divider .container{ position: relative; }
.section-divider span{
  display:block;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(231,235,241,.95), transparent);
  position: relative;
}
.section-divider span::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(192 42 48), transparent);
}
.section-divider span::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgb(192 42 48);
  box-shadow: 0 10px 26px rgba(2,8,23,.06);
} */



/* =========================
   Intro
========================= */
.pnk-intro-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:start;
}

.pnk-h1{
  margin: 10px 0 10px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 950;
  font-size: clamp(32px, 4vw, 40px);
}

.pnk-chips{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pnk-chips span{
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(231,235,241,.95);
  box-shadow: 0 10px 26px rgba(2,8,23,.04);
  color: rgba(11,18,32,.78);
}

.pnk-para{
  margin: 12px 0 0;
  line-height: 1.75;
  max-width: 70ch;
}

.pnk-mission{
  margin-top: 14px;
  border-radius: 18px;
  background:#fff;
  border: 1px solid rgb(240 211 212);
  box-shadow: 0 10px 26px rgba(2,8,23,.05);
  padding: 14px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.pnk-ic{
  width: 24px; height: 24px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: rgb(240 211 212);
  border: 1px solid rgb(192 42 48);
  color: rgb(192 42 48);
  font-weight: 950;
  flex: 0 0 auto;
  margin-top: 2px;
}

.pnk-cta-row{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}

.pnk-textlink{
  font-weight: 900;
  color: rgba(20,184,166,.95);
  text-decoration: none;
}
.pnk-textlink:hover{ text-decoration: underline; }

.pnk-site{ margin-top: 10px; }
.pnk-site a{
  color: rgb(192 42 48);
  font-weight: 900;
  text-decoration: none;
}
.pnk-site a:hover{ text-decoration: underline; }

/* right side */
.pnk-figure{
  border-radius: 26px;
  overflow:hidden;
  background:#fff;
  border: 1px solid rgba(231,235,241,.95);
  box-shadow: 0 18px 54px rgba(2,8,23,.10);
  position: relative;
}
.pnk-figure img{
  width:100%;
  height: clamp(300px, 30vw, 300px);
  object-fit: cover;
  display:block;
}
.pnk-figure__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.pnk-badge{
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  background: rgba(20,184,166,.95);
  color:#fff;
  box-shadow: 0 12px 26px rgba(2,8,23,.18);
}

.pnk-mini{
  margin-top: 12px;
  border-radius: 22px;
  background:#fff;
  border: 1px solid rgba(231,235,241,.95);
  box-shadow: 0 10px 26px rgba(2,8,23,.05);
  padding: 14px;
  display:grid;
  gap: 10px;
}
.pnk-mini-row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(231,235,241,.95);
}
.pnk-mini-k{
  font-weight: 900;
  color: rgba(11,18,32,.68);
}
.pnk-mini-v{
  font-weight: 950;
  color: rgba(11,18,32,.90);
  text-align: right;
}

/* =========================
   LIGHT PROOF SECTION
   ========================= */

.pnk-proof-light{
  background: #f6f7fb; /* very soft background */
  padding:100px 0;
}

/* optional: 如果你要 bg image，用这个代替 background */
/*
.pnk-proof-light{
  background: url('/assets/img/light-texture.png') center/cover no-repeat;
}
*/

.pnk-proof-light-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:28px;
  margin-top:50px;
}

/* CARD */
.pnk-proof-light-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:36px 26px;
  text-align:center;
  box-shadow: 0 8px 22px rgba(2,8,23,.05);
  transition: all .25s ease;
}

/* hover effect */
.pnk-proof-light-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(2,8,23,.10);
  border-color: var(--primary);
}

/* icon */
.pnk-proof-light-icon{
  width:80px;
  height:80px;
  margin:0 auto 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background: rgba(192,42,48,.06);
  border:1px solid rgba(192,42,48,.15);
  transition: all .25s ease;
}

.pnk-proof-light-icon svg{
  width:48px;
  height:48px;
  stroke: var(--primary);
  transition: transform .25s ease;
}

/* icon hover animation */
.pnk-proof-light-card:hover .pnk-proof-light-icon{
  background: rgba(192,42,48,.10);
  border-color: var(--primary);
}

.pnk-proof-light-card:hover svg{
  transform: scale(1.08);
}

/* title */
.pnk-proof-light-card h3{
  font-size:18px;
  font-weight:750;
  margin-bottom:12px;
}

/* text */
.pnk-proof-light-card p{
  font-size:14.5px;
  line-height:1.7;
}

/* responsive */
@media (max-width:1100px){
  .pnk-proof-light-grid{
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width:640px){
  .pnk-proof-light-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   Why
========================= */
.pnk-why-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:start;
}
.pnk-checklist{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}
.pnk-check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(11,18,32,.78);
  line-height: 1.7;
}
.pnk-check-ic{
  width: 22px; 
  height: 30px;
  border-radius: 999px;
  display:grid; place-items:center;
      background: rgb(246 226 227);
    border: 1px solid rgb(192 42 48);
    color: rgb(192 42 48);
  font-weight: 950;
  flex: 0 0 auto;
  margin-top: 2px;
}
.pnk-note{ margin-top: 12px; }

.pnk-why-card{
  border-radius: 22px;
  background:#fff;
      background: rgb(243 233 233);
    border: 1px solid rgb(192 42 48);
  padding: 18px;
}
.pnk-why-title{ font-weight: 950; margin-bottom: 8px; }
.pnk-why-pills{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pnk-why-pills span{
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(20,184,166,.06);
  border: 1px solid rgba(20,184,166,.16);
  color: rgba(11,18,32,.78);
}

/* =========================
   Range
========================= */
.pnk-range-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pnk-range-card{
  border-radius: 22px;
  background:#fff;
  border: 1px solid rgba(231,235,241,.95);
  box-shadow: 0 10px 26px rgba(2,8,23,.05);
  padding: 18px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.pnk-range-name{ margin:0 0 6px; font-weight: 950; }
.pnk-range-benefit{ margin:0; line-height: 1.7; }

.pnk-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pnk-tags span{
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(20,184,166,.06);
  border: 1px solid rgba(20,184,166,.16);
  color: rgba(11,18,32,.78);
}
.btn-sm{
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
}

/* =========================
   Quality
========================= */
.pnk-quality-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:start;
}
.pnk-bullets {
    margin: 14px 0 0;
    padding-left: 18px;
    color: rgb(0 0 0);
    line-height: 1.8;
    font-style: italic;
}
.pnk-quality-card{
  border-radius: 22px;
  background:#fff;
  border: 1px solid rgba(231,235,241,.95);
  box-shadow: 0 10px 26px rgba(2,8,23,.05);
  padding: 18px;
}
.pnk-quality-title{ font-weight: 950; margin-bottom: 8px; }
.pnk-quality-mini{
  margin-top: 12px;
  display:grid;
  gap: 10px;
  color: rgba(11,18,32,.74);
}
.pnk-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
  background: rgba(20,184,166,.95);
  margin-right: 10px;
  position: relative;
  top: 1px;
}

/* =========================
   Final
========================= */
.pnk-final-card{
  border-radius: 22px;
  background:#fff;
  border: 1px solid rgba(231,235,241,.95);
  box-shadow: 0 10px 26px rgba(2,8,23,.05);
  padding: 18px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.pnk-final-actions{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}

/* =========================
   Responsive
========================= */
@media (max-width: 1100px){
  .pnk-intro-grid,
  .pnk-why-grid,
  .pnk-quality-grid{
    grid-template-columns: 1fr;
  }
  .pnk-proof-grid{ grid-template-columns: 1fr; }
  .pnk-range-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .with-ornaments::before,
  .with-ornaments::after{
    opacity: .20;
    filter: none;
  }
}

.final-cta-content--stack{
  justify-content:flex-start;
}

.final-copy{
  max-width:780px;
}

.final-points{
  margin:18px 0 0;
  padding-left:20px;
  color:#fff;
  line-height:1.9;
}

.final-points li{
  margin:4px 0;
}

.final-cta-content--stack .final-sub{
  margin-bottom:8px;
}

.final-cta-bg {
    padding: 90px 0;
}

/*section 2 - kids*/
/* =========================
   PNKIDS SECTION 2
   full-width left image + gradient
========================= */
.pnk-positioning-split{
  background:#fff;
  padding: 0;
}

.pnk-positioning-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
  background:#fff;
}

.pnk-positioning-media{
  position: relative;
  background-image: var(--pnk-pos-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.pnk-positioning-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 58%, rgba(255,255,255,.18) 78%, rgba(255,255,255,.96) 100%);
  pointer-events:none;
}

.pnk-positioning-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(11,18,32,.06), rgba(11,18,32,.06)),
    radial-gradient(circle at top left, rgba(20,184,166,.10), transparent 28%);
  pointer-events:none;
}

.pnk-positioning-text{
  background:#fff;
  display:flex;
  align-items:center;
  padding: 72px 0;
}

.pnk-positioning-inner{
  width:min(620px,100%);
  padding-left: 54px;
  padding-right: max(20px, calc((60vw - 1200px)/2));
}

.pnk-positioning-inner h2{
  margin:0;
}

.pnk-positioning-inner .subhead{
  margin-top:12px;
}

.pnk-positioning-list{
  margin-top:20px;
  display:grid;
  gap:12px;
}

.pnk-positioning-item{
  display:grid;
  grid-template-columns: 24px 1fr;
  gap:10px;
  align-items:start;
  color: rgba(11,18,32,.78);
  line-height: 1.8;
}

.pnk-positioning-ic{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
  color: #fff;
  background: rgb(192 42 48);
  margin-top:4px;
}

.pnk-positioning-note{
  margin-top:18px;
}

/* mobile */
@media (max-width: 1100px){
  .pnk-positioning-row{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .pnk-positioning-media{
    min-height: 320px;
  }

  .pnk-positioning-media::after{
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(255,255,255,.14) 76%, rgba(255,255,255,.96) 100%);
  }

  .pnk-positioning-text{
    padding: 40px 0;
  }

  .pnk-positioning-inner{
    width:100%;
    padding: 0 20px;
  }
}

@media (max-width: 640px){
  .pnk-positioning-media{
    min-height: 260px;
  }
}

/* =========================
   PNKIDS SECTION 4 - 360 SYSTEM
========================= */
.pnk360 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgb(255 255 255 / 47%), rgba(255, 255, 255, .90)), url(https://www.incontech.com.sg/assets/img/sky-bg.jpg) center center / cover no-repeat;
}
.pnk360::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(33,168,255,.08), transparent 24%),
    radial-gradient(circle at bottom right, rgba(255,34,140,.06), transparent 22%);
  pointer-events: none;
}

.pnk360 .container{
  position: relative;
  z-index: 1;
}

.pnk360-head{
  max-width: 920px;
  margin: 0 auto 30px;
  text-align: center;
}

.pnk360-intro{
  max-width: 880px;
  margin: 16px auto 0;
  color: rgba(11,18,32,.72);
  line-height: 1.85;
}

.pnk360-visual-wrap{
  display: flex;
  justify-content: center;
  margin: 0 auto 34px;
}

.pnk360-visual{
  width: min(860px, 100%);
  border-radius: 36px;
  position: relative;
  overflow: hidden;
  padding: 34px 28px;
  border: 1px solid rgba(221,228,238,.95);
  box-shadow: 0 24px 60px rgba(2,8,23,.08);
  background:
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)),
    url("https://www.incontech.com.sg/assets/img/360_bg.png") center center / cover no-repeat;
  isolation: isolate;
}

/* soft layer to help transparent PNG text show */
.pnk360-visual::before{
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 28px;
  background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.12));
  pointer-events: none;
  z-index: 0;
}

/* gloss */
.pnk360-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.26), transparent 42%);
  pointer-events: none;
  z-index: 0;
}

.pnk360-visual-badge{
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(221,228,238,.95);
  box-shadow: 0 8px 18px rgba(2,8,23,.05);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(11,18,32,.78);
}

.pnk360-visual img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  height: auto;
  background: transparent;
}

.pnk360-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.pnk360-card{
  background: #fff;
  border: 1px solid rgba(231,235,241,.95);
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(2,8,23,.05);
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pnk360-card::before{
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(circle at 16% 12%, rgba(33,168,255,.08), transparent 42%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.pnk360-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(2,8,23,.09);
  border-color: rgba(33,168,255,.18);
}

.pnk360-card:hover::before{
  opacity: 1;
}

.pnk360-card-no{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #1aa8ff, #1b8cff);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  position: relative;
  z-index: 1;
}

.pnk360-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.35;
  color: rgba(11,18,32,.92);
  position: relative;
  z-index: 1;
}

.pnk360-card p{
  margin: 0;
  color: rgba(11,18,32,.72);
  line-height: 1.78;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.pnk360-closing{
  max-width: 980px;
  margin: 24px auto 0;
  padding: 18px 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(33,168,255,.06), rgba(68,210,120,.07));
  border: 1px solid rgba(231,235,241,.95);
  box-shadow: 0 10px 24px rgba(2,8,23,.04);
  text-align: center;
  color: rgba(11,18,32,.82);
  line-height: 1.82;
  font-weight: 700;
}

/* Reveal states */
.reveal-scale,
.reveal-up{
  opacity: 0;
  will-change: transform, opacity;
}

.reveal-scale{
  transform: translateY(18px) scale(.9);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1);
}

.reveal-up{
  transform: translateY(28px);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);
}

.reveal-scale.is-visible,
.reveal-up.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Responsive */
@media (max-width: 1200px){
  .pnk360-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .pnk360-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pnk360-visual{
    padding: 20px 16px;
    border-radius: 26px;
  }

  .pnk360-visual::before{
    inset: 10px;
    border-radius: 18px;
  }
}

@media (max-width: 640px){
  .pnk360-grid{
    grid-template-columns: 1fr;
  }

  .pnk360-visual{
    padding: 14px 10px;
    border-radius: 22px;
  }

  .pnk360-visual::before{
    inset: 8px;
    border-radius: 14px;
  }

  .pnk360-card{
    padding: 18px 16px;
  }

  .pnk360-closing{
    padding: 16px 18px;
  }
}

/* =========================
   KLAB SECTION 6
========================= */
.klab-retail-split{
  background: #fff;
  padding: 0;
}

.klab-retail-row{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
}

.klab-retail-row::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--klab-retail-bg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
  z-index: 0;
}

.klab-retail-row::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,250,248,1) 0%,
      rgba(255,250,248,.98) 30%,
      rgba(255,250,248,.92) 50%,
      rgba(255,250,248,.75) 68%,
      rgba(255,250,248,.45) 85%,
      rgba(255,250,248,.15) 100%
    ),
    linear-gradient(180deg, rgba(11,18,32,.03), rgba(11,18,32,.03));
  z-index: 1;
}

.klab-retail-text{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 78px 0;
}

.klab-retail-text::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.18) 44%,
      rgba(255,255,255,0) 100%
    );
  pointer-events: none;
  z-index: 0;
}

.klab-retail-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  padding-left: max(20px, calc((85vw - 1200px)/2));
  padding-right: 54px;
}

.klab-retail-media{
  position: relative;
  z-index: 2;
}

.klab-retail-slider{
  margin-top: 24px;
}

.klab-retail-slides{
  position: relative;
  min-height: 280px;
}

.klab-retail-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
  border-radius: 28px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(231,235,241,.95);
  box-shadow: 0 18px 40px rgba(2,8,23,.07);
  padding: 24px;
  overflow: hidden;
}

.klab-retail-slide::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 14% 12%, rgba(192,42,48,.10), transparent 36%);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events:none;
}

.klab-retail-slide.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.klab-retail-slide.is-active::before{
  opacity: 1;
}

.klab-retail-slide-no{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #c02a30, #c02a30);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  position: relative;
  z-index: 1;
}

.klab-retail-slide-body{
  position: relative;
  z-index: 1;
}

.klab-retail-slide-body h3{
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.3;
  color: rgba(11,18,32,.92);
}

.klab-retail-slide-body p{
  margin: 0;
  color: rgba(11,18,32,.74);
  line-height: 1.85;
}

.klab-retail-dots{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.klab-retail-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(11,18,32,.16);
  transition: transform .2s ease, background .2s ease;
}

.klab-retail-dot.is-active{
  background: #c02a30;
  transform: scale(1.15);
}

.klab-retail-closing{
  margin-top: 20px;
  line-height: 1.85;
  max-width: 580px;
}

.klab-retail-actions{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* =========================
   PNKIDS SECTION 6
========================= */
.pnkids-retail-split{
  background: #fff;
  padding: 0;
}

.pnkids-retail-row{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
}

.pnkids-retail-row::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pnkids-retail-bg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
  z-index: 0;
}

.pnkids-retail-row::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,250,248,1) 0%,
      rgba(255,250,248,.98) 30%,
      rgba(255,250,248,.92) 50%,
      rgba(255,250,248,.75) 68%,
      rgba(255,250,248,.45) 85%,
      rgba(255,250,248,.15) 100%
    ),
    linear-gradient(180deg, rgba(11,18,32,.03), rgba(11,18,32,.03));
  z-index: 1;
}

.pnkids-retail-text{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 78px 0;
}

.pnkids-retail-text::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.18) 44%,
      rgba(255,255,255,0) 100%
    );
  pointer-events: none;
  z-index: 0;
}

.pnkids-retail-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  padding-left: max(20px, calc((85vw - 1200px)/2));
  padding-right: 54px;
}

.pnkids-retail-media{
  position: relative;
  z-index: 2;
}

.pnkids-retail-slider{
  margin-top: 24px;
}

.pnkids-retail-slides{
  position: relative;
  min-height: 280px;
}

.pnkids-retail-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
  border-radius: 28px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(231,235,241,.95);
  box-shadow: 0 18px 40px rgba(2,8,23,.07);
  padding: 24px;
  overflow: hidden;
}

.pnkids-retail-slide::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 14% 12%, rgba(192,42,48,.10), transparent 36%);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events:none;
}

.pnkids-retail-slide.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pnkids-retail-slide.is-active::before{
  opacity: 1;
}

.pnkids-retail-slide-no{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #c02a30, #c02a30);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  position: relative;
  z-index: 1;
}

.pnkids-retail-slide-body{
  position: relative;
  z-index: 1;
}

.pnkids-retail-slide-body h3{
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.3;
  color: rgba(11,18,32,.92);
}

.pnkids-retail-slide-body p{
  margin: 0;
  color: rgba(11,18,32,.74);
  line-height: 1.85;
}

.pnkids-retail-dots{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.pnkids-retail-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(11,18,32,.16);
  transition: transform .2s ease, background .2s ease;
}

.pnkids-retail-dot.is-active{
  background: #c02a30;
  transform: scale(1.15);
}

.pnkids-retail-closing{
  margin-top: 20px;
  line-height: 1.85;
  max-width: 580px;
}

.pnkids-retail-actions{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* shared responsive */
@media (max-width: 1100px){
  .klab-retail-row,
  .pnkids-retail-row{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .klab-retail-media,
  .pnkids-retail-media{
    display: none;
  }

  .klab-retail-text,
  .pnkids-retail-text{
    padding: 48px 0;
  }

  .klab-retail-row::after,
  .pnkids-retail-row::after{
    background:
      linear-gradient(
        180deg,
        rgba(255,249,252,.92) 0%,
        rgba(255,249,252,.82) 24%,
        rgba(255,249,252,.58) 52%,
        rgba(255,249,252,.22) 78%,
        rgba(255,249,252,.08) 100%
      ),
      linear-gradient(180deg, rgba(11,18,32,.04), rgba(11,18,32,.04));
  }

  .klab-retail-inner,
  .pnkids-retail-inner{
    width: 100%;
    padding: 0 20px;
  }
}

@media (max-width: 768px){
  .klab-retail-slides,
  .pnkids-retail-slides{
    min-height: 320px;
  }

  .klab-retail-slide,
  .pnkids-retail-slide{
    padding: 20px;
  }

  .klab-retail-slide-body h3,
  .pnkids-retail-slide-body h3{
    font-size: 20px;
  }
}

@media (max-width: 640px){
  .klab-retail-slides,
  .pnkids-retail-slides{
    min-height: 350px;
  }

  .klab-retail-actions,
  .pnkids-retail-actions{
    flex-direction: column;
  }

  .klab-retail-actions .btn,
  .pnkids-retail-actions .btn{
    width: 100%;
    justify-content: center;
  }
}