:root {
    --text-primary: #ffffff;
    --accent-dark: #27213c;
    --container-max: 1440px;
    --container-padding: 80px;
    --blur: 22px;
  
    --body-bg: #ffffff;
    --section-bg: #f8f7fb;
    --text-main: #17161f;
    --text-muted: #5f616b;
    --btn-dark-bg: #231f36;
  }
  
  * {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background: var(--body-bg);
    font-family: "Inter Tight", sans-serif;
    color: var(--text-primary);
    overflow-x: hidden;
  }
  
  /* GLOBAL CONTAINER */
  .page-container {
    width: 100%;
    overflow:hidden;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 10vw;
    padding-right: 10vw;
    position: relative;
  }
  
  /* NAVBAR — ABSOLUTE ON HERO ONLY */
  .navbar-wrapper {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding-left: 10vw;
    padding-right: 10vw;
    max-width: unset;
    z-index: 10;
  }
  
  .navbar {
    height: 75px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(var(--blur));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    font-family: 'Inter Tight';

  }
  
  .nav-left img {
    height: 34px;
  }
  
  .nav-center {
    display: flex;
    gap: 34px;
  }
  
  .nav-item {
    font-size: 14px;
    opacity: 0.85;
    cursor: pointer;
    transition: opacity 0.3s;
    font-family: 'Inter Tight';

  }
  
  .nav-item:hover {
    opacity: 1;
  }
  
  .nav-right {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  
  .btn-register {
    font-family: "Inter Tight", sans-serif;
    color: #27213C !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 31.28px;
    letter-spacing: -0.16px;
    padding: 8px 24px;
    border-radius: 50px;
    background: white;
    border: none;
    cursor: pointer;
  }
  
  /* MOBILE MENU ICON */
  .hamburger {
    display: none;
    font-size: 28px;
    cursor: pointer;
    opacity: 0.9;
    border: none;
    background: none;
    color: #fff;
  }
  
  .circle-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #27213C;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  /* ============================= */
  /* FULLSCREEN MOBILE NAV OVERLAY */
  /* ============================= */
  .mobile-nav-overlay {
    position: fixed;
    font-family: "Inter Tight", sans-serif;

    top: 0;
    left: 0;
    width: 100%;
    max-height: 90vh;
    background: #27213c;
    z-index: 999;
    transform: translateY(-100%);
    transition: transform 0.35s ease;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    overflow-y: auto;
    display: none; /* enabled in media query */
  }
  
  .mobile-nav-overlay.open {
    transform: translateY(0);
  }
  
  .mobile-nav-inner {
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  
  .mobile-nav-header {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 10px;
  }
  
  .mobile-nav-header img {
    height: 40px;
  }
  
  .mobile-close {
    position: fixed;
    right: 10px;
    top: 10px;
    font-size: 30px;
    background: none;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  
  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 28px;
    text-align: center;
    margin-top: 30px;
  }
  
  .mobile-nav-links a {
    color: #fff;
    font-size: 17px;
    text-decoration: none;
  }
  
  .mobile-nav-cta {
    margin-top: auto;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  
  .mobile-register {
    background: #fff;
    color: #000 !important;
    border-radius: 40px;
    padding: 12px 36px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
  }
  
  .mobile-login {
    color: #fff;
    text-decoration: underline;
    font-size: 15px;
  }
  
  /* HERO SECTION */
  .hero {
    position: relative;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden; /* protect from any horizontal shift */
  }
  
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
  }
  
  .hero-content {
    margin-bottom: 90px;
    max-width: 600px;
    position: relative;
    z-index: 2;
    margin-left: 10vw;
  }
  
  .hero-title {
    font-size: 102px;
    font-weight: 400;
    line-height: 100%;
    margin: 0 0 25px 0;
  }
  
  .hero-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 25px 0;
  }
  
  .hero-sub {
    font-size: 20px;
    line-height: 34px;
    opacity: 0.9;
    margin-bottom: 40px;
  }
  
  .hero-btn {
    height: 46px;
    padding-left: 22px;
    padding-right: 6px;
    border-radius: 50px;
    background: white;
    color: #111 !important;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .hero-btn .icon {
    width: 28px;
    height: 28px;
    background: var(--accent-dark);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* =============== */
  /* WHAT IS KINRALAB */
  /* =============== */
  
  .section-what {
    background: #ffffff;
    color: var(--text-main);
    padding-top: 120px;
    padding-bottom: 90px;
    margin-right: 0px;
    padding-right: 0px;
  }
  
  /* 3-COLUMN GRID: 40 / 40 / 20 */
  .what-grid-3col {
    display: grid;
    grid-template-columns: 2fr 2.4fr 0.8fr;
    column-gap: 12px;
    align-items: center;
    position: relative; /* for vertical divider */
  }
  
  /* LEFT COLUMN TEXT */
  .what-left-title {
    color: #222;
    leading-trim: both;
    text-edge: cap;
    font-family: "Inter Tight";
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 79px;
    align-self: stretch;
    margin: 0 0 18px 0;
  }
  
  .what-left-intro {
    font-size: 18px;
    line-height: 30px;
    color: var(--text-muted);
    max-width: 420px;
  }
  
  .what-dashed-divider {
    margin: 40px 0 32px;
    border: none;
    border-top: 2px dashed #D9D9D9;
  }
  
  .what-left-body {
    font-size: 17px;
    line-height: 30px;
    color: var(--text-muted);
    max-width: 460px;
    margin-bottom: 28px;
  }
  
  .what-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 32px;
    border-radius: 999px;
    border: none;
    background: var(--btn-dark-bg);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
  }
  
  /* CARDS (MIDDLE & RIGHT COLUMNS) */
  .what-main-card,
  .what-preview-card {
    position: relative;
    margin: 21px;
    padding: 10px;
    clip-path: polygon(12% 0, 100% 0, 100% 80%, 88% 100%, 0 100%, 0 20%);
  }
  
  /* Keep same size ratio for both cards */
  .what-main-inner,
  .what-preview-inner {
    position: relative;
    overflow: hidden;
    border-radius: 24px; /* backup radius */
    clip-path: polygon(12% 0, 100% 0, 100% 80%, 88% 100%, 0 100%, 0 20%);
    background: #27213c;
    aspect-ratio: 4 / 3;
  }
  
  .what-main-inner img,
  .what-preview-inner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  
  /* RIGHT COLUMN: PREVIEW + META */
  .what-preview-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
  }
  
  /* Slider meta + bullets under preview */
  .what-slider-meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #3b3c44;
  }
  
  .what-counter {
    letter-spacing: 0.14em;
    padding-right: 10px;
  }
  
  .what-bullets {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .what-bullet {
    width: 34px;
    height: 3px;
    border-radius: 999px;
    border: none;
    background: #e2e2ea;
    padding: 0;
    cursor: pointer;
  }
  
  .what-bullet.active {
    background: #8B251F;
;
  }
  
  /* small dashed rule at bottom-right, like screenshot */
  .what-dash-right {
    margin-top: 22px;
    border-top: 1px dashed #d7d8e3;
    width: 70%;
    margin-left: auto;
  }
  
  /* VERTICAL DASHED DIVIDER BETWEEN MAIN + PREVIEW (DESKTOP ONLY) */
  @media (min-width: 1101px) {
    .what-main-card{
        max-width: 32vw;
    }

    .what-grid-3col{
        display: grid;
        grid-template-columns: 2fr 2.4fr 0.8fr;
        column-gap: 12px;
        align-items: center;
        position: relative;
        margin-right: 0px;
        padding-right: 0px;
        padding-left: 10vw;
        width: 100vw;
        max-width: unset;
    }
    .what-grid-3col::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      /* boundary between 2fr + 2fr and 1fr: 4/5 of total width */
      left: calc(100% * 4 / 5);
      border-left: 2px dashed #D9D9D9;
    }
  }
  
  /* PREVIEW BEHAVIOR: HALF VISIBLE, FADED (DESKTOP) */
  @media (min-width: 1101px) {
    .what-preview-column {
        position: relative;
        transform: translateX(-24%);
        width: 15vw;
        max-width: unset;
    }
  
    .what-preview-card {
        width: 169%;
        transform: translateX(-3%);
        opacity: 0.95;
    }
  }
  
  /* ============================ */
  /* RESPONSIVE — TABLET / MOBILE */
  /* ============================ */
  
  @media (max-width: 1100px) {
    :root {
      --container-padding: 20px;
    }
  
    .navbar-wrapper {
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
      max-width: 100%;
    }
  
    .nav-center,
    .nav-right {
      display: none;
    }
  
    .navbar {
      height: 60px;
      padding: 0 20px;
    }
  
    .hamburger {
      display: block;
    }
  
    /* enable overlay on mobile */
    .mobile-nav-overlay {
      display: block;
    }
  
    .hero {
      align-items: flex-end;
    }
  
    .hero-content {
      margin-bottom: 40px;
      text-align: left;
    }
  
    .hero-title {
      font-size: 54px;
      line-height: 1.1;
    }
  
    .hero-sub {
      font-size: 17px;
      line-height: 28px;
    }
  
   
  }
  
  @media (max-width: 768px) {
    body,
    html {
      overflow-x: hidden;
    }
  
    .page-container {
      padding-left: 20px;
      padding-right: 20px;
    }
  
    .hero {
      background-image: url("/assets/hero-mobile-op.webp") !important;
      background-position: center;
      background-size: cover;
      
    }
  
    .hero-content {
      max-width: 90%;
    }
  
    .hero-title {
      font-size: 44px;
    }
  
    .hero-sub {
      font-size: 16px;
    }
  
    .what-left-title {
      font-size: 34px;
    }
  
    .what-main-card {
      margin-top: 8px;
    }
  
    .what-slider-meta {
      font-size: 12px;
    }
  
    .what-bullet {
      width: 26px;
    }
  }

  /* =====================================
   WHAT IS KINRALAB — MOBILE OVERRIDE
   ===================================== */
@media (max-width: 768px) {

  .section-what {
    padding: 80px 0 90px;
  }

  .what-grid-3col {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* TEXT */
  .what-left {
    padding: 0 20px;
    text-align: center;
  }

  .what-left-title {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 16px;
  }

  .what-left-intro {
    font-size: 15px;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto 18px;
  }

  .what-dashed-divider {
    width: 60%;
    margin: 18px auto;
  }

  .what-left-body {
    font-size: 15px;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto;
  }

  /* IMAGE AREA → CAROUSEL */
  .what-main-card {
    width: 100%;
    padding: 0 20px;
  }

  .what-main-inner {
    border-radius: 22px;
    overflow: hidden;
    height: 420px;   
  }

  .what-main-inner img {
    width: 100%;
    height: 420px;              /* TALL portrait */
    object-fit: cover;
    display: block;
    border-radius: 22px;
    transition: transform 0.35s ease;
  }

  /* HIDE DESKTOP PREVIEW COLUMN */
  .what-preview-column {
    display: none;
  }

  /* MOBILE INDICATORS */
  .what-slider-meta {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .what-counter {
    display: none; /* matches screenshot */
  }

  .what-bullets {
    display: flex;
    gap: 10px;
  }

  .what-bullet {
    width: 32px;
    height: 3px;
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
    border: none;
    padding: 0;
  }

  .what-bullet.active {
    background: #8B251F;
  }

  @media (max-width: 768px) {

    /* CENTER IMAGE CARD */
    .what-main-card {
      display: flex;
      justify-content: center;
    }
  
    .what-main-inner {
      width: 100%;
      max-width: 360px; /* controls visual width */
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .what-main-inner img {
      width: 100%;
      height: 420px;
      object-fit: cover;
      object-position: center center; /* critical */
      display: block;
    }
  
    /* CENTER INDICATORS RELATIVE TO IMAGE */
    .what-preview-column {
      display: flex;
      justify-content: center;
    }
  
    .what-slider-meta {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    /* SHOW & RELOCATE INDICATORS */
  .what-preview-column {
    display: block;
    order: 3;
  }

  .what-slider-meta {
    margin-top: -10px;
    display: flex;
    justify-content: center;
  }

  .what-counter {
    display: none;
  }

  .what-preview-card{
    display: none;;
  }
  /* INDICATORS */
  .what-bullets {
    display: flex;
    gap: 20px;
  }

  .what-bullet {
    width: 50px;
    height: 4px;
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
    border: none;
    padding: 0;
  }

  .what-bullet.active {
   background: #8B251F;
  }
  }
  
}

  /* ======================================================== */
/* SECTION 3: OUR APPROACH */
/* ======================================================== */

.approach-section {
    background: #FBFBFB;
    color: #27213c;
    padding-top: 20px;
    padding-bottom: 20vh;
  }
  
  @media (min-width: 900px) {

  .approach-title {
    color: #222;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "Inter Tight";
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 79px;
  }
  .approach-me{
    margin-left:10vw;margin-right:10vw;
  }
}
@media (max-width: 900px) {
  .approach-title {
    color: #222;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "Inter Tight";
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 79px;
  }
  .approach-me{
    margin-left:5vw;margin-right:5vw;
  }
}
  /* GRID */
  .approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
  }
  

  /* CARD */
  .approach-card {
    background: #F7F7F7;
    border: 11px solid #ffffff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  }
  
  .approach-icon {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    float:left;
  }
  
  .approach-icon img {
    width: 28px;
    height: 28px;
  }
  
  .approach-card-title {
    font-weight: 400;
    font-size: 30px;
    line-height: 79px;
    letter-spacing: 0;
    text-align: left;
    vertical-align: top;
    margin-left: 79px;
    padding-left: 20px;
    margin-top: -4px;
  }
  
  .approach-card-text {
    color: #5f616b;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0;
  }
  
  /* CTA */
  .approach-cta-wrap {
    text-align: center;
    margin-top: 50px;
  }
  
  .approach-cta {
    padding: 12px 34px;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    width: 429px;
    height: 46px;
    padding: 14.154px 4.246px 14.154px 17.692px;
    justify-content: center;
    align-items: center;
    border-radius: 35.385px;
    background: #27213C;

  }
  
  /* RESPONSIVE */
  @media (max-width: 1100px) {
    .approach-grid {
      grid-template-columns: 1fr;
      row-gap: 28px;
    }
  
    .approach-card {
      padding: 28px;
    }
  }

  



  /* ================================================= */
/* SECTION 4 — STYLE WORDS CAROUSEL */
/* ================================================= */

.style-words-section {
    background: #ffffff;
    color: #27213c;
    margin-top: 10vh;
  }
  
  /* TOP TEXT ROW */
  @media(min-width:800px) {
    .style-words-top {
        color: #222;
    font-family: "Inter Tight";
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px; /* 106.667% */
        display: grid;
        grid-template-columns: 2fr 1fr;
        align-items: end;
        margin-bottom: 20vh;
        gap: 40px;
      }
  }
  @media(max-width:800px){
  .style-words-top {
    color: #222;
    leading-trim: both;
    text-edge: cap;
    font-family: "Inter Tight";
    font-size: 39px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px; /* 106.667% */
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    margin-bottom: 0vh;
    gap: 40px;
  }
    .style-words-top-2 {
    color: #222;
    leading-trim: both;
    text-edge: cap;
    font-family: "Inter Tight";
    font-size: 39px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px; /* 106.667% */
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    margin-bottom: 0vh;
    gap: 40px;
  }
  }
  @media (min-width: 800px){
  .style-words-top-2 {
    color: #222;
    font-family: "Inter Tight";
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px; /* 106.667% */
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    align-items: center;
    margin-bottom: 0vh;
    gap: 40px;
  }
}
  @media (min-width:900px) {
    .style-words-title {
        font-size: 45px;
        font-weight: 400;
        line-height: 1.7;
        margin: 0;
        margin-top: 0px;
      }
  }
  @media (max-width:900px) {
    .style-words-title {
        font-size: 40px;
        font-weight: 400;
        line-height: 1.2;
        margin: 0;
        margin-top: -55px;
      }
  }
  
  .style-words-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
/* CLARITY IMAGE HOVER ZOOM */
.clarity-card img {
  transform: scale(1);
  transition: transform 0.6s ease;
  will-change: transform;
}

.clarity-card:hover img {
  transform: scale(1.04);
}

/* Center card slightly more presence */
.clarity-card--center:hover img {
  transform: scale(1.06);
}

  
  @media (max-width: 1000px){
  .style-words-indicators {
    display: none;
    gap: 12px;
  }
  .style-words-desc {
    font-size: 16px;
    color: #5f616b;
    line-height: 28px;
    margin: 0;
  }
  .clarity-mobile-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
  }
  
  .clarity-mobile-indicators .sw-ind {
    width: 50px;
    height: 4px;
    border-radius: 3px;
  }
  
  .clarity-mobile-indicators .sw-ind.active {
    background: #8f2b2b;
  }
  
}
@media (min-width: 1000px){
    .style-words-indicators {
        display: flex;
        gap: 12px;
        display:none;
      }
      .style-words-desc {
        font-size: 1.2vw;
        color: #5f616b;
        line-height: 40px;
        margin: 0;
      }
}
  .sw-ind {
    width: 40px;
    height: 4px;
    border-radius: 6px;
    background: #ccc;
    opacity: 0.5;
  }
  
  .sw-red { background: #8f2b2b; opacity: 1; }
  .sw-brown { background: #b59b7c; }
  .sw-grey { background: #6d6d71; }
  

  /* ===================================================== */
/* SECTION 5 — TESTIMONIALS */
/* ===================================================== */


  @media (max-width: 900px) {
    .section-testimonials {
        background: #fafafa;
        padding-top:10vh;
        padding-bottom: 10vh;
      }
      .testimonials-title {
        text-align: center;
        font-size: 38px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #222;
        leading-trim: both;
        text-edge: cap;
        font-family: "Inter Tight";
        font-size: 45px;
        font-style: normal;
        font-weight: 400;
        line-height: 64px; /* 106.667% */
      }
      

  }
  @media (min-width: 900px) {
  .section-testimonials {
    background: #fafafa;
    padding-top:10vh;
    padding-bottom: 10vh;

  }
  .testimonials-title {
    text-align: center;
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #222;
    leading-trim: both;
    text-edge: cap;
    font-family: "Inter Tight";
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px; /* 106.667% */
  }
}
  
  .testimonials-sub {
    color: #666;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "Inter Tight";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px; /* 170% */
    text-align: center;
    color: #5f616b;
    font-size: 17px;
    margin-bottom: 50px;
  }
  
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  
  .testimonial-card {
    padding: 28px;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  }
  
  .testimonial-card.green { background: #7ca680; }
  .testimonial-card.purple { background: #3f3a58; }
  .testimonial-card.red { background: #8f2b2b; }
  
  .t-card-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 16px;
    font-size: 22px;
    font-weight: 400;
    line-height: 72px;
  }
  
  .t-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .t-name {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 72px;
  }
  
  .t-stars {
    font-size: 14px;
    opacity: 0.9;
  }
  
  .t-text {
    margin-top: 5vh;
    font-size: 16px;
    line-height: 28px;
    opacity: 0.92;
    text-align: justify;
  }
  
  /* MOBILE */
  @media (max-width: 900px) {
    .testimonials-grid {
      grid-template-columns: 1fr;
    }
  }
  
  /* ===================================================== */
  /* SECTION 6 — CTA BANNER */
  /* ===================================================== */
  
  .section-cta-banner {
    padding: 80px 0;
  }
  
  .cta-banner {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #27213c;
    display: flex;
    align-items: stretch;
  }
  
  .cta-image {
    width: 50%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
  }
  
  .cta-banner-content {
    width: 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
  }
  
  .cta-banner-title {
    font-size: 28px;
    line-height: 38px;
    margin: 0 0 20px 0;
  }
  
  .cta-banner-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #000;
    font-size: 18px;
    cursor: pointer;
  }
  
  /* MOBILE CTA BANNER */
  @media (max-width: 900px) {
  
    .cta-banner {
      flex-direction: column;
      height: auto;
    }
  
    .cta-image {
      width: 100%;
      height: 240px;
      border-radius: 0;
    }
  
    .cta-banner-content {
      width: 100%;
      padding: 30px 22px;
    }
  
    .cta-banner-title {
      font-size: 24px;
      line-height: 32px;
    }
  }
  /* ========================================================= */
/* FOOTER */
/* ========================================================= */

.footer-section {
    margin-bottom: 0vw;
    background: #27213C;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    padding: 60px 70px 40px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-top: 25vh;

  }
  
  /* TOP ROW */
  .footer-top-title {
    color: #FFF;
leading-trim: both;
text-edge: cap;
font-family: "Inter Tight";
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 79px; /* 359.091% */
    text-align: left;

  }
  
  .footer-top-sub {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.70);
    text-align: left;
font-family: "Inter Tight";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 175% */
  }
  
  .footer-top-btn {
    position: absolute;
    right: 70px;
    top: 50px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: #fff;
    color: #000;
    cursor: pointer;
    font-size: 20px;
  }
  
  /* DIVIDER */
  .footer-divider {
    border: none;
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 48px 0;
  }
  
  /* GRID */
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;

  }


  .footer-grid  > * {
    position: relative;

}



  .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-col ul li {
    margin: 10px 0;
  }
  
  .footer-col ul li a {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    text-decoration: none;
  }
  
  .footer-heading {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: "Inter Tight";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0px;
  }
  
  /* BRAND COLUMN */
  .footer-logo {
    width: 150px;
    margin-bottom: 18px;
  }
  
  .footer-brand-text {
    max-width: 80%;
    color: rgba(255, 255, 255, 0.70);
    leading-trim: both;
    text-edge: cap;
    font-family: "Inter Tight";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
  }
  
  /* NEWSLETTER */
  .footer-newsletter {
    margin-top: 40px;
    max-width: 380px;
  }
  
  .footer-news-label {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: "Inter Tight";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 28.8px */
  }
  
  .footer-news-box {
    display: flex;
    background: #27213c;
    border-radius: 8px;
    padding: 6px;
    margin-top: 20px;
    height: 10vh;
    font-size: x-large;
  }
  
  .footer-news-box input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    padding-left: 8px;
    outline: none;
  }
  
  .footer-news-btn {
    width: 50px;
    border-radius: 6px;
    background: #fff;
    color: #000;
    border: none;
    cursor: pointer;
  }
  
  /* WATERMARK LARGE LOGO */
  .footer-watermark {
    position: absolute;
    right: 60px;
    top: 180px;
    width: 430px;
    opacity: 0.09;
  }
  
  /* BOTTOM ROW */
  .footer-bottom {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .footer-copy {
    font-size: 13px;
    opacity: 0.6;
  }
  
  .footer-social a {
    margin-left: 16px;
  }
  
  .footer-social img {
    width: 40px;
    opacity: 0.85;
  }
  

  
  /* MOBILE */
  @media (max-width: 900px) {
    .footer-section {
      padding: 40px 30px;
    }
  
    .footer-top-btn {
      right: 30px;
    }
  
    .footer-grid {
      grid-template-columns: 1fr 1fr;
    }
  
    .footer-watermark {
      width: 200px;
      bottom: 120px;
      right: 20px;
    }
  
    .footer-bottom {
      flex-direction: column;
      text-align: center;
      gap: 20px;
    }
  }
  




  /* ========================================================= */
/* CTA BANNER SECTION */
/* ========================================================= */

.cta-banner {
    margin-top: 10vh;
    margin-right: 10vw;
    margin-left: 10vw;
    margin-bottom:10vh;
  }
  
  .cta-banner-inner {
    background: #27213c;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    height: 360px;
    width:100%;
  }
  
  /* IMAGE BOX */
  .cta-img-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .cta-img-box img {
    width: 140%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
  }
  
  /* RIGHT CONTENT */
  .cta-content {
    width: 80%;
    padding-right: 100px;
    text-align: right;
    color: #fff;
    position: relative;
  }
  
  .cta-content h2 {
    font-weight: 400;
    line-height: 60px;
    font-size: 50px;
    margin: 0 0 20px 0;
    margin-bottom: 24px;
  }
  
  /* BUTTON */
  .cta-btn {
    width: 38px;
    height: 38px;
    background: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    color: #000;
    cursor: pointer;
    transition: 0.2s ease;
  }
  
  .cta-btn:hover {
    background: #f1f1f1;
  }
  
  /* ================= MOBILE ================= */
  @media (max-width: 900px) {
    .cta-banner-inner {
      flex-direction: column;
      height: auto;
      padding-bottom: 30px;
      text-align: center;
    }
  
    .cta-img-box,
    .cta-content {
      width: 100%;
    }
  
    .cta-img-box {
      height: 200px;
    }
  
    .cta-content {
      padding: 20px;
      text-align: center;
    }
  
    .cta-content h2 {
      color: #FFF;
      text-align: center;
      leading-trim: both;
      text-edge: cap;
      font-family: "Inter Tight";
      font-size: 38px;
      font-style: normal;
      font-weight: 400;
      line-height: 46px; /* 121.053% */
    }
  }
  /* Container */
.testimonials-container {
  margin-left:10vw;
  margin-right:10vw;
  text-align:center;
}

/* Carousel wrapper */
.testimonials-carousel {
  position:relative;
  height:300px;
  margin-top:50px;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* Base card styling */
.t-card {
  position:absolute;
  width:320px;
  min-height:200px;
  border-radius:20px;
  padding:26px;
  background:white;
  color:#1a1a1a;
  opacity:0;
  transform:scale(.8) translateY(20px);
  transition:all .55s ease;
  box-shadow:0 10px 26px rgba(0,0,0,0.1);
}

/* POSITIONS for circular rotation */
.t-card.left {
  opacity:.6;
  transform:translateX(-260px) scale(.85);
  z-index:1;
}

.t-card.center {
  opacity:1;
  transform:translateX(0) scale(1.15);
  z-index:3;
}

.t-card.right {
  opacity:.6;
  transform:translateX(260px) scale(.85);
  z-index:1;
}

/* Rectangular indicators */
@media(max-width:1000px) {
    .testimonial-bars {
        margin-top:30px;
        display:flex;
        justify-content:center;
        gap:12px;
      }  
}
@media(min-width:1000px) {
    .testimonial-bars {
        margin-top:30px;
        display:none;
        justify-content:center;
        gap:12px;
      }  
}

.t-bar {
  width:40px;
  height:6px;
  border-radius:4px;
  background:#d0d0d0;
  cursor:pointer;
  transition:background .3s;
}


/* MOBILE VERSION: Only show the center card */
@media(max-width:768px){
  .testimonials-carousel {
    height:auto;
    display:flex;
    flex-direction:column;
    padding:0 10px;
  }

  .t-card {
    position:relative;
    width:90%;
    transform:scale(.9);
    margin-bottom:20px;
  }

  .t-card.left,
  .t-card.right {
    display:none;
  }

  .t-card.center {
    transform:scale(1.05);
  }

  .testimonial-bars {
    margin-top:10px;
  }
}
/* Carousel wrapper */
.testimonials-carousel {
    position:relative;
    height:340px;
    margin-top:60px;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  
  /* Base card styling */
  .t-card {
    position:absolute;
    width:27vw;
    max-width:400px;
    min-height:250px;
    border-radius:20px;
    padding:26px;
    background:white;
    color:#ffffff;
    opacity:0;
    transform:scale(.85) translateY(20px);
    transition:all .55s cubic-bezier(0.32, 0.08, 0.24, 1);
    box-shadow:0 14px 34px rgba(0,0,0,0.12);
  }
  
  /* COLOR THEMES — reusing your colors */
  .t-card.green  { background:#a3c1b9; }
  .t-card.purple { background:#27213c; }
  .t-card.red    { background:#8b2520; }
  
  /* DESKTOP POSITIONS — WIDE, NO OVERLAP */
  .t-card.left {
    opacity: 1;
    transform:translateX(-420px) scale(.95);
    z-index:1;
  }
  
  .t-card.center {
    opacity:1;
    transform:translateX(0) scale(0.98);
    z-index:3;
  }
  
  .t-card.right {
    opacity:1;
    transform:translateX(420px) scale(.95);
    z-index:1;
  }
  

  .t-bar {
    width:50px;
    height:6px;
    cursor:pointer;
    background-color: #CCC;
    transition:background .3s;
    border:2px;
  }
 
  .t-bar-2 {
    width:50px;
    height:6px;
    cursor:pointer;
    background-color: #B59B7C;
    transition:background .3s;
    border:2px;
    border-radius: 2px;
  }


  .t-bar.active {
    background:#8f2b2b;
  }
  
  /* MOBILE VERSION: Only show the center card */
  @media (max-width: 768px) {

    .testimonials-carousel {
      position: relative;
      width: 100%;
      height: auto;
      padding: 0;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    /* Show ONLY center card */
    .t-card {
      position: relative;
      width: 92vw;
      max-width: 420px;
      min-height: 240px;
      transform: scale(1) translateX(0) translateY(0);
      opacity: 1 !important;
      z-index: 3;
  
      margin-bottom: 24px;
      left: 0;
      right: 0;
    }
  
    /* Hide left & right cards fully */
    .t-card.left,
    .t-card.right {
      display: none !important;
    }
  
    /* Ensure no absolute weirdness */
    .t-card.center {
      transform: scale(1.05);
    }
  
    /* Indicators centered and spaced */
    .testimonial-bars {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }
  
    .t-bar {
      width:50px;
      height: 6px;
      border-radius: 3px;
      border:2px;
    }
  }
  

  /* =========================================================
   STYLE WORDS CAROUSEL – DESKTOP
========================================================= */
/* Wrapper */
/* WRAPPER */
.style-carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6vw 0;
  }
  
  /* CARD CONTAINER */
  .style-cards {
    position: relative;
    width: 100vw;
    height: 32vw;
    max-height: 530px; 
    display: flex;
    justify-content: center;
    align-items: center;

  }
  
  /* base card */
  .style-card {
    position: absolute;
    width: 28vw;
    height: 25vw;
    max-width: 390px;
    max-height: 400px;
    border-radius: 18px;
    overflow: hidden;
    transition: all .45s ease;
    opacity: .45;
    filter: blur(5px);
    transform: translateY(20px); /* lower side cards */
    border: 6px solid #fff;

  }
  
  /* CENTER CARD — BIGGEST */
  .style-card.active {
    width: 32vw;
    height: 28vw;
    max-width: 420px;
    max-height: 450px;
    border-radius: 22px;
    opacity: 1;
    filter: none;
    transform: translateY(0);
    z-index: 5;
    border: 6px solid #fff;
    box-shadow: 0 10px 36px rgba(0,0,0,0.15), 
                0 0 0 10px #ffffff00;
  }
  
  /* LEFT CARD — closer, blurred */
  .style-card.left {
    transform: translateX(-25vw) translateY(30px) scale(.88);
    opacity: .35;
    z-index: 2;
    rotate: -5deg;
  }
  
  /* RIGHT CARD — closer, blurred */
  .style-card.right {
    transform: translateX(25vw) translateY(30px) scale(.88);
    opacity: .35;
    z-index: 2;
    rotate: 5deg;
  }
  
  .style-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* DESKTOP ARROWS — position tight near the side cards */
  .carousel-btn {
    color: white;
    background: black;
    font-weight: 900;
    font-size: larger;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    z-index: 10;
    transition: .25s;
  }
  
  .left-btn  { left: -3vw;   color: black;
    background: white; }
  .right-btn { right: -3vw; }
  .right-btn:hover { color:#000 !important }
  .carousel-btn:hover {
    background: #efefef;
    color:black !important;
  }
  
  /* MOBILE LAYOUT (unchanged) */
  @media(max-width: 768px) {
    .carousel-btn { display:none; }
  
    .style-cards {
      width: 100%;
      height: 90vw;
    }
  
    .style-card {
      width: 80vw;
      height: 80vw;
      filter: blur(4px);
      border: 6px solid #fff;   /* NEW */

    }
  
    .style-card.active {
      width: 90vw;
      height: 92vw;
      transform: translateY(-10px);
      box-shadow: 0 0 0 8px #fff;
      border: 6px solid #fff;   /* NEW */

    }
  
    .style-card.left {
      transform: translateX(-48vw) translateY(20px) scale(.8);
    }
  
    .style-card.right {
      transform: translateX(48vw) translateY(20px) scale(.8);
    }
  
    .style-carousel-indicators {
      display: flex;
      justify-content: center;
      margin-top: 22px;
    }
  }
  
  /* ==========================================
     INDICATORS (MOBILE ONLY)
  ========================================== */
  .style-carousel-indicators {
    display: none;
    margin-top: 25px;
    text-align: center;
  }
  
  .sw-bar {
    width: 22px;
    height: 4px;
    background: #ccc;
    border-radius: 10px;
    display: inline-block;
    margin: 0 4px;
  }
  
  .sw-bar.active {
    background: #000;
  }
  
  
  /* ==========================================
     MOBILE OPTIMIZATION
  ========================================== */
  @media (max-width: 768px) {
  
    .style-cards {
      gap: 4vw;
    }
  
    .style-card {
      width: 60vw;
      height: 78vw;
      max-width: unset;
      max-height: unset;
    }
}
    /* Hide*
  
  /* =========================================================
   FOOTER — MOBILE OPTIMIZATION
   Applies to screens under 768px width
========================================================= */
@media (max-width: 768px) {

    .footer-section {
      padding: 40px 24px;
      text-align: left;
    }
  
    /* TOP TEXT */
    .footer-top {
      text-align: left;
      padding-right: 0;
    }
  
    .footer-top-title {
      font-size: 22px;
      line-height: 1.3;
      margin-bottom: 10px;
    }
  
    .footer-top-sub {
      font-size: 15px;
      line-height: 1.5;
      margin-bottom: 28px;
    }
  
    /* Fix top-right arrow box */
    .footer-top svg {
      position: relative !important;
      float: none !important;
      margin: 20px auto 0 !important;
      display: block;
      transform: scale(0.9);
    }
  
    /* GRID STACKS */
    .footer-grid {
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  
    .footer-col {
      padding-left: 0 !important;
    }
  
    .footer-logo {
      width: 110px;
      margin-bottom: 14px;
    }
  
    .footer-brand-text {
      font-size: 15px;
      line-height: 1.5;
    }
  
    /* Headings */
    .footer-heading {
      font-size: 17px;
      margin-bottom: 10px;
    }
  
    .footer-col ul li a {
      font-size: 15px;
      line-height: 1.5;
    }
  
    /* WATERMARK */
    .footer-watermark {
      width: 150px;
      opacity: 0.08;
      margin: 40px auto;
      display: block;
      position: relative;
    }
  
    /* BOTTOM ROW */
    .footer-bottom {
      flex-direction: column;
      text-align: center;
      gap: 14px;
    }
  
    .footer-social a img {
      width: 22px;
    }
  }
      /* PREMIUM MOBILE BUTTON */
      .cta-mobile-btn {
        color: #222 !important;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 31.28px; /* 195.5% */
        letter-spacing: -0.16px;
        background: #ffffff;
        color: #000;
        border: none;
        padding: 12px 18px;
        border-radius: 40px;
  
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: fit-content;
        float: right;
        box-shadow: 0 4px 12px rgba(255,255,255,0.1);
      }

      .cta-mobile-icon {
        background: #1C1A23;
        color: #fff;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }
  /* ===================================================== */
/* MOBILE CTA — FULL BACKGROUND IMAGE + RIGHT CONTENT */
/* ===================================================== */

@media (max-width: 768px) {

    .cta-banner {
      margin: 6vh 2vw;
    }
  
    .cta-banner-inner {
      position: relative;
      height: 260px;
      border-radius: 24px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 20px;
        background-image: url(/assets/cta-bg.png);
                background-repeat: no-repeat;
        background-size: cover;
          }
  
    /* Background image fills entire card */
    .cta-img-box {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
  
    .cta-img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left center;
      filter: brightness(0.75);
      display:none;
    }
  
    /* CONTENT ON RIGHT */
    .cta-content {
              width: 100%;
        text-align: center;
        display: flex;
        margin: 0;
        left: auto;
        right: auto;
        align-items: anchor-center;
        flex-direction: column;
        gap: 16px;
    }
  
    /* PREMIUM MOBILE BUTTON */
    .cta-mobile-btn {
        color: #222 !important;
    font-family: Inter Tight, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 31.28px;
   /* letter-spacing: 1.1px; */
    text-align: center;
    width: 100%;
    display: block;
    max-width: 260px;
    background: #ffffff;
    border: none;
    padding: 8px 10px;
    border-radius: 40px;
    float: none;
      box-shadow: 0 4px 12px rgba(255,255,255,0.1);
    }
  
    .cta-mobile-icon {
      display:none;
      /*background: #1C1A23;
      color: #fff;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px; */
    }
  
    /* Hide desktop button on mobile */
    .cta-content .hero-btn {
      display: none;
    }
  }
  

  /* =============================================== */
/* MOBILE VERSION — Footer redesign                */
/* =============================================== */
@media (max-width: 768px) {

    .footer-section {
      background: #27213C;
      width: 100vw !important;
      padding: 40px 20px;
      border-radius: 24px 24px 0 0;
      text-align: center;
      margin-top:15vh;
    }
  
    /* ======================== */
    /* TOP SECTION FIX          */
    /* ======================== */
  
    .footer-top {
      text-align: center;
      margin-bottom: 32px;
    }
  
    .footer-top-title {
      font-size: 20px !important;
      font-weight: 600;
      margin-bottom: 12px;
    }
  
    .footer-top-sub {
      font-size: 14px !important;
      line-height: 22px;
      margin-bottom: 24px;
    }
  
    /* Replace floating arrow with full CTA button */
    .footer-top svg {
      display: none !important;
    }


    .footer-top-btn-mobile {
      display: inline-block;
      background: white;
      color: #000000 !important;
      padding: 14px 24px;
      border-radius: 40px;
      font-size: 15px;
      font-weight: 500;
      width: 100%;
      max-width: 260px;
    
  }
    /* Divider */
    .footer-divider {
      margin: 32px auto;
      width: 90%;
      border-color: rgba(255,255,255,0.14);
    }
  
    /* ======================== */
    /* LOGO + DESCRIPTION       */
    /* ======================== */
  
    .footer-logo {
      width: 150px;
      margin: 0 auto 16px;
      display: block;
    }
  
    .footer-brand-text {
      font-size: 14px;
      line-height: 22px;
      opacity: 0.85;
      max-width: 260px;
      margin: 0 auto 24px;
    }
  
    /* ======================== */
    /* GRID STACKING            */
    /* ======================== */
   
    .footer-grid {
      display: flex;
      flex-direction: column;
      gap: 32px;
      margin: 0;
      padding: 0 !important;
    }
  
    .footer-col {
      padding: 0 !important;
    }
  
    .footer-heading {
      font-size: 16px;
      margin-bottom: 10px;
      font-weight: 600;
      text-align: center;
    }
  
    .footer-col ul {
      padding: 0;
      list-style: none;
      margin: 0;
    }
  
    .footer-col ul li {
      margin-bottom: 8px;
    }
  
    .footer-col ul li a {
      font-size: 14px;
      color: #fff;
      opacity: 0.85;
    }
  
    /* ======================== */
    /* WATERMARK IMAGE          */
    /* ======================== */
  
    .footer-watermark {
      display: none;
    }
  
    /* ======================== */
    /* BOTTOM SOCIAL + COPYRIGHT */
    /* ======================== */
  
    .footer-bottom {
      margin-top: 32px;
      text-align: center;
    }
  
    .footer-copy {
      font-size: 12px;
      opacity: 0.6;
    }
  
    .footer-social {
      margin-top: 14px;
      display: flex;
      justify-content: center;
      gap: 22px;
    }
  
    .footer-social img {
      width: 20px;
      height: 20px;
    }
  }

  @media (min-width: 769px) {

    .footer-top-btn-mobile {
      display: inline-block;
      background: rgba(247, 247, 247, 0);
      color: #00000000 !important;
      padding: 14px 24px;
      border-radius: 40px;
      font-size: 15px;
      font-weight: 500;
      width: 100%;
      max-width: 260px;
    }
    /* Reset footer grid to 4 columns */
    .footer-grid {
      display: grid !important;
      grid-template-columns: 1.4fr 1fr 1fr 1fr; /* adjust ratios as you like */
  
    }
  
    /* Restore each column */
    .footer-col {
      width: auto !important;
      text-align: left !important;
      padding-left: 0 !important;
      margin: 0 !important;
    }
  
    /* Remove mobile behaviors */
    .footer-mini-row {
      display: contents !important;  /* flatten children into grid */
    }
  
    .footer-mobile-divider {
      display: none !important;
    }
  
  }
  /* ========================= */
/* MOBILE ONLY — up to 768px */
/* ========================= */
@media (max-width: 768px) {

    /* Footer grid becomes vertical stack */
    .footer-grid {
      display: flex;
      flex-direction: column;
      gap: 0px;
      padding: 0 6vw;
    }
  
    .footer-col {
      padding: 0;
      margin: 0 auto;
      width: 100%;
      text-align: center;
    }
  
    /* BRAND — full width */
    .footer-col.brand {
      width: 100%;
      text-align: center;
    }
  
    /* Navigation — full width */
    .footer-col.navigation {
      width: 100%;
      text-align: center;
    }
  
    /* Horizontal dividers for mobile only */
    .footer-mobile-divider {
      display: block;
      width: 90%;
      border: none;
      border-top: 1px solid rgba(255,255,255,0.12);
      margin: 24px auto;
    }
  
    /* Two-column row for Company + Legal */
    .footer-mini-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      gap: 24px;
    }
  
    .footer-col.company,
    .footer-col.legal {
      width: 50%;
      text-align: center;
    }
  }
  
  /* ========================= */
  /* DESKTOP — restore layout  */
  /* ========================= */
  @media (min-width: 769px) {
    .footer-mobile-divider {
      display: none !important;
    }
  
    .footer-mini-row {
      display: block; /* prevents mobile flex from affecting desktop */
    }
  
    .footer-col.brand {
        width: auto;
        text-align: left;
    }
    .footer-col.company,
    .footer-col.legal,
    .footer-col.navigation{
      width: auto;
      padding-left: 7vw !important;
      text-align: left;
    }

      /* VERTICAL DIVIDERS */
  .navigation,
  .company,
  .legal {
    position: relative;
    padding-left: 32px;   /* space between divider and text */
  }

  .navigation::before,
  .company::before,
  .legal::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.30);
  }

  }

  /* LEGAL PAGE LAYOUT */
.legal-hero {
    background: #27213C;
    padding-top: 18vh;
    padding-bottom: 10vh;
    text-align: center;
    color: #fff;
    position: relative;
  }
  
  .legal-title {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  .legal-date {
    font-size: 18px;
    opacity: 0.7;
  }
  
  .legal-content {
    background: #fff;
    padding: 8vh 0;
    color: #131126;
  }
  
  .legal-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .legal-container h2 {
    margin-top: 60px;
    margin-bottom: 12px;
    font-size: 28px;
    font-weight: 600;
  }
  
  .legal-container h3 {
    margin-top: 25px;
    font-size: 20px;
    font-weight: 500;
  }
  
  .legal-container p,
  .legal-container ul {
    line-height: 1.7;
    font-size: 16px;
    margin-bottom: 18px;
  }
  /* ------------------------------
   FAQ PAGE STYLES
   ------------------------------ */

.faq-categories {
  padding: 40px 0 10px;
  display: flex;
  justify-content: center;
}



.faq-cat {
  background: transparent;
  border: 1px solid #ffffff30;
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 14px;
  cursor: pointer;
  color: #ffffffcc;
  transition: 0.2s ease;
  font-family: "Inter Tight", sans-serif;

}

.faq-cat:hover,
.faq-cat.active {
  background: #ffffff;
  color: #100F1E;
  font-family: "Inter Tight", sans-serif;


}

/* FAQ CONTAINER */
.faq-content {
  background: #ffffff;
  font-family: "Inter Tight", sans-serif;

  padding: 60px 0 120px;

}

.faq-container {
  max-width: 900px;
  margin: auto;
  font-family: 'Inter Tight';
  padding: 0 20px;
  font-family: "Inter Tight", sans-serif;

}

.faq-section-title {
  font-size: 28px;
  margin: 50px 0 20px;
  font-weight: 600;
  font-family: 'Inter Tight';
  color: #100F1E;
  font-family: "Inter Tight", sans-serif;

}

/* FAQ ITEM */
.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 18px 0;
  font-family: "Inter Tight", sans-serif;

}

.faq-question {
    font-family: "Inter Tight", sans-serif;

  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  color: #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question .plus {
  font-size: 21px;
  color: #ffffff;
  border-radius: 50%;
  background: #27213c;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  font-weight: 100;
  font-family: "Inter Tight", sans-serif;
      max-height: 40px;
    min-width: 40px;

}

/* HIDDEN ANSWER */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  padding-right: 20px;
  font-family: "Inter Tight", sans-serif;

}

/* WHEN OPEN */
.faq-item.open .faq-answer {
  max-height: 600px;
  opacity: 1;
  font-family: "Inter Tight", sans-serif;

  margin-top: 12px;
}

.faq-item.open .faq-question .plus {
  transform: rotate(45deg);
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  .faq-cat-container {
    justify-content: center;
    font-family: "Inter Tight", sans-serif;

  }

  .faq-question {
    font-size: 16px;
    font-family: "Inter Tight", sans-serif;

  }
}
/* ------------------------------
   FAQ PAGE – FINAL STYLES
   ------------------------------ */

   .faq-page {
    background: #fafafa;
    padding-bottom: 120px;
  }
  
  /* CATEGORY PILLS */
  .faq-categories {
    display: flex;
    font-family: "Inter Tight", sans-serif;

    justify-content: center;
    padding: 30px 0 15px;
  }
  
  .faq-cat {
    padding: 10px 22px;
    border-radius: 50px;
    font-family: "Inter Tight", sans-serif;

    border: 1px solid #1a1a1a20;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
    color: #222;
    transition: 0.25s ease;
  }
  
  .faq-cat:hover {
    border-color: #1a1a1a50;
  }
  
  .faq-cat.active {
    background: #27213c;
    color: #fff;
    border-color: #27213c;
    font-family: "Inter Tight", sans-serif;

  }
  
  /* FAQ LIST */
  .faq-content {
    max-width: 950px;
    margin: auto;
    padding: 20px;
    font-family: "Inter Tight", sans-serif;

  }
  
  .faq-section-title {
    font-size: 20px;
    margin: 45px 0 20px;
    font-weight: 600;
    color: #111;
    font-family: "Inter Tight", sans-serif;

  }
  
  /* FAQ ITEM */
  .faq-item {
    background: #f5f5f7;
    margin-bottom: 12px;
    padding: 18px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-family: "Inter Tight", sans-serif;

    transition: background 0.25s ease;
  }
  
  .faq-item:hover {
    background: #eeeeee;
    font-family: "Inter Tight", sans-serif;

  }
  
  .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    font-weight: 400;
    font-family: "Inter Tight", sans-serif;
   gap:10px;
  }
  
  .faq-answer {
    max-height: 0;
    font-family: "Inter Tight", sans-serif;

    opacity: 0;
    overflow: hidden;
    transition: all 0.35s ease;
    padding-right: 5px;
  }
  
  .faq-item.open .faq-answer {
    max-height: 500px;
    opacity: 1;
    margin-top: 10px;
    color:black;
  }

  .faq-answer p{
    color: var(--Primary-Black, #222);
leading-trim: both;
text-edge: cap;

/* Text */
font-family: "Inter Tight";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
   
  }



  
  /* PLUS ICON */
  .faq-plus {
    font-size: 20px;
    color: #444;
    transition: 0.3s ease;
    font-family: "Inter Tight", sans-serif;

  }
  
  .faq-item.open .faq-plus {
    transform: rotate(45deg);
  }
  
  /* Mobile */
  @media (max-width: 768px) {
      .faq-cat {
    padding: 10px 22px;
    border-radius: 50px;
    font-family: "Inter Tight", sans-serif;

    border: 1px solid #27213c;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    color: #222;
    transition: 0.25s ease;
  }
    .faq-question {
      font-size: 16px;
    }

    .faq-answer p{
 color: var(--Primary-Black, #222);
leading-trim: both;
text-edge: cap;

/* Mobile/Text */
font-family: "Inter Tight";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 171.429% */
    }
  }
  
  .faq-section-title{display:none;}




  /* Desktop default */
.faq-categories{
  display:flex;
  justify-content:center;
  padding: 30px 0 15px;
}

/* Wrapper that holds the indicator */
.faq-cat-scroll{
  position: relative;
  width: min(1100px, calc(100vw - 40px));
  margin: 0 auto;
}

/* Your buttons row */
.faq-cat-container{
  display:flex;
  gap: 10px;
  padding: 0 6px;
  max-width: 1100px;
  justify-content: center;
  flex-wrap: wrap; /* desktop wraps */
  font-family: "Inter Tight", sans-serif;
}

/* MOBILE: horizontal scroll */
@media (max-width: 768px){
  .faq-cat-container{
    justify-content: flex-start;
    flex-wrap: nowrap;              /* stop wrapping */
    overflow-x: auto;               /* enable horizontal scroll */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;  /* optional: nice snap feel */
    padding: 0 12px 8px;
    gap: 10px;
    scrollbar-width: none;          /* Firefox hide scrollbar */
  }
  .faq-cat-container::-webkit-scrollbar{
    display: none;                  /* Chrome/Safari hide scrollbar */
  }

  /* Make each button "snap" nicely (optional) */
  .faq-cat{
    scroll-snap-align: start;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Fade edges hinting there’s more */
  .faq-cat-scroll::before,
  .faq-cat-scroll::after{
    content:"";
    position:absolute;
    top: 0;
    bottom: 8px;
    width: 28px;
    pointer-events:none;
    z-index: 2;
  }
  .faq-cat-scroll::before{
    left: 0;
    opacity: var(--faq-left-fade, 0);
  }
  .faq-cat-scroll::after{
    right: 0;
    opacity: var(--faq-right-fade, 1);
  }

  /* Small progress bar indicator under the row */
  .faq-scroll-indicator{
    height: 3px;
    border-radius: 999px;
    overflow:hidden;
    margin: 8px 12px 0;
  }
  .faq-scroll-indicator::after{
    content:"";
    display:block;
    height:100%;
    width: var(--faq-scroll-progress, 18%);
    border-radius: 999px;
    transform: translateX(var(--faq-scroll-offset, 0%));
    transition: opacity .2s ease;
    opacity: var(--faq-indicator-opacity, 1);
  }
}

  /* ===========================================================
   STORY PAGE LAYOUT
   Matches KinraLab visual system (dark, elegant, spacious)
=========================================================== */

.story-hero {
    padding: 14vh 0 10vh;
    text-align: center;
    background: #27213C;
    color: #ffffff;
    font-family: "Inter Tight", sans-serif;

  }
  
  .story-hero h1 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    margin-bottom: 12px;
    font-family: "Inter Tight", sans-serif;

  }
  
  .story-hero p {
    opacity: 0.75;
    font-family: "Inter Tight", sans-serif;

    font-size: 14px;
  }
  
  /* ===========================================================
     SECTION WRAPPER
  =========================================================== */
  
  .story-section {
    padding: 60px 4vw;
    background: #27213c;
    color: #ffffff;
    font-family: "Inter Tight", sans-serif;

  }
  
  .story-section.light {
    background: #27213c;
    font-family: "Inter Tight", sans-serif;

  }
  
  /* ===========================================================
     MAIN SECTION TITLE
  =========================================================== */
  
  .story-title {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: clamp(20px, 2.8vw, 32px);
    font-weight: 600;
    line-height: 1.45;
    color: #ffffff;
    font-family: "Inter Tight", sans-serif;

  }
  
  /* ===========================================================
     TEXT BLOCKS
  =========================================================== */
  
  .story-text {
    max-width: 820px;
    margin: 0 auto 30px;
    font-size: 16px;
    line-height: 1.75;
    font-family: "Inter Tight", sans-serif;

    color: rgba(255,255,255,0.85);
  }
  
  .story-text.small {
    font-size: 14px;
    opacity: 0.7;
    font-family: "Inter Tight", sans-serif;

  }
  
  /* ===========================================================
     TWO-COLUMN GRID (Image Left / Text Right)
  =========================================================== */
  
  .story-grid {
    max-width: 1040px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    font-family: "Inter Tight", sans-serif;

    align-items: center;
  }
  
  .story-img {
    width: 100%;
    border-radius: 14px;
    font-family: "Inter Tight", sans-serif;

    overflow: hidden;
  }
  
  .story-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
  }
  
  /* ===========================================================
     THREE-IMAGE STRIP (Feel Confident section)
  =========================================================== */
  
  .story-strip {
    max-width: 1040px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    font-family: "Inter Tight", sans-serif;

  }
  
  .story-strip img {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
  
  /* ===========================================================
     NARROW CENTERED BLOCK
  =========================================================== */
  
  .story-center {
    max-width: 760px;
    margin: 40px auto;
    text-align: center;
    font-family: "Inter Tight", sans-serif;

  }
  
  .story-center p {
    font-size: 16px;
    line-height: 1.75;
    opacity: 0.85;
  }
  
  /* ===========================================================
     LARGE STATEMENT SECTION
  =========================================================== */
  
  .story-statement {
    padding: 80px 4vw;
    text-align: center;
    background: #27213c;
    font-family: "Inter Tight", sans-serif;

  }
  
  .story-statement h2 {
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.4;
    margin-bottom: 16px;
    font-weight: 600;
    font-family: "Inter Tight", sans-serif;

    color: #ffffff;
  }
  
  .story-statement p {
    font-size: 14px;
    opacity: 0.7;
    max-width: 740px;
    margin: 0 auto;
    font-family: "Inter Tight", sans-serif;

  }
  
  /* ===========================================================
     CTA BLOCK — “Style That Feels True”
  =========================================================== */
  
  .story-cta {
    background: #27213c;
    padding: 60px 4vw;
    text-align: center;
    border-radius: 14px;
    max-width: 1100px;
    margin: 60px auto;
    font-family: "Inter Tight", sans-serif;

  }
  
  
  .story-cta h3 {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 600;
    margin-bottom: 16px;
    font-family: "Inter Tight", sans-serif;

  }
  
  .story-cta p {
    font-size: 14px;
    opacity: 0.75;
    max-width: 600px;
    margin: 0 auto 20px;
    font-family: "Inter Tight", sans-serif;

  }
  
  .story-cta button {
    padding: 10px 24px;
    border-radius: 999px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    background: #ffffff;
    color: #27213c;
    transition: background 0.25s ease;
    font-family: "Inter Tight", sans-serif;

  }
  
  .story-cta button:hover {
    background: #f0e9ff;
    font-family: "Inter Tight", sans-serif;

  }
  
  /* ===========================================================
     RESPONSIVE BEHAVIOR
  =========================================================== */
  
  @media (max-width: 900px) {
    .story-grid {
      grid-template-columns: 1fr;
      text-align: center;
    }
  }
  
  @media (max-width: 768px) {
    .story-strip {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  @media (max-width: 480px) {
    .story-strip {
      grid-template-columns: 1fr;
    }
  }
  /* ===== STORY PAGE WRAPPER ===== */

.story-page {
    background: #27213c;
    color: #f7f5ff;
  }
  
  /* Keep global typography but tighten max width */
  .story-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
  }
  
  /* ===== HERO ===== */
  
  .story-hero {
    padding: 120px 0 80px;
    text-align: center;
    background: #27213C;
  }
  
  .story-hero-kicker {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c6c0ff;
    margin-bottom: 12px;
  }
  
  .story-hero-title {
    font-size: clamp(40px, 4vw, 56px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
  }
  
  .story-hero-subtitle {
    font-size: 15px;
    max-width: 420px;
    margin: 0 auto 28px;
    color: #e4e0ff;
  }
  
  .story-hero-divider {
    width: 160px;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, #f6d58f 0%, #f0a5c2 50%, #8f9bff 100%);
  }
  
  /* ===== INTRO TEXT BLOCK (“Style is a reflection…”) ===== */
  
  .story-intro-block {
    padding: 56px 0 32px;
    text-align: center;
  }
  
  .story-intro-heading {
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.35;
    font-weight: 500;
    color: #ffffff;
  }
  
  .story-intro-heading span {
    display: inline-block;
  }
  
  /* ===== WHITE INTRO CARD (IMAGE LEFT / COPY RIGHT) ===== */
  
  .story-intro-card {
    background: #f8f6ff;
    color: #27213c;
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 80px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
  }
  
  .story-intro-media img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
  }
  
  .story-intro-copy-kicker {
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #9679ff;
    margin-bottom: 10px;
  }
  
  .story-intro-copy-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px;
  }
  
  .story-intro-copy p {
    font-size: 14px;
    line-height: 1.7;
    color: #3b3053;
  }
  
  /* ===== “FEEL CONFIDENT. GROUNDED. WHOLE” GALLERY ===== */
  
  .story-gallery-section {
    padding-bottom: 72px;
  }
  
  .story-gallery-cardShell {
    background: #f8f6ff;
    color: #27213c;
    border-radius: 24px;
    padding: 32px 32px 40px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  }
  
  .story-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 24px;
  }
  
  .story-gallery-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
  }
  
  .story-gallery-sub {
    font-size: 13px;
    line-height: 1.7;
    color: #5e4f7c;
    max-width: 260px;
  }
  
  /* slider viewport + track */
  
  .story-gallery-viewport {
    overflow: hidden;
    border-radius: 20px;
  }
  
  .story-gallery-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.33, 0.01, 0.18, 0.99);
    touch-action: pan-y;
  }
  
  .story-gallery-card {
    flex: 0 0 100%;
  }
  
  .story-gallery-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
  }
  
  /* dots */
  
  .story-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
  }
  
  .story-gallery-dot {
    width: 28px;
    height: 3px;
    border-radius: 999px;
    border: none;
    background: #d2c7ee;
    cursor: pointer;
    padding: 0;
  }
  
  .story-gallery-dot.is-active {
    background: #27213c;
  }
  
  /* ===== PURPOSE CARD (white full-width text) ===== */
  
  .story-purpose {
    margin: 56px 0 80px;
  }
  
  .story-purpose-card {
    background: #f8f6ff;
    color: #27213c;
    border-radius: 24px;
    padding: 32px 40px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    text-align: center;
  }
  
  .story-purpose-title {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 12px;
  }
  
  .story-purpose-body {
    font-size: 14px;
    line-height: 1.8;
    color: #4b3b6a;
  }
  
  /* ===== RETAIL PROBLEM SECTION (TEXT + IMAGE) ===== */
  
  .story-retail {
    margin-bottom: 72px;
  }
  
  .story-retail-grid {
    background: #f8f6ff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 40px;
    color: #1c132a;
  }
  
  .story-retail-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  
  .story-retail-copy {
    font-size: 14px;
    line-height: 1.8;
    color: #4b3b6a;
  }
  
  .story-retail-media img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
  }
  
  /* ===== WRONG ASSUMPTION TEXT ===== */
  
  .story-assumption {
    padding: 56px 0 40px;
    text-align: center;
  }
  
  .story-assumption-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 14px;
  }
  
  .story-assumption-copy {
    font-size: 13px;
    color: #d5d0ff;
    max-width: 480px;
    margin: 0 auto;
  }
  
  /* ===== FLIPPED MODEL BANNER ===== */
  
  .story-banner {
    margin-bottom: 32px;
  }
  
  .story-banner-pill {
    max-width: 1120px;
    margin: 0 auto;
    background: #27213c;
    border-radius: 999px;
    padding: 14px 32px;
    font-size: 15px;
    text-align: center;
    letter-spacing: 0.03em;
    color: #f5f3ff;
  }
  
  /* ===== PERSON-CENTRIC CARD (TEXT + IMAGE) ===== */
  
  .story-person {
    margin-bottom: 80px;
  }
  
  .story-person-grid {
    background: #f8f6ff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 40px;
    color: #27213c;
  }
  
  .story-person-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  
  .story-person-copy {
    font-size: 14px;
    line-height: 1.8;
    color: #4b3b6a;
  }
  
  .story-person-media img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
  }
  
  /* ===== BOTTOM CTA BAND ===== */
  
  .story-cta-band {
    margin: 0 auto 96px;
    max-width: 1120px;
    background: #27213c;
    border-radius: 24px 24px 0 0;
    padding: 36px 28px 40px;
    text-align: center;
    color: #ffffff;
  }
  
  .story-cta-title {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  
  .story-cta-sub {
    font-size: 13px;
    color: #d8d0ff;
    margin-bottom: 16px;
  }
  
  .story-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid #ffffff;
    background: transparent;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
  }
  
  .story-cta-btn span {
    font-size: 12px;
  }
  
  /* ===== RESPONSIVE ADJUSTMENTS ===== */
  
  @media (max-width: 960px) {
    .story-intro-card,
    .story-retail-grid,
    .story-person-grid {
      grid-template-columns: 1fr;
      padding: 28px;
    }
  
    .story-gallery-cardShell {
      padding: 24px 20px 32px;
    }
  
    .story-gallery-card img,
    .story-intro-media img,
    .story-retail-media img,
    .story-person-media img {
      height: 240px;
    }
  
    .story-banner-pill {
      border-radius: 20px;
      padding: 12px 18px;
      font-size: 14px;
    }
  
    .story-cta-band {
      border-radius: 24px;
      margin-bottom: 72px;
    }
  }
  
  @media (max-width: 600px) {
    .story-hero {
      padding-top: 96px;
      padding-bottom: 60px;
    }
  
    .story-shell {
      padding: 0 16px;
    }
  
    .story-intro-card,
    .story-retail-grid,
    .story-person-grid {
      padding: 22px 18px;
      gap: 24px;
    }
  
    .story-gallery-header {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .story-gallery-sub {
      max-width: none;
    }
  
    .story-banner-pill {
      font-size: 13px;
    }
  }
/* ============================================
   KINRALAB — STORY PAGE EXACT DESIGN SYSTEM
   Matches the PDF layout you provided
============================================ */

/* GLOBAL STORY PAGE BACKGROUND */
body.story-page {
    background: #27213c;
    color: #ffffff;
    font-family: "Inter Tight", sans-serif;
  }
  
  /* CONTAINER WIDTH */
  .story-section,
  .slider-wrapper {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 24px;
  }
  
  /* --------------------------------------------
     HERO SECTION
  --------------------------------------------- */
  .story-hero {
    background: #27213C;
    text-align: center;
    padding-top: 120px;
    padding-bottom: 70px;
    height:80vh;
    min-height:530px;
  }
  
  .story-hero h1 {
    font-size: 102px;
    font-weight: 400;
    letter-spacing: 0.04em;
  }
  
  .story-hero p {
    font-size: 16px;
    margin:0px;
  }
  
  /* --------------------------------------------
     SECTION HEADING + BODY
  --------------------------------------------- */
  .story-section h2 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 18px;
    color: #fff;
    text-align: center;
  }
  
  .story-body {
    font-size: 17px;
    line-height: 1.75;
    opacity: 0.85;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
  }
  
  /* --------------------------------------------
     WHITE IMAGE CARDS (rounded shadow blocks)
  --------------------------------------------- */
  .img-block {
    margin: 50px auto;
    background: #f7f5ff;
    padding: 32px;
    border-radius: 28px;
    box-shadow: 0px 25px 70px rgba(0,0,0,0.55);
    max-width: 960px;
  }
  
  .img-block img {
    width: 100%;
    border-radius: 20px;
    display: block;
  }
  
  /* --------------------------------------------
     STORY SUB-SECTION BLOCK (WHITE TEXT BLOCK)
  --------------------------------------------- */
  .story-text-block {
    background: #f7f5ff;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.55);
    padding: 40px;
    margin: 60px auto;
    max-width: 960px;
    color: #221833;
  }
  
  .story-text-block h3 {
    font-size: 22px;
    margin-bottom: 10px;
  }
  
  .story-text-block p {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.85;
  }
  
  /* --------------------------------------------
     PREMIUM SLIDER (fade + scale + swipe)
  --------------------------------------------- */
  .slider-wrapper {
    margin-top: 90px;
    margin-bottom: 80px;
    text-align: center;
  }
  
  .slider-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  
  .slider-sub {
    font-size: 15px;
    opacity: 0.7;
    margin-bottom: 26px;
  }
  
  .slider {
    position: relative;
    width: 100%;
    height: 330px;
    border-radius: 22px;
    overflow: hidden;
    background: #27213c;
  }
  
  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
  }
  
  .slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
  }
  
  .dot {
    width: 32px;
    height: 4px;
    border-radius: 4px;
    background: #5b5769;
    cursor: pointer;
  }
  
  .dot.active {
    background: #ffffff;
  }
  
  /* --------------------------------------------
     CTA SECTION
  --------------------------------------------- */
  .story-cta {
    background: #27213c;
    padding: 70px 0;
    text-align: center;
  }
  
  .story-cta h2 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 10px;
  }
  
  .btn-register-2 {
    background: #ffffff;
    color: #000;
    border: none;
    padding: 10px 26px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.2s ease;
  }
  
  .btn-register:hover {
    transform: translateY(-2px);
    background: #f5f5f5;
  }
  
  /* --------------------------------------------
     MOBILE RESPONSIVE
  --------------------------------------------- */
  
  @media (max-width: 768px) {
    .story-hero h1 {
      font-size: 38px;
    }
  
    .story-section h2 {
      font-size: 26px;
    }
  
    .story-body {
      font-size: 15px;
      text-align: left;
    }
  
    .img-block {
      padding: 18px;
    }
  
    .slider {
      height: 240px;
    }
  }
  
  @media (max-width: 480px) {
    .story-hero {
      padding-top: 90px;
    }
  }

  
  /* KinraLab Story Section */
  /* Kinra Story Belief Line */
.kinra-story-belief {
    text-align: center;
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0;
    margin-bottom: 75px;
    color: #6c6c6c;
    vertical-align: middle;
  }
  kinra-story-belief-2{
    text-align: left;
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0;
    margin-bottom: 75px;
    color: #6c6c6c;
    vertical-align: middle;
  }
  
  /* Kinra Story Heading */
  .kinra-story-heading {
    text-align: center;
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 45px;
    line-height: 100%; /* Matches Figma spec */
    letter-spacing: 0;
    color: #151515;
    vertical-align: middle;
    margin: 0 auto;
    margin-bottom: 75px;
    max-width: 900px; /* keeps multi-line balance similar to screenshot */
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .kinra-story-heading {
      font-size: 18px;
      line-height: 110%;
    }
  
    .kinra-story-belief {
      font-size: 14px;
    }
  }
  
.kinra-story-section {
    background: #ffffff;
    padding: 60px 0;
  }
  
  .kinra-story-box {
        background-image: URL('/assets/story.webp');
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    padding: 0px;
    border-radius: 20px;
    margin: 10vw;
    margin-top: 0px;
    margin-bottom: 75px;
    height: 300px;
    padding-bottom: 80px;
  }
  
  .kinra-story-image {
    width: 22vw;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    float: left;
  }
  
  .kinra-story-text p {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
    margin-bottom: 14px;
        font-size: 16px;
    color: #5f616b;
    line-height: 28px;
  }

  .kinra-story-paragraph {
    margin-right: 30vw;
  }
  
  
  .kinra-bottom-text {
   margin-left:15vw;
   margin-right:15vw;
    font-size: 16px;
    color: #222;
    line-height: 1.55;
    text-align: center;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .kinra-story-section {
      padding: 40px 0;
    }
    .kinra-story-paragraph {
        margin-left: 0vw;margin-right: 0vw;
      }
    .kinra-story-heading {
      font-size: 18px;
    }
  
    .kinra-story-box {
        border: 1px solid #D5D7DD;
        background: #F8F8F8;
        padding: 32px;
        border-radius: 20px;
        margin: 5vw;
        margin-bottom: 5vh;
        margin-top: 5vh;
        min-height: 100vw;
    }

    .kinra-story-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
        margin-bottom: 5vh;
    }
    .kinra-bottom-text {
        max-width: 700px;
        margin: 40px auto 0 auto;
        font-size: 14px;
        color: #222;
        line-height: 1.55;
        text-align: center;
        margin-left: 5vw;
        margin-right: 5vw;
    }
  
    .kinra-story-text p {
      font-size: 14px;
    }
  }
  

  /* SECTION WRAPPER */
.kinra-mission-section {
    padding: 80px 0;
    margin-left: 10vw;
    margin-right: 10vw;
    margin-bottom:10vh;
  }
  
  /* WHITE-GREY ROUNDED CONTAINER */
  .kinra-mission-box {
    background: #f7f7f7;
    border-radius: 24px;
    border: 1px solid #e5e5e5;
    text-align: center;
    padding: 80px 60px;
  }
  
  /* SMALL TOP TEXT */
  .kinra-mission-toptext {
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    margin: auto;
    max-width: 515px;
  }
  
  /* MAIN HEADING */
  .kinra-mission-heading {
    font-family: "Inter Tight", sans-serif;
    font-size: 30px;
    line-height: 130%;
    font-weight: 400;
    color: #1e1e2e;
    max-width: 950px;
    margin: 0 auto;
  }
  
  /* SUBTEXT */
  .kinra-mission-subtext {
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 150%;
    max-width: 515px;
    margin: 0 auto;
    text-align: center;
  }
  
  /* RESPONSIVE */
  @media (max-width: 768px) {
    .kinra-mission-box {
      padding: 50px 25px;
    }
  
    .kinra-mission-heading {
      font-size: 20px;
    }
    .kinra-mission-section {
    padding: 80px 0;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-bottom: 10vh;
}
  }
  

  /* BELIEF SHIFT SECTION */
.belief-shift-section {
    padding: 100px 0;
    text-align: center;
  }
  
  /* MAIN HEADING */
  .belief-shift-heading {
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    font-size:45px;
    line-height: 130%;
    color: #1b1b1b;
    margin-bottom: 30px;
  }
  
  /* SMALL PARAGRAPH UNDER HEADING */
  .belief-shift-small {
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    line-height: 150%;
    color: #555;
    margin-bottom: 75px;
    font-weight: 400;
  }
  
  /* DARK STRIP STATEMENT */
  .belief-strip {
    font-family: "Inter Tight", sans-serif;
    font-size: 45px;
    font-weight: 400;
    background: #27213c;
    color: white;
    padding: 40px 0px;
    display: block;
    margin-bottom: 75px;
    margin-left: 10vw;
    margin-right: 10vw;
    border-radius: 25px;
    width:80vw;
}
  
  
  /* MAIN WHITE ROUNDED BOX */
  .belief-main-box {
    background: #f7f7f7;
    border: 1px solid #e8e8e8;
    border-radius: 24px;
    padding: 50px 40px;
    margin-bottom: 70px;
  }
  
  /* LEFT TEXT BLOCK */
  .belief-text p {
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    line-height: 160%;
    color: #333;
    margin-bottom: 18px;
  }
  
  /* RIGHT IMAGE */
  .belief-image {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
  }
  
  /* FINAL STATEMENT */
  .belief-final-text {
    font-family: "Inter Tight", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #1b1b1b;
    line-height: 150%;
    max-width: 600px;
    margin: 0 auto 30px;
  }
  
  /* FOOTNOTE */
  .belief-footnote {
    font-family: "Inter Tight", sans-serif;
    font-size: 14px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 150%;
    font-style:italic;
    margin-top:75px;
  }
  
  /* RESPONSIVE */
  @media (max-width: 768px) {
      .belief-strip {
        width: 100%;
        font-size: 24px;
        padding: 16px 20px;
        margin-left: unset;
        margin-right: unset;
    }

    .belief-main-box {
      padding: 35px 20px;
    }
  
    .belief-shift-heading {
      font-size: 32px;
    }
  }
/* MAIN BOX */
.belief-main-box {
      background: #f7f7f7;
    border-radius: 24px;
    border: 1px solid #e8e8e8;
    padding: 50px 40px;
    max-width: 80vw;
    margin: 0 auto 10vw;
  }
  
  /* FLEX ROW + UTILITIES (Bootstrap-like but pure CSS) */
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  
  .align-items-center {
    align-items: center;
  }
  
  /* gap utility */
  .g-4 {
    gap: 3.5rem; /* 24px */
  }
  
  /* COLUMNS: full width on mobile */
  .col-md-7,
  .col-md-5 {
    flex: 1 1 100%;
  }
  
  /* 2-column layout on desktop */
  @media (min-width: 768px) {
    .col-md-7 {
      flex: 0 0 58%;
      max-width: 50%;
    }
    .col-md-5 {
      flex: 0 0 42%;
      max-width: 42%;
    }
  }
  
  /* TEXT */
  .belief-text p {
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 18px;
  }
  
  /* IMAGE */
  .belief-image {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    display: block;
  }
    
  /* ============================
   PHILOSOPHY PAGE
   ============================ */

/* Generic container for this page (independent of other .container/.page-container) */
.philosophy-section-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
  }
  
  /* HERO */
  /* HERO */
.philosophy-hero {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #27213C;
    color: #ffffff;
    text-align: center;
    padding: 20vh 16px 120px;
    display: flex;
    justify-content: center;
  }
  
  .philosophy-hero-inner {
    max-width: 900px;
    width: 100%;
    margin-top:15vh;
  }
  
  .philosophy-hero h1 {
    font-family: "Inter Tight", sans-serif;
    margin: 0;
    color: #FFF;
    text-align: center;
    font-size: 102px;
    font-style: normal;
    font-weight: 400;
    line-height: 99px;
  }
  
  .philosophy-hero-divider {
    width: 80%;
    max-width: 680px;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
    margin: 28px auto 34px;
  }
  
  .philosophy-hero p {
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
        max-width: 80vw;
    margin: 0px 10vw
  }
  
  /* ================================
   PHILOSOPHY HERO — MOBILE ONLY
   Target: clean, centered, calm
   ================================ */
@media (max-width: 480px) {
.belief-shift-section {
    padding: 75px 0;
    text-align: center;
    margin: 0 5vw;
}
.belief-main-box {
    background: #f7f7f7;
    border-radius: 24px;
    border: 1px solid #e8e8e8;
    padding: 50px 40px;
    max-width: 90vw;
    margin: 0 auto 5vw;
}
  .philosophy-hero {
    min-height: 500px;
    padding: 110px 20px 96px;
    background: #27213C;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    overflow: hidden;
  }

  .philosophy-hero-inner {
    margin: 0;
    max-width: 320px;
  }

  .philosophy-hero h1 {
    font-family: "Inter Tight", sans-serif;
    font-size: 44px;              /* matches screenshot scale */
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 22px;
  }

  .philosophy-hero-divider {
    width: 64%;
    height: 1px;
    background: rgba(255,255,255,0.25);
    margin: 0 auto 22px;
  }

  .philosophy-hero p {
    font-family: "Inter Tight", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    max-width: 260px;
    margin: 0 auto;
  }

  /* Decorative crosses — subtle, not distracting */
  .philosophy-hero > svg {
    position: absolute;
    opacity: 0.25;
    transform: scale(0.75);
    pointer-events: none;
    display: none;
  }

  .philosophy-hero > svg:first-of-type {
    top: 24px;
    left: 18px;
  }

  .philosophy-hero > svg:nth-of-type(2) {
    top: 24px;
    right: 18px;
    left: auto;
  }
}

  /* CORE PRINCIPLE CARD */
/* PHILOSOPHY CARD SECTION */
.philosophy-core {
    background: #ffffff;
    padding: 75px 16px;
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
  }
  
  .philosophy-card {
    background: #f7f7fa;
    border: 1px solid #e6e6eb;
    border-radius: 28px;
    padding: 75px 40px;
    max-width: 1200px;
    width: 100%;
    text-align: center;
  }
  
  /* Small top text */
  .philosophy-card-top {
    color: var(--Primary-Black, #222);
    /* Subtitle */
    font-family: "Inter Tight";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 28px */
    margin-bottom:8vh;
  }
  
  /* Big headline */
  .philosophy-card-title {
    color: var(--Primary-Dark-purple, #27213C);
    text-align: center;
    /* H2 Title */
    font-family: "Inter Tight";
    font-size: 52px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 60px */
    margin: 0 0 8vh 0;
  }
  
  /* Paragraph under headline */
  .philosophy-card-body {
    font-family: "Inter Tight", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    max-width: 760px;
    margin: 0 auto;
    color: #2e2c3b;
    font-size: 18px;
    line-height: 30px;
    color: var(--text-muted);
  }
  
  /* STEPS SECTIONS (1–3) */
  
  .philosophy-step {
    background: #ffffff;
    padding: 75px 0;
  }
  
  .philosophy-step > h3 {
    text-align: center;
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    font-size: 26px;
    color: #151427;
    margin-bottom: 32px;
  }
  
  .philosophy-step .step-subtext {
    text-align: center;
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    color: #4c4c60;
    max-width: 720px;
    margin: 0 auto 32px;
  }
  
  /* Step 1 two-column layout */
  .philosophy-step .step-row {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
  }
  
  .step-text,
  .step-media {
    flex: 1 1 320px;
  }

@media (max-width: 1100px) {

  .step-text p {
    font-family: "Inter Tight", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #2d2b38;
    margin-bottom: 22px;
    max-width: 520px; 
}

    .kinra-platform-text h2 {
        font-family: "Inter Tight", sans-serif;
        font-weight: 400;
        font-size: 34px;
        line-height: 1.15;
        color: #1f1d2b;
        margin-bottom: 30px;
    }
}

@media (min-width: 1100px) {

    .step-text p {
      font-family: "Inter Tight", sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: #3d3d50;
    }
  }


  .step-media img {
    width: 100%;
    border-radius: 24px;
    display: block;
    object-fit: cover;
  }
  
  /* Step 2 & 3 grid cards */
  
  .philosophy-step .step-grid {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  
  .step-box {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e3e3f0;
    padding: 24px;
    text-align: left;
  }
  
  .step-box h4 {
    font-family: "Inter Tight", sans-serif;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 10px;
    color: #151427;
  }
  
  .step-box p {
    font-family: "Inter Tight", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #4c4c60;
  }
  
  .step-box.step-highlight {
    background: #e5f5ed;
    border-color: #c4e3d3;
  }
  
  /* OUTCOME SECTION */
  
  .philosophy-outcome {
    padding: 80px 16px 70px;
    text-align: center;
    background: #ffffff;
  }
  
  .philosophy-outcome h3 {
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #151427;
    margin-bottom: 12px;
  }
  
  .philosophy-outcome p {
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    color: #4c4c60;
    max-width: 640px;
    margin: 0 auto 32px;
  }
  
  .outcome-gallery {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  
  .outcome-gallery img {
    width: 100%;
    border-radius: 18px;
    display: block;
    object-fit: cover;
  }
  
  /* FINAL CTA STRIP */
  
  .philosophy-final-cta {
    background: #27213C;
    color: #ffffff;
    text-align: center;
    padding: 70px 16px 80px;
  }
  
  .philosophy-final-cta h2 {
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    font-size: 28px;
    margin-bottom: 12px;
  }
  
  .philosophy-final-cta p {
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #dddafc;
    max-width: 640px;
    margin: 0 auto 24px;
  }
  
  .philosophy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border-radius: 999px;
    border: none;
    background: #ffffff;
    color: #17152b;
    font-family: "Inter Tight", sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  
  .philosophy-btn:hover {
    background: #f0f0ff;
    transform: translateY(-1px);
  }
  
  /* RESPONSIVE TUNING */
  
  @media (max-width: 768px) {
    .philosophy-hero {
      padding: 100px 16px 60px;
    }
  
    .philosophy-card {
      padding: 32px 20px;
    }
  
    .philosophy-card h2 {
      font-size: 22px;
    }
  
    .philosophy-step {
      padding: 60px 0;
    }
  
    .philosophy-step .step-grid {
      grid-template-columns: 1fr;
    }
  
    .outcome-gallery {
      grid-template-columns: 1fr;
    }
  }
  

  /* PLATFORM SECTION */
.kinra-platform-section {
    width: 100%;
    background: #ffffff;
    padding: 120px 0;
    display: flex;
    justify-content: center;
        padding-top: 75px;
  }
  
  .kinra-platform-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1350px;
    width: 100%;
    padding: 0 40px;
    gap: 60px;
  }
  

  .kinra-platform-text p {
    font-family: "Inter Tight", sans-serif;
    font-size: 20px;
    line-height: 1.6;
    max-width: 520px;
    color: #2d2b38;
    font-size: 16px;
    line-height: 30px;
    color: var(--text-muted);
        color: #5f616b;
        line-height: 28px;
        margin: 0;
        margin-bottom:30px;
  }
  
  /* RIGHT IMAGE */
  .kinra-platform-image-wrap {
    width: 50%;
  }
  
  .kinra-platform-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  
    /* CUSTOM ANGLED MASK */
    clip-path: polygon(12% 0, 100% 0, 100% 80%, 88% 100%, 0 100%, 0 20%);
  
    border-radius: 32px;
  }
  

  /* STEP SECTION BASE */
.step-section {
    background: #ffffff;
   
  /* padding: 180px 0 160px 0; */
    width: 100%;
    text-align: center;
  }
  
  /* TOP LABEL */
  .step-top-label {
    font-family: "Inter Tight", sans-serif;
    font-size: 20px;
    color: #2f2d3c;
  }
  
  /* TITLE */
  .step-title {
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    font-size: 56px;
    line-height: 1.15;
    margin: 0 auto 75px auto;
    color: #1f1d2b;
  }
  
  /* CONTENT ROW */
  .step-content {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 40px;
  
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 70px;
  }
  
  /* LEFT TEXT */
  .step-text {
    text-align: left;
  }
  
  .step-text p {
    font-family: "Inter Tight", sans-serif;
    font-size: 18px;
    line-height: 1.65;
    color: #2d2b38;
    margin-bottom: 75px;
    max-width: 520px;
    font-size: 18px;
    line-height: 30px;
    color: var(--text-muted);
  }
  
  /* RIGHT IMAGE BLOCK */
  .step-image-wrap {
    width: 50%;
  }
  
  .step-image {
    width: 100%;
    display: block;
    border-radius: 24px;
    background: #f4f4f7;
    object-fit: cover;
  }
  


  /* STEP 2 SECTION */
.step2-section {
    padding: 150px 0 130px 0;
    background: #ffffff;
    text-align: center;
  }
  
  .step2-title {
    font-family: "Inter Tight", sans-serif;
    font-size: 52px;
    font-weight: 400;
    color: #27213c;
    margin-bottom: 20px;
    margin-top:75px;
  }
  
  .step2-subtitle {
    font-family: "Inter Tight", sans-serif;
    font-size: 20px;
    color: #4f4c59;
    margin-bottom: 75px;
    font-size: 18px;
    line-height: 30px;
    color: var(--text-muted);
  }
  
  /* GRID */
  .step2-grid {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
  
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 50px;
  }
  
  /* CARD BOXES */
  .step2-box {
    background: #f7f7fa;
    border: 1px solid #e4e4ea;
    border-radius: 22px;
    padding: 0px 30px 0px;
    text-align: left;
  }
  
  .step2-box h4 {
    font-family: "Inter Tight";
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: #1f1d2b;
    margin-bottom: 20px;
  }
  
  .step2-box p {
    font-family: "Inter Tight", sans-serif;
    font-size: 18px;
    line-height: 1.65;
    color: #2d2b38;
  }
  
  /* HIGHLIGHTED BOX */
  .step2-box.highlight {
    background: #84A69A; /* Refined greenish-teal from screenshot */
    color: #ffffff;
  }
  
  .step2-box.highlight h4,
  .step2-box.highlight p {
    color: #ffffff;
  }
  
  /* RESPONSIVE */
  @media (max-width: 900px) {
    .step2-grid {
      grid-template-columns: 1fr;
    }
    .kinra-platform-container {
        display: block; 
        align-items: center;
        justify-content: space-between;
        max-width: 1350px;
        width: 100%;
        padding: 0 40px;
        gap: 60px;
    }
    .kinra-platform-image-wrap {
        width: 100%;
    }
    .philosophy-card-body {
        font-family: "Inter Tight", sans-serif;
        font-size: 14px;
        line-height: 1.6;
        max-width: 760px;
        margin: 0 auto;
      font-size: 16px;
        color: #5f616b;
        line-height: 28px;
        margin: 0;
    }
    .philosophy-card-top {
        color: var(--Primary-Black, #222);
        font-family: "Inter Tight";
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        margin-bottom: 6vh;
        font-size: 16px;
        color: #5f616b;
        line-height: 28px;

    }
    .step-text p {
        font-family: "Inter Tight", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        color: #2d2b38;
        margin-bottom: 22px;
        max-width: 520px;
        font-size: 16px;
        color: #5f616b;
        line-height: 28px;
        margin: 0;
    }
  }
  /* SECTION WRAPPER */
.clarity-section {
    padding: 140px 0;
    background: #ffffff;
  }
  
  /* HEADER AREA */
  .clarity-header {
    max-width: 1300px;
    margin: 0 auto 80px auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .clarity-header h2 {
    font-family: "Inter Tight", sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
    color: #1f1d2b;
    margin-top: 0px;
  }
  
  .clarity-right p {
    font-family: "Inter Tight", sans-serif;
    font-size: 18px;
    line-height: 2.1;
    color: #2f2d3b;
    margin-bottom: 20px;
    margin-top: 0;
    color: var(--text-muted);
  }
  
  .clarity-indicators .ind {
    width: 32px;
    height: 6px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 6px;
    background: #ccc;
  }
  
  .clarity-indicators .red {
    background: #a03a39;
  }
  
  /* CAROUSEL LAYOUT */
  .clarity-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
  }
  
  /* NAV ARROWS - DESKTOP */
  .clarity-arrow {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 3px solid white;
    background: #27213c;
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  }
  
  .left-arrow {
    margin-right: 20px;
  }
  
  .right-arrow {
    margin-left: 20px;
  }
  
  /* CARD AREA */
  .clarity-cards {
    display: flex;
    align-items: center;
    gap: 40px;
  }
  
  /* EACH CARD */
  .clarity-card {
    width: 360px;
    height: 420px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    transition: 0.4s ease;
    box-shadow: 0 6px 35px rgba(0,0,0,0.15);
    border:8px solid white;
  }
  
  .clarity-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* LEFT → ROTATED 15° & BLURRED */
  .clarity-card--left {
    transform: rotate(-5deg) scale(0.92);
    filter: blur(3px) brightness(0.85);
    opacity: 0.7;
  }
  
  /* RIGHT → ROTATED -15° & BLURRED */
  .clarity-card--right {
    transform: rotate(5deg) scale(0.92);
    filter: blur(3px) brightness(0.85);
    opacity: 0.7;
  }
  
  /* CENTER CARD → SHARP, LARGER */
  .clarity-card--center {
    transform: scale(1.05);
    z-index: 5;
    filter: none;
    opacity: 1;
  }
  
  /* MOBILE INDICATORS */
  .clarity-mobile-indicators {
    display: none;
    text-align: center;
    margin-top: 40px;
  }
  
  .clarity-mobile-indicators .dot {
    background: #ccc;
    margin: 0 4px;
    display: inline-block;
  }
  
  .clarity-mobile-indicators .dot.active {
    background: #a03a39;
  }
  
  /* RESPONSIVE BEHAVIOR */
  @media (max-width: 600px) {
  .desktop-only { display: none; }
   .mobile-only { display: block; }
  }

    @media (min-width: 600px) {

  .mobile-only { display: none !important; }
    }
  @media (max-width: 900px) {
  
    .clarity-header {
        flex-direction: column;
        text-align: left;
        gap: 20px;
        margin-bottom: 4vh;
    }
  
    .clarity-carousel {
      flex-direction: column;
    }
  
    .clarity-arrow {
      display: none;
    }
  
    .clarity-cards {
      gap: 20px;
    }
  
    .clarity-card {
      transform: none !important;
      filter: none !important;
      opacity: 1 !important;
    }
  
    .desktop-only { display: none; }
    .mobile-only { display: block;     display: flex;
      justify-content: center;
      margin-top: 22px;}
  }
  
  .ecosystem-section {
    padding: 0px 6vw;
        padding-bottom: 5vh;

  }
  
  .ecosystem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  
  /* CARD BASE */
  .eco-card {
    background: #f8f8f8;
    border-radius: 26px;
    position: relative;
    height: auto;
    min-height: 200px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.35s ease;
  }
  
  .eco-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 36px;
  }
  
  /* TITLE (default bottom-left) */
  .eco-title {
    position: absolute;
    bottom: 36px;
    left: 36px;
    font-family: Inter Tight;
    font-size: 26px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0;
    transition: all 0.35s ease;
  }
  
  /* DESC (hidden by default) */
  .eco-desc {
    position: absolute;
    left: 36px;
    bottom: 36px;
    font-size: 16px;
    line-height: 1.45;
    opacity: 0;
    max-width: 82%;
    color: white;
    transition: all 0.35s ease;
    text-align: justify;
  }
  
  /* BOTTOM RIGHT ICON */
  .eco-bottom-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 400;
    transition: all 0.35s ease;
  }
  
  /* DEFAULT COLLAPSED ICON (green circle +) */
  .collapse-icon {
    background: #76a696;
    color: white;
  }
  
  /* ARROW ICON (hidden by default) */
  .arrow-icon {
    background: white;
    color: #1a1a1a;
    opacity: 0;
  }
  
  /* TOP RIGHT ICON (hidden by default) */
  .eco-top-icon {
    position: absolute;
    top: 26px;
    right: 26px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid white;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.35s ease;
  }

  
  .ecosystem-heading {
    font-family: Inter Tight;
    font-weight: 500;
    font-size: 48px;
    text-align: center;
    color: #2d2c40;
    margin-bottom: 20px;
  }
  
  .ecosystem-subtext {
    text-align: center;
    margin: 0 auto 60px;
    font-size: 18px;
    line-height: 1.5;
    color: #444;
    font-size: 18px;
    line-height: 30px;
    color: var(--text-muted);
  }
  
  /* HOVER / EXPAND STATE */
  
  /* Title moves to top-left */
  .eco-card:hover .eco-title {
    top: 36px;
    bottom: auto;
    color: white;
  }
  
  /* Reveal description */
  .eco-card:hover .eco-desc {
    opacity: 1;
    bottom: 0px;
  }
  
  /* Hide collapsed + icon */
  .eco-card:hover .collapse-icon {
    opacity: 0;
  }
  
  /* Show arrow icon */
  .eco-card:hover .arrow-icon {
    opacity: 1;
  }
  
  /* Show top-right icon */
  .eco-card:hover .eco-top-icon {
    opacity: 1;
  }
      @media (min-width: 600px) {

  .eco-card:hover {
    background: #7ba599; /* Green from screenshot */
    height: 200px;
  }
}
  /* Mobile layout */
  @media (max-width: 768px) {
    .ecosystem-grid {
      grid-template-columns: 1fr;
    }
    .ecosystem-section {
        padding: 0px 6vw;
      }
  }
  /* STEP SECTION BASE */

    .step2-section {
        padding: 0;
        margin-left: 5vw !important;
        margin-right: 5vw !important;
    }
  
  .step-title {
    font-family: "Inter Tight", sans-serif;
    font-size: 52px;
    font-weight: 400;
    color: #1f1d2b;
    margin-bottom: 75px;
    margin-top:75px;
  }
  
  .step-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
  }
  
  /* TEXT BLOCK */
  .step-text {
    flex: 1;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.6;
    color: #303036;
  }
  
  .step-text p {
    margin-bottom: 22px;
    text-align: justify;
  }
  
  /* IMAGE BLOCK */
  .step-image-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  
  .step-image {
    width: 100%;
    max-width: 560px;
    border-radius: 18px;
    display: block;
  }
  
  /* ---------------------------------------- */
  /* MOBILE + TABLET RESPONSIVE */
  /* ---------------------------------------- */
  
  @media (max-width: 992px) {
  
    .step-section {
      padding: 70px 6vw;
    }
  
    .step-title {
      font-size: 34px;
      margin-bottom: 50px;
      padding: 0 4vw;
    }
  
    .step-content {
      flex-direction: column;
      align-items: center;
      gap: 40px;
              padding: 0px;
    }
  
    /* IMAGE FIRST ON MOBILE */
    .step-image-wrap {
      order: -1;
      width: 100%;
    }
  
    .step-image {
      width: 100%;
      max-width: 100%;
    }
  
    /* FULL-WIDTH TEXT UNDER IMAGE */
    .step-text {
      max-width: 100%;
      text-align: left;
      font-size: 17px;
      line-height: 1.55;
      padding: 0 2vw;
    }
  }
  
  @media (max-width: 600px) {

    .kinra-platform-section {
        width: 100%;
        background: #ffffff;
        padding: 0;
        display: flex;
        justify-content: center;
    }
    .step2-subtitle {
        text-align: center;
        font-family: "Inter Tight", sans-serif;
        font-size: 15px;
        color: #4f4c59;
        margin-left: 10vw;
        margin-bottom: 40px;
        margin-right: 10vw;
        font-size: 16px;
        color: #5f616b;
        line-height: 28px;
        margin: 0;
                padding: 2px 5px 35px 5px;
    }

.step2-box p {
    font-family: "Inter Tight", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #2d2b38;
    
}
    .clarity-header h2 {
        font-family: "Inter Tight", sans-serif;
        font-size: 26px;
        font-weight: 400;
        line-height: 1.15;
        color: #1f1d2b;
        margin-top: 0px;
    }.clarity-right p {
        font-family: "Inter Tight", sans-serif;
        font-size: 17px;
        line-height: 1.6;
        color: #2f2d3b;
        margin-bottom: 20px;
        font-size: 16px;
        color: #5f616b;
        line-height: 28px;
    }
    .clarity-section {
        padding: 80px 0;
        background: #ffffff;
    }.ecosystem-heading {
        font-family: "Inter Tight", sans-serif;
        font-size: 56px;
        font-weight: 400;
        color: #1f1d2b;
        margin-bottom: 30px;
        margin-top:20vh;
    }
    .ecosystem-subtext {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 60px;
        font-size: 16px;
        line-height: 1.5;
        color: #444;
    }
    .eco-desc {
        position: absolute;
        left: 36px;
        bottom: 36px;
        font-size: 16px;
        line-height: 1.6;
        text-align: justify;
        opacity: 0;
        max-width: 70%;
        color: white;
        transition: all 0.35s 
    ease;
    }.eco-card:hover .eco-title {
        top: 36px;
        bottom: auto;
        color: white;
        max-width: 70%;
                text-align: left;
    }.eco-title {
        position: absolute;
        bottom: 36px;
        left: 36px;
        font-family: Inter Tight;
        font-size: 19px;
        font-weight: 500;
        color: #1a1a1a;
        margin: 0;
        transition: all 0.35s 
    ease;
        max-width: 60%;
                text-align: left;
    }
.step2-title {
    font-family: "Inter Tight", sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: #1f1d2b;
    margin-bottom: 30px;
            margin-top: 0;

}
    .step2-section{
padding: 0;
    }
    .step-text {
        width: 100%;
        text-align: left;
    }
    .step-title {
      font-size: 30px;
    }
  
    .step-top-label {
      font-size: 20px;
    }
  
    .step-text {
      font-size: 16px;
    }
    .philosophy-outcome {
        padding: 0 !important;
        text-align: center;
    }
  }
  


  /* TOP LINE ABOVE STRIP */
.ease-alignment-heading {
    text-align: center;
    padding: 0px 10vw 80px;
    font-family: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }
  
  .ease-alignment-heading h2 {
    font-size: 52px;
    line-height: 1.25;
    font-weight: 400;
    color: #221f34;
        margin-top: 0;
    margin-bottom: 100px;
  }
  
  /* FINAL DARK STRIP */
  .final-cta-strip {
    padding: 0 24px 0px;
    font-family: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }
  
  .final-cta-inner {
    max-width: 1280px;
    margin: 0 auto;
    background: #27213C;
    border-radius: 28px;
    padding: 60px 40px 70px;
    text-align: center;
    color: #ffffff;
  }
  
  /* STRIP TITLE */
  .final-cta-inner h3 {
    font-size: 52px;
    line-height: 1.1;
    font-weight: 400;
    margin: 0 0 24px;
  }
  
  /* STRIP SUBTEXT */
  .final-cta-inner p {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 300;
    margin: 0 0 40px;
    opacity: 0.9;
  }
  
  /* BUTTON */
  .final-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 26px 10px 24px;
    border-radius: 999px;
    border: 1px solid #ffffff;
    background: #ffffff;
    color: #16131f;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease,
                box-shadow 0.22s ease;
  }
  
  .final-cta-label {
    white-space: nowrap;
  }
  
  /* SMALL DARK CIRCLE WITH ARROW */
  .final-cta-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #27213C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .final-cta-icon-arrow {
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
  }
  
  /* HOVER STATE */
  .final-cta-button:hover {
    background: transparent;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  }
  
  .final-cta-button:hover .final-cta-icon-wrap {
    background: #ffffff;
  }
  
  .final-cta-button:hover .final-cta-icon-arrow {
    color: #1f1a30;
  }
  
  /* RESPONSIVE */
  @media (max-width: 900px) {
    .ease-alignment-heading {
         padding-top: 0px;
        margin-top: -20px;
        margin-bottom: -20px;
        padding-bottom: 0;
    }
  
    .ease-alignment-heading h2 {
      font-size: 24px;
    }
  
    .final-cta-inner {
      padding: 30px 20px 50px;
    }
  
    .final-cta-inner h3 {
      font-size: 24px;
    }
  
    .final-cta-inner p {
      font-size: 16px;
    }
  
    .final-cta-button {
      font-size: 15px;
      padding: 10px 22px 10px 20px;
    }
  }
  /* ========== OUTCOME SPOTLIGHT ========== */

.outcome-spotlight {
    padding: 75px 16px;
    background: #ffffff;
    font-family: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont,
      sans-serif;
    text-align: center;
  }
  
  .outcome-title {
    font-size: 52px;
    line-height: 1.2;
    font-weight: 400;
    color: #221f34;
    margin-bottom: 20px;
    
  }
  
  .outcome-sub {
   
    margin: 0 auto 40px;
    font-size: 17px;
    line-height: 1.6;
    color: #413c65;
    margin-bottom:75px;
    font-size: 18px;
    line-height: 30px;
    color: var(--text-muted);
  }
  
  /* WRAPPER WITH ARROWS + CARDS */
  .spotlight-wrapper {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 90vw;
  }
  
  /* DESKTOP ARROWS */
  .spotlight-arrow {
    border: 1px solid #d4d0f0;
    background: #ffffff;
    color: #221f34;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  
  .spotlight-arrow:hover {
    background: #27213c;
    color: #ffffff;
    transform: translateY(-1px);
  }
  
  /* CARDS LAYOUT CONTAINER */
  .spotlight-cards {
    position: relative;
    flex: 1;
    height: 330px;
    overflow: hidden;
    scrollbar-width: none;
  }
  
  /* BASE CARD STYLE */
  .spotlight-card {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60%;
    max-width: 440px;
    margin: auto;
    background: #27213c;
    border-radius: 24px;
    overflow: hidden;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform-origin: center center;
    opacity: 0.14;
    transform: scale(0.9);
    transition: transform 0.45s ease, opacity 0.45s ease,
      box-shadow 0.45s ease, filter 0.45s ease;
  }
  
  .spotlight-card img {
    width: 100%;
    object-fit: cover;
    display: block;
  }
  
  .spotlight-card p {
    margin: 0;
    padding: 16px 24px 24px;
    font-size: 16px;
    line-height: 1.5;
  }
  
  /* LEFT CARD PEEKING FROM LEFT */
  .spotlight-card--left {
    left: 0;
    transform: translateX(0) scale(0.9);
    opacity: 1;
  }
  
  /* CENTER CARD – FULLY FOCUSED */
  .spotlight-card--center {
    left: 50%;
    transform: translateX(-50%) scale(1);
    opacity: 1;
    filter: none;
    z-index: 2;
  }
  
  /* RIGHT CARD PEEKING FROM RIGHT */
  .spotlight-card--right {
    right: 0;
    transform: translateX(0) scale(0.9);
    opacity: 1;
  }
  
  /* ====== MOBILE / TABLET ADAPTATION ====== */
  @media (max-width: 900px) {
    .outcome-spotlight {
      padding: 60px 16px 56px;
    }
  
    .outcome-title {
      font-size: 30px;
    }
  
    .outcome-sub {
      font-size: 16px;
      margin-bottom: 24px;
              line-height: 1.3;
    }
  
    .spotlight-wrapper {
      gap: 0;
    }
  
    /* hide desktop arrows on mobile via your existing .desktop-only OR here */
    .spotlight-arrow.desktop-only {
      display: none;
    }
  
    .spotlight-cards {
      position: relative;
      height: auto;
      overflow: visible;
    }
  
    /* stack cards (we still keep three so JS can rotate content) */
    .spotlight-card {
      height: 324px;
      position: relative;
      width: 100%;
      max-width: none;
      left: auto;
      right: auto;
      margin: 0 0 16px;
      transform: none;
      opacity: 1;
      filter: none;
      box-shadow: unset;
      scrollbar-width: none;
    }
  
    .spotlight-card:last-child {
      margin-bottom: 0;
    }
  }
  a {
    text-decoration: none !important;
    color: inherit !important;
  }
  a:hover {
    opacity: 0.8;
  }
/* =========================================
   INDICATOR STATE COLORS (Current / Next / Last)
   Red = highlighted, Golden = next, Grey = last
   ========================================= */
:root{
  --ind-red: #8B251F;
  --ind-gold: #c8a25a;
  --ind-grey: #cfcfcf;
}

/* Generic "bar" look (for buttons or spans) */
.ind-bar,
.what-bullet,
.t-bar,
.t-bar-2,
.sw-bar {
  appearance: none;
  border: 0;
  outline: none;
  cursor: pointer;
  display: inline-block;
  height: 4px;
  width: 60px;
  border-radius: 999px;
  background: var(--ind-grey);
  opacity: 1;
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

/* spacing */
#whatBullets,
#tBars,
.style-carousel-indicators {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* State coloring */
.is-current { background: var(--ind-red) !important; }
.is-next    { background: var(--ind-grey) !important; }
.is-last    { background: var(--ind-grey) !important; opacity: .85; }

/* Optional: small emphasis */
.is-current { transform: scaleX(1.12); }
.is-next    { transform: scaleX(1.06); }

/* Make mobile taps nicer */
@media (max-width: 768px){
  .what-bullet, .t-bar, .t-bar-2, .sw-bar, .ind-bar{
    height: 4px;
    width: 60px;
  }
}

@media (max-width: 768px) {

  .eco-card {
    min-height: 120px;
        height: 200px;

  }

  .eco-card.active {
    background: #7ba599;
    height: 360px;
  }

  .eco-card.active .eco-title {
    top: 36px;
    bottom: auto;
    color: white;
  }

  .eco-card.active .eco-desc {
    opacity: 1;
    bottom: 0;
  }

  .eco-card.active .collapse-icon {
    opacity: 0;
  }

  .eco-card.active .eco-top-icon {
    opacity: 1;
  }

.eco-card.active .eco-title {
  top: 36px;
  bottom: auto;
  color: white;
  max-width: 169px;
}

.eco-card.active .eco-desc {
  opacity: 1;
  bottom: 0;
}

.eco-card.active .collapse-icon {
  opacity: 0;
}

.eco-card.active .eco-top-icon {
  opacity: 1;
}
}
/* Frame */
.stx-frame{
  max-width: 90vw;
  margin: 28px auto;
  padding: 0 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Pills */
.stx-cattabs{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding:8px;
  width:fit-content;
  margin:0 auto 22px auto;
}

.stx-ct{
  border:1px solid #d7d9e6;
  background:#fff;
  color:#21223b;
  border-radius:999px;
  padding:9px 14px;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.stx-ct:hover{ transform: translateY(-1px); }
.stx-ct.is-active{
  background:#27213c;
  color:#fff;
  border-color:#27213c;
}

/* Slider */
.stx-slider{
  position:relative;
}

.stx-viewport{
  border-radius:14px;
  overflow:hidden;
  background:#f7f8fc;
  border:1px solid rgba(15,16,32,.08);
  box-shadow: 0 12px 30px rgba(15,16,32,.10);
  outline:none;
}

.stx-track{
  display:flex;
  width:100%;
  will-change: transform;
  transition: transform 260ms ease;
}

/* Each slide takes FULL viewport width */
.stx-slide{
  flex: 0 0 100%;
  width:100%;
}

.stx-slide img{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
}

/* Arrows */
.stx-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(15,16,32,.12);
  background:#fff;
  box-shadow: 0 10px 24px rgba(15,16,32,.12);
  cursor:pointer;
  display:grid;
  place-items:center;
  user-select:none;
}
.stx-arrow span{ font-size:18px; }

.stx-arrow-left{ left:-22px; }
.stx-arrow-right{ right:-22px; }

.stx-arrow:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Dots */
.stx-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
  display:none;
}

.stx-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
}
.stx-dot.is-active{
  background:#8B251F;
}

/* Remove zoom button visually if it still exists */
.stx-zoom{ display:none !important; }

@media (max-width:760px){
  .stx-arrow-left{ left:-10px; }
  .stx-arrow-right{ right:-10px; }
   .stx-dots {
        margin-top:30px;
        justify-content:center;
        gap:12px;
        display: flex;
      }  


.stx-dot {
  border: 0;
  width:40px;
  height:4px;
  border-radius:4px;
  background:#d0d0d0;
  cursor:pointer;
  transition:background .3s;
}

.stx-dot.is-active {
  background:#8B251F;
}
}



@media (max-width: 768px) {
  .stx-cattabs {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px 0 !important;

    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    padding: 8px 12px;
    gap: 8px;

    /* optional but helps avoid “cut off” edges */
    scroll-padding-left: 12px;
  }

  .stx-ct {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .stx-cattabs::-webkit-scrollbar { display: none; }
  .stx-cattabs { scrollbar-width: none; }
  .stx-viewport{
  touch-action: pan-y;      /* allow vertical scroll, but we handle horizontal swipe */
  user-select: none;
}

.stx-track{
  will-change: transform;
}

}
/* ===== Curation CTA Section ===== */
.curation-cta{
  background:#fff;
  padding: 90px 16px;
}

.curation-cta__inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 768px) {
  .curation-cta__title{
color: var(--Primary-Black, #222);
text-align: center;
leading-trim: both;
text-edge: cap;

/* Mobile/H2 */
font-family: "Inter Tight";
        font-size: 8vw;
        margin-left: 2vw;
        margin-right: 2vw;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 45.6px */
  }
}
@media (min-width: 768px) {

.curation-cta__title{
 color: #000;
text-align: center;
font-family: "Inter Tight";
font-size: 60px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 60px */
}
}

/* Button pill with right circular icon */
.curation-cta__btn{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 20px;
  border-radius: 999px;
  background: #27213c; /* deep navy/purple */
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.curation-cta__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

.curation-cta__btn:active{
  transform: translateY(0px);
}

.curation-cta__btn:focus-visible{
  outline: 3px solid rgba(31,25,51,.25);
  outline-offset: 3px;
}

.curation-cta__btn-text{
color: var(--Primary-White, #FFF);
leading-trim: both;
text-edge: cap;

/* Btn text */
font-family: "Inter Tight";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 16px */
}

/* right circle */
.curation-cta__btn-icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  color: #27213c;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.curation-cta__btn-icon svg{
  width: 18px;
  height: 18px;
}

/* Mobile tweaks */
@media (max-width: 480px){
  .curation-cta{ padding: 70px 14px; }
  .curation-cta__btn-text{ font-size: 15px; }
}
/* ===== Lightbox ===== */
.stx-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.stx-lightbox.is-open{ display:block; }

.stx-lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}

.stx-lightbox__panel{
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 28px));
  height: min(82vh, 760px);
  margin: 7vh auto 0;
  border-radius: 14px;
  background: #27213c;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

.stx-lightbox__viewport{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  padding: 54px 60px 64px;
  overflow: hidden;
}

/* The image can be zoomed; we pan it via translate when zoomed */
.stx-lightbox__img{
  max-width: 100%;
  max-height: 100%;
  transform: translate(var(--lb-x, 0px), var(--lb-y, 0px)) scale(var(--lb-scale, 1));
  transform-origin: center;
  transition: transform 140ms ease;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.stx-lightbox__img:active{ cursor: grabbing; }

/* Close button */
.stx-lightbox__close{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-size: 24px;
  line-height: 1;
  cursor:pointer;
  z-index: 2;
}

/* Nav arrows */
.stx-lightbox__nav{
      display: none;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  z-index: 2;
}

.stx-lightbox__nav--left{ left: 12px; }
.stx-lightbox__nav--right{ right: 12px; }

.stx-lightbox__nav:disabled{
  opacity: .4;
  cursor: not-allowed;
}

/* Zoom controls */
.stx-lightbox__zoom{
  position:absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display:flex;
  gap: 10px;
  z-index: 2;
}

.stx-lightbox__zoom button{
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor:pointer;
  font-size: 14px;
}

@media (max-width: 768px){
  .stx-lightbox__panel{
    height: 82vh;
    margin-top: 6vh;
  }
  .stx-lightbox__viewport{
    padding: 54px 16px 70px;
  }
}