/* =========================================================
   Longlive Homepage – CLEAN, Canva-aligned
   Scope: homepage only (body.ll-home-v2)
   DO NOT add overrides after this file
========================================================= */

body.ll-home-v2 {
  background: #ffffff;
  font-family: "Poppins", system-ui, sans-serif;
}

/* =========================================================
   HERO (Owl Carousel – FIT IN ONE FOLD, NO CROP)
   Goal:
   - hero never exceeds viewport fold
   - image is not cropped (contain)
   - dots stay close
========================================================= */

/* Tune this once if your header is taller/shorter */
body.ll-home-v2 { --ll-header-h: 88px; }

body.ll-home-v2 .home-banner {
  background: #0f7f78;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;

  /* CRITICAL: prevent hero from becoming huge */
  max-height: calc(100vh - var(--ll-header-h));
}

/* Owl containers – remove spacing + keep within fold */
body.ll-home-v2 .home-bannerSliderInner img,
body.ll-home-v2 .hero-image{
  width: auto;
  max-width: 100%;
  height: calc(100vh - var(--ll-header-h));
  max-height: calc(100vh - var(--ll-header-h));
  object-fit: contain;
}
/* Slide wrapper */
body.ll-home-v2 .home-bannerSliderInner {
  margin: 0 !important;
  padding: 0 !important;
  max-height: calc(100vh - var(--ll-header-h));
}

/* Image wrapper (if present in your markup) */
body.ll-home-v2 .home-bannerPic {
  margin: 0 !important;
  padding: 0 !important;
  max-height: calc(100vh - var(--ll-header-h));
}

/* Image – fit, don’t crop */
body.ll-home-v2 .home-bannerSliderInner img,
body.ll-home-v2 .home-bannerPic img,
body.ll-home-v2 .hero-image {
  display: block;
  width: 100%;

  /* CRITICAL: keep hero within fold */
  max-height: calc(100vh - var(--ll-header-h));

  /* CRITICAL: no crop */
  height: auto;
  object-fit: contain;
}

/* Dots – tight to image */
body.ll-home-v2 .home-banner .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 5;
  margin: 0 !important;
  padding: 0 !important;
}

body.ll-home-v2 .home-banner .owl-dot span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  display: block;
  transition: all .2s ease;
}

body.ll-home-v2 .home-banner .owl-dot.active span {
  width: 36px;
  background: #e8a5bf;
}
/* =========================================================
   HERO ALIGNMENT — center banner horizontally
========================================================= */

/* Center each owl slide */
body.ll-home-v2 .homeBanner-carousel .owl-item{
  display: flex;
  justify-content: center;
}

/* Center the image wrapper */
body.ll-home-v2 .home-bannerSliderInner{
  width: 100%;
  display: flex;
  max-height: calc(100vh - var(--ll-header-h));
  justify-content: center;
}

/* Constrain and center the hero image */
body.ll-home-v2 .home-bannerSliderInner img,
body.ll-home-v2 .hero-image{
  max-width: 1400px;   /* key: prevents left anchoring */
  margin: 0 auto;      /* centers image */
}
/* =========================================================
   HERO INNER RAILS — at banner edges (not viewport edges)
   Works only on wide screens where you see side teal space
========================================================= */
body.ll-home-v2{
  --hero-frame: 1320px;   /* matches your optional max-width */
  --hero-half: 660px;     /* half of 1320 */
  --hero-rail: 40px;      /* thickness */
  --hero-rail-opacity: 0.22;
}

/* Only show rails when there actually IS side space */
@media (min-width: 1200px){
  body.ll-home-v2 .home-banner::before,
  body.ll-home-v2 .home-banner::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width: var(--hero-rail);
    background:#38DB80; /* emerald */
    opacity: var(--hero-rail-opacity);
    pointer-events:none;
    z-index: 2; /* above teal bg, below dots */
  }

  /* left rail sits at the left edge of the centered banner frame */
  body.ll-home-v2 .home-banner::before{
    left: calc(50% - var(--hero-half));
  }

  /* right rail sits at the right edge of the centered banner frame */
  body.ll-home-v2 .home-banner::after{
    left: calc(50% + var(--hero-half) - var(--hero-rail));
  }
}
/* =========================================================
   HERO — ultra-wide screens refinement (OPTIONAL)
========================================================= */
@media (min-width: 1400px){
  body.ll-home-v2 .home-bannerSliderInner img,
  body.ll-home-v2 .hero-image{
    max-width: 1320px;
  }
}

/* =========================================================
   OUR SOLUTION – STRUCTURE (Arc like Canva)
   Goal:
   - arc stops before cards
   - less vertical padding
   - flatter / wider arc
========================================================= */

body.ll-home-v2 .ll-solution {
  background: #ffffff;
}

body.ll-home-v2 .ll-solutionArc{
  background:#0f7f78;
  position:relative;
  padding:44px 0 70px;

  /* Use clip-path instead of pseudo-element */
  clip-path: ellipse(55% 140% at 50% 0%);
}



/* “Our solution” pill – bigger than before (correct hierarchy) */
body.ll-home-v2 .ll-solutionArc .subtitle{
  display: inline-flex;              /* better vertical centering */
  align-items: center;
  justify-content: center;

  /* SIZE CONTROL */
  padding: 24px 70px;                /* ↑ THIS is what makes it bigger */
  min-height: 56px;                  /* ensures chunky Canva look */

  border-radius: 999px;

  background: rgba(110, 167, 167, 0.99) !important;

  color: #ffffff !important;
  font-weight: 600;
  font-size: 28px;                   /* text size */
  line-height: 1;                    /* CRITICAL: prevents vertical squash */
  letter-spacing: 0.3px;
}
/* Heading */
body.ll-home-v2 .ll-solutionArc h2{
  margin: 14px auto 0;
  max-width: 820px;

  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.2px;

  font-size: clamp(18px, 1.8vw, 26px); /* smaller */
  line-height: 1.4;                    /* prevents clipping */
}

body.ll-home-v2 .ll-solutionCards{
  margin-top: -50px;                     /* was -84/-56 — reduce overlap */
  padding-top: 32px;                     /* small breathing space */
}
/* =========================================================
   SOLUTION CARDS (ACCEPTABLE VERSION – STABLE)
========================================================= */

body.ll-home-v2 .solutionRow {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;  /* left smaller, right bigger */  gap: 28px;
  align-items: end;
}

body.ll-home-v2 .solutionPane {
  position: relative;
  background: #ffffff;
  border-radius: 34px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.12);
  min-height: 360px;
}

body.ll-home-v2 .solutionPane--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Clinical LEFT */
body.ll-home-v2 .solutionPane--clinicalBg {
  overflow: visible;
}

body.ll-home-v2 .solutionPane--clinicalBg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 34px;
  background: rgba(15,127,120,0.14);
  z-index: 0;
}

body.ll-home-v2 .solutionPhone {
  position: absolute;
  left: -28px;
  bottom: -18px;
  width: min(500px, 80%);
  z-index: 1;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,0.22));
}

body.ll-home-v2 .solutionPaneOverlay {
  position: absolute;
  right: 22px;
  top: 24px;
  width: 52%;
  z-index: 2;
}

body.ll-home-v2 .solutionPaneTitle {
  font-weight: 900;
  color: #0b5f5a;
  line-height: 1.05;
  font-size: clamp(20px, 2vw, 30px);
  margin: 0 0 14px;
}

body.ll-home-v2 .solutionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 16px 26px;
  min-height: 56px;
  font-weight: 900;
  text-decoration: none;
  border: 0;
}

body.ll-home-v2 .solutionBtn--teal {
  background: rgba(255,255,255,0.78);
  color: #0f7f78;
  box-shadow: 0 18px 36px rgba(0,0,0,0.14);
}

/* Clinical RIGHT */
body.ll-home-v2 .solutionPane--clinicalText {
  border: 4px solid #0f7f78;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.96),
    rgba(217,235,232,0.85)
  );
  box-shadow: none;
}

body.ll-home-v2 .solutionPane--text {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.ll-home-v2 .solutionLead {
  font-size: 20px;
  font-weight: 800;
  color: #0b5f5a;
  line-height: 1.25;
  margin-bottom: 22px;
}

body.ll-home-v2 .solutionChipStack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

body.ll-home-v2 .solutionChipStack li {
  padding: 18px;
  border-radius: 999px;
  font-weight: 700;
  color: rgba(11,95,90,0.9);
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(15,127,120,0.22);
}
/* =========================================================
   WELLBEING (Row 2: Longlive Healthy Living)
========================================================= */

/* Outer white frame (like Canva) */
body.ll-home-v2 .solutionFrame {
  background: #ffffff;
  border-radius: 34px;
  padding: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
  margin-top: 28px;
}

/* Make image column smaller like Canva */
body.ll-home-v2 .solutionRow--wellbeing {
  grid-template-columns: 62% 38%;
  gap: 28px;
}

/* Left big rectangle: white -> pink gradient */
body.ll-home-v2 .solutionPane--wellbeingText {
  padding: 40px 42px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.98) 0%,
    rgba(248,231,236,0.85) 55%,
    rgba(239,187,202,0.70) 100%
  );
}

/* Title (pink) */
body.ll-home-v2 .wellbeingTitle {
  font-weight: 900;
  font-size: clamp(28px, 2.2vw, 38px);
  color: #e6a7b8;
  text-align: center;
  justify-content: center;
  margin: 0 0 14px;
}

body.ll-home-v2 .solutionPane--wellbeingText p {
  color: rgba(11,95,90,0.70);
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 22px;
  text-align: center;
  justify-content: center;
}

/* Pills */
body.ll-home-v2 .wellbeingPills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  text-align: center;
  justify-content: center;
  gap: 14px;
}

body.ll-home-v2 .wellbeingPills li {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(209,170,181,0.35);
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 700;
  color: rgba(11,95,90,0.72);
}

/* Right smaller rectangle (pink gradient + collage) */
body.ll-home-v2 .solutionPane--wellbeingMedia {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.70) 0%,
    rgba(241,203,214,0.78) 45%,
    rgba(233,168,186,0.85) 100%
  );
  overflow: visible; /* allow collage bleed */
  min-height: 360px;
}

/* Collage bleed */
body.ll-home-v2 .wellbeingCollage {
  position: absolute;
  right: -18px;
  bottom: -26px;
  width: min(440px, 112%);
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.18));
  z-index: 2;
}

/* CTA top-left inside image box */
/* WELLBEING CTA — foreground, safe from collage overlap */
body.ll-home-v2 .wellbeingCta{
  position: absolute;
  right: 22px;
  bottom: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* SIZE KNOBS */
  padding: 18px 32px;      /* ↑ bigger button (vertical, horizontal) */
  font-size: 18px;         /* ↑ bigger text */
  white-space: nowrap;     /* ✅ forces one line */

  border-radius: 20px;

  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border: 2px solid rgba(230,167,184,0.65);
  color: rgba(230,167,184,1);
  font-weight: 900;
  text-decoration: none;
  line-height: 1.05;

  z-index: 50;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
/* Safety guard: ensure wellbeing stays side-by-side on desktop */
@media (min-width: 992px){
  body.ll-home-v2 .solutionRow--wellbeing{
    grid-template-columns: 62% 38%;
  }
}

/* =========================================================
   HOW IT WORKS — Canva-accurate (SVG image connector)
   Single source of truth
========================================================= */

body.ll-home-v2 .ll-how{
  background: #d9ebe8;
  padding: 78px 0 84px;
  border-radius: 44px;
  margin: 40px auto;
  position: relative;
  overflow: hidden; /* keep rounded panel clean */
}

body.ll-home-v2 .ll-how .container{
  max-width: 1180px;
  margin: 0 auto;
}

/* Flow wrapper = positioning context */
body.ll-home-v2 .ll-how .howFlow{
  position: relative;
}

/* Connector SVG image (behind circles) */
body.ll-home-v2 .ll-how .howConnector{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -65px;              /* MAIN vertical knob */
  width: 1180px;           /* should match container */
  max-width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* 3-column layout (THIS fixes the stacking) */
body.ll-home-v2 .ll-how .howSteps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
  justify-items: center;
  margin-top: 26px;
  position: relative;
  z-index: 2; /* circles above connector */
}

/* Each step */
body.ll-home-v2 .ll-how .howStep{
  width: 100%;
  display: grid;
  justify-items: center;
}

/* Circle card */
body.ll-home-v2 .ll-how .howStep__circle{
  width: min(320px, 92%);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  position: relative;
  transform: scale(0.9);
  transform-origin: center;
}

/* Circle text */
body.ll-home-v2 .ll-how .howStep__circle p{
  margin: 0;
  max-width: 220px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  color: rgba(11,95,90,0.85);
}

/* Label */
body.ll-home-v2 .ll-how .howLabel{
  margin-top: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 26px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Rings + label colors */
body.ll-home-v2 .ll-how .howStep:nth-child(1) .howStep__circle{
  outline: 10px solid #1a90c9;
  outline-offset: -10px;
}
body.ll-home-v2 .ll-how .howStep:nth-child(1) .howLabel{ color:#1a90c9; }

body.ll-home-v2 .ll-how .howStep:nth-child(2) .howStep__circle{
  outline: 10px solid #0f7f78;
  outline-offset: -10px;
}
body.ll-home-v2 .ll-how .howStep:nth-child(2) .howLabel{ color:#0f7f78; }

body.ll-home-v2 .ll-how .howStep:nth-child(3) .howStep__circle{
  outline: 10px solid #41c37a;
  outline-offset: -10px;
}
body.ll-home-v2 .ll-how .howStep:nth-child(3) .howLabel{ color:#41c37a; }

/* Fine tuning knobs (use these to match Canva by nudging circles) */
body.ll-home-v2 .ll-how .howStep:nth-child(1){ transform: translate(60px, 20px); }
body.ll-home-v2 .ll-how .howStep:nth-child(2){ transform: translate(5px, 25px); }
body.ll-home-v2 .ll-how .howStep:nth-child(3){ transform: translate(-50px, 20px); }

/* Mobile */
@media (max-width: 991px){
  body.ll-home-v2 .ll-how .howConnector{ display:none; }
  body.ll-home-v2 .ll-how .howSteps{
    grid-template-columns: 1fr;
    gap: 70px;
  }
}


/*/* =========================================================
   RESPONSIVE (CLEAN + VALID)
========================================================= */
@media (max-width: 991px) {
  body.ll-home-v2 { --ll-header-h: 92px; }

  /* Solution rows stack on mobile */
  body.ll-home-v2 .solutionRow{
    grid-template-columns: 1fr;
  }

  /* Wellbeing row also stacks on mobile */
  body.ll-home-v2 .solutionRow--wellbeing{
    grid-template-columns: 1fr;
  }

  body.ll-home-v2 .solutionPhone{
    width: min(300px, 70%);
    left: -14px;
  }

  body.ll-home-v2 .solutionPaneOverlay{
    width: 70%;
  }

  body.ll-home-v2 .solutionFrame{
    padding: 18px;
  }

  body.ll-home-v2 .solutionPane--wellbeingMedia{
    min-height: 320px;
  }

  body.ll-home-v2 .wellbeingCollage{
    right: -8px;
    bottom: -14px;
    width: min(440px, 100%);

  }

  /* Arc overlap smaller on mobile */
  body.ll-home-v2 .ll-solutionArc{
    padding: 34px 0 44px;
  }

  body.ll-home-v2 .ll-solutionCards{
    margin-top: -56px;
  }

  /* How it works connector off on mobile */
  body.ll-home-v2 .ll-how .howFlow::before{
    display: none;
  }
}
/* =========================================================
   PARTNERS (logo marquee) — homepage only
   Fixes:
   - logos huge/un-styled
   - consistent sizing
   - marquee scroll
========================================================= */

body.ll-home-v2 .ll-partners{
  padding: 58px 0 62px;
  background: #ffffff;
}

/* keep your existing section-title styles; just add spacing harmony */
body.ll-home-v2 .ll-partners .section-title{
  margin-bottom: 18px;
}

/* outer marquee frame */
body.ll-home-v2 .ll-partners .logoMarquee{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(217,235,232,0.55); /* matches ll-how panel */
  border: 1px solid rgba(15,127,120,0.10);
  padding: 18px 0;
}

/* soft fade edges */
body.ll-home-v2 .ll-partners .logoMarquee::before,
body.ll-home-v2 .ll-partners .logoMarquee::after{
  content:"";
  position:absolute;
  top:0;
  width:72px;
  height:100%;
  z-index:2;
  pointer-events:none;
}
body.ll-home-v2 .ll-partners .logoMarquee::before{
  left:0;
  background: linear-gradient(to right, rgba(217,235,232,1), rgba(217,235,232,0));
}
body.ll-home-v2 .ll-partners .logoMarquee::after{
  right:0;
  background: linear-gradient(to left, rgba(217,235,232,1), rgba(217,235,232,0));
}

/* track row */
body.ll-home-v2 .ll-partners .logoMarquee__track{
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  padding: 0 28px;

  /* marquee animation */
  animation: llPartnersScroll 26s linear infinite;
  will-change: transform;
}

/* pause on hover */
body.ll-home-v2 .ll-partners .logoMarquee:hover .logoMarquee__track{
  animation-play-state: paused;
}

/* IMPORTANT: override any global img:width:100% rules */
body.ll-home-v2 .ll-partners .logoMarquee__track img{
  display: block;
  height: 64px;          /* consistent size */
  padding: 10px 14px;    /* ↓ reduce padding so logo dominates */
  width: auto !important;/* prevents stretching */
  max-width: 260px;      /* stops mega-wide logos */
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0.95;

  /* optional: keep transparent pngs clean on tinted bg */
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(15,127,120,0.08);
}

/* infinite loop: you already duplicated the images */
@keyframes llPartnersScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile: no marquee, wrap nicely */
@media (max-width: 991px){
  body.ll-home-v2 .ll-partners .logoMarquee{
    overflow: visible;
    padding: 18px;
  }
  body.ll-home-v2 .ll-partners .logoMarquee::before,
  body.ll-home-v2 .ll-partners .logoMarquee::after{
    display:none;
  }
  body.ll-home-v2 .ll-partners .logoMarquee__track{
    animation: none;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    padding: 0;
  }
  body.ll-home-v2 .ll-partners .logoMarquee__track img{
    height: 34px;
    max-width: 160px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,127,120,0.12);
  }
}
/* =========================================================
   SOCIAL FEED (From our LinkedIn) — homepage only
   Goal:
   - 3 equal cards
   - consistent height
   - no giant posters
   - premium hover + clean spacing
========================================================= */

body.ll-home-v2 .greenLinesShape{
  padding: 64px 0 74px; /* optional: make it consistent */
}

/* Card link wrapper */
body.ll-home-v2 a.socialCard{
  display: block;
  border-radius: 28px;
  overflow: hidden;                 /* crops image into card */
  background: #ffffff;
  border: 1px solid rgba(15,127,120,0.10);
  box-shadow: 0 22px 60px rgba(0,0,0,0.10);
  text-decoration: none;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Fixed card height (desktop) */
body.ll-home-v2 a.socialCard{
  height: 340px;                    /* KEY: makes uniform cards */
}

/* Image fills card */
body.ll-home-v2 a.socialCard img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;                /* keeps it looking like a card */
}

/* Hover */
body.ll-home-v2 a.socialCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 34px 90px rgba(0,0,0,0.14);
}

/* Mobile adjustments */
@media (max-width: 991px){
  body.ll-home-v2 a.socialCard{
    height: 280px;
    border-radius: 24px;
  }
}

/* Small screens: make them taller so text isn't too cropped */
@media (max-width: 575px){
  body.ll-home-v2 a.socialCard{
    height: 320px;
  }
}
/* =========================================================
   HEADER — keep nav on one line + correct spacing
   Scope: homepage only
========================================================= */

/* 1) Ensure header layout uses one row */
body.ll-home-v2 .header .menuArea{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

/* 2) Logo sizing + breathing room */
body.ll-home-v2 .header .logo{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 18px; /* space between logo and menu */
}

body.ll-home-v2 .header .logo img{
  height: 44px;      /* tweak if needed */
  width: auto;
  display: block;
}

/* 3) Make the nav take remaining space and stay in one line */
body.ll-home-v2 .header .menu{
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: 18px;
  min-width: 0; /* important in flex layouts */
}

/* 4) Keep menu lists horizontal and prevent text wrapping */
body.ll-home-v2 .header .menu-ul,
body.ll-home-v2 .header .btn-ul{
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
}

body.ll-home-v2 .header .menu-ul > li,
body.ll-home-v2 .header .btn-ul > li{
  white-space: nowrap; /* prevents "Compression / Assistant" wrapping */
}

/* 5) Slightly tighter spacing for long labels (desktop only) */
@media (min-width: 992px){
  body.ll-home-v2 .header .menu-ul{
    gap: 16px;
  }
  body.ll-home-v2 .header .btn-ul{
    gap: 14px;
  }
}

/* 6) If still wrapping on smaller laptops, reduce font size a touch */
@media (max-width: 1200px){
  body.ll-home-v2 .header .menu-ul a span{
    font-size: 15px;
  }
}
/* =========================================================
   SOLUTION ROW 1 (Clinical) — Canva proportions
   Left card shorter than right card
   Scope: only the FIRST .solutionRow inside ll-solutionCards
========================================================= */
body.ll-home-v2 .ll-solutionCards > .container > .solutionRow{
  align-items: start; /* override stretch */
}

/* Left (image) card slightly shorter */
body.ll-home-v2 .ll-solutionCards > .container > .solutionRow .solutionPane--clinicalBg{
  min-height: 320px; /* Canva: shorter left */
}

/* Right (text) card slightly taller */
body.ll-home-v2 .ll-solutionCards > .container > .solutionRow .solutionPane--clinicalText{
  min-height: 380px; /* Canva: taller right */
}



/* Mobile: keep both natural / stacked */
@media (max-width: 991px){
  body.ll-home-v2 .ll-solutionCards > .container > .solutionRow .solutionPane--clinicalBg,
  body.ll-home-v2 .ll-solutionCards > .container > .solutionRow .solutionPane--clinicalText{
    min-height: auto;
  }
}/* =========================================================
   Clinical row — Canva: bottom-aligned, phone bleeds upward
   Paste at END of layout-styles.css
========================================================= */

/* 1) Bottom align the two cards (not top) */
body.ll-home-v2 .ll-solutionCards > .container > .solutionRow{
  align-items: end; /* IMPORTANT: bottom alignment like Canva */
}

/* 2) Keep left shorter, right taller */
body.ll-home-v2 .ll-solutionCards > .container > .solutionRow .solutionPane--clinicalBg{
  min-height: 320px; /* short left */
  overflow: visible; /* allow phone to bleed outside */
}

body.ll-home-v2 .ll-solutionCards > .container > .solutionRow .solutionPane--clinicalText{
  min-height: 380px; /* taller right */
}

/* 3) Make the phone rise and bleed from the TOP */
body.ll-home-v2 .ll-solutionCards > .container > .solutionRow .solutionPane--clinicalBg .solutionPhone{
  bottom: auto;     /* stop anchoring to bottom */
  top: -34px;       /* KEY: pushes phone upward */
  left: -28px;
}

/* Optional: if the phone now feels too high/low, adjust this only:
   top: -24px; (lower)
   top: -44px; (higher)
*/

/* Mobile: go back to natural stacking */
@media (max-width: 991px){
  body.ll-home-v2 .ll-solutionCards > .container > .solutionRow{
    align-items: start;
  }
  body.ll-home-v2 .ll-solutionCards > .container > .solutionRow .solutionPane--clinicalBg,
  body.ll-home-v2 .ll-solutionCards > .container > .solutionRow .solutionPane--clinicalText{
    min-height: auto;
  }
  body.ll-home-v2 .ll-solutionCards > .container > .solutionRow .solutionPane--clinicalBg .solutionPhone{
    top: auto;
    bottom: -18px; /* restore your mobile-friendly position */
  }
}
/* =========================================================
   Clinical LEFT card — prevent overlay text/button hitting phone
   Paste at END (homepage only)
========================================================= */

/* Make left card a positioning context (just in case) */
body.ll-home-v2 .solutionPane--clinicalBg{
  position: relative;
}

/* Phone bigger = raise its z-index so it stays visually on top */
body.ll-home-v2 .solutionPane--clinicalBg .solutionPhone{
  z-index: 3;
}

/* Overlay should sit to the right of the phone */
body.ll-home-v2 .solutionPane--clinicalBg .solutionPaneOverlay{
  left: %;
  right: 22px;
  width: auto;          /* overrides fixed % width */
  max-width: 52%;
  top: 22px;
  z-index: 2;
}

/* Optional: keep title/button from being too large in that space */
body.ll-home-v2 .solutionPane--clinicalBg .solutionPaneTitle{
  font-size: clamp(18px, 1.6vw, 28px);
}

body.ll-home-v2 .solutionPane--clinicalBg .solutionBtn{
  padding: 14px 22px;
  min-height: 52px;
}
/* Clinical BG: force image to fill the card (crop allowed) */
body.ll-home-v2 .solutionPane.solutionPane--clinicalBg{
  background-repeat: no-repeat !important;
  background-size: cover !important;                 /* fills the box */
  background-position: 85% 50% !important;           /* bias to the right */
}
/* =========================================================
   HOW IT WORKS — Header typography + spacing (match Canva)
   Scoped: homepage only
========================================================= */

/* 1) Make the "How it works" look like a pill */
body.ll-home-v2 .ll-how .subtitle{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 44px;         /* size of pill */
  border-radius: 999px;
  background: #0f7f78;        /* solid teal like Canva */
  color: #ffffff;

  font-weight: 700;
  font-size: 18px;
  line-height: 1;

  margin: 0 auto 18px;        /* space below pill */
}

/* 2) Make your h2 behave like Canva’s H1 */
body.ll-home-v2 .ll-how h2{
  margin: 0 auto 16px;
  max-width: 980px;

  font-weight: 900;
  font-size: clamp(34px, 3.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.6px;

  color: rgba(11,95,90,0.95);
}

/* 3) Lead paragraph: stronger + constrained like Canva */
body.ll-home-v2 .ll-how .section-intro{
  margin: 0 auto 84px;        /* IMPORTANT: creates air before circles */
  max-width: 980px;

  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.25;

  color: rgba(11,95,90,0.85);
}
/* =========================================================
   PARTNERS — Canva heading hierarchy (subtitle pill + bold teal H2)
   Scope: homepage only
========================================================= */

body.ll-home-v2 .ll-partners .section-title{
  margin-bottom: 22px; /* space before marquee */
}

body.ll-home-v2 .ll-partners .section-title .text-center{
  text-align: center;
}

/* Pill */
body.ll-home-v2 .ll-partners .section-title .subtitle{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 48px;        /* knob: pill width */
  min-height: 44px;
  border-radius: 999px;

  background: #0f7f78;
  color: #ffffff;

  font-weight: 700;
  font-size: 18px;           /* knob: pill text size */
  line-height: 1;

  margin: 0 auto 16px;       /* knob: space to heading */
}

/* Heading */
body.ll-home-v2 .ll-partners .section-title h2{
  margin: 0 auto;
  max-width: 980px;

  font-weight: 900;
  font-size: clamp(34px, 3vw, 54px); /* knob: overall heading size */
  line-height: 1.12;
  letter-spacing: -0.6px;

  color: rgba(11,95,90,0.95);
}
/* =========================================================
   SOCIAL FEED — premium Longlive styling (no stretch images)
   Scope: homepage only
========================================================= */

body.ll-home-v2 .greenLinesShape{
  padding: 78px 0 86px;
  position: relative;
  overflow: hidden;

  /* soft premium panel feel */
  background: radial-gradient(circle at 18% 10%, rgba(232,165,191,0.18), transparent 45%),
              radial-gradient(circle at 85% 35%, rgba(15,127,120,0.14), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,1), rgba(217,235,232,0.35));
}

/* Optional: subtle decorative blur blobs */
body.ll-home-v2 .greenLinesShape::before,
body.ll-home-v2 .greenLinesShape::after{
  content:"";
  position:absolute;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
body.ll-home-v2 .greenLinesShape::before{
  left: -120px;
  top: -120px;
  background: rgba(232,165,191,0.65);
}
body.ll-home-v2 .greenLinesShape::after{
  right: -140px;
  bottom: -140px;
  background: rgba(15,127,120,0.55);
}

/* Keep content above blobs */
body.ll-home-v2 .greenLinesShape .container{
  position: relative;
  z-index: 1;
}

/* Headings: make them feel like Canva */
body.ll-home-v2 .greenLinesShape .subtitle,
body.ll-home-v2 .greenLinesShape .sub-title,
body.ll-home-v2 .greenLinesShape .small-title{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border-radius: 999px;
  background: rgba(15,127,120,0.10);
  border: 1px solid rgba(15,127,120,0.18);
  color: rgba(11,95,90,0.85);
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

body.ll-home-v2 .greenLinesShape h2,
body.ll-home-v2 .greenLinesShape .section-title h2{
  font-weight: 900;
  font-size: clamp(34px, 3vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.6px;
  color: rgba(11,95,90,0.95);
  margin: 0 0 10px;
}

body.ll-home-v2 .greenLinesShape p{
  font-size: 18px;
  line-height: 1.5;
  color: rgba(11,95,90,0.70);
}

/* Cards layout spacing if you have a row */
body.ll-home-v2 .greenLinesShape .row{
  margin-top: 26px;
  row-gap: 22px;
}

/* Card wrapper (your existing anchor) */
body.ll-home-v2 a.socialCard{
  display: block;
  border-radius: 30px;
  overflow: hidden;
  background: rgba(255,255,255,0.92);

  /* teal/pink edge glow without looking tacky */
  border: 1px solid rgba(15,127,120,0.14);
  box-shadow:
    0 26px 70px rgba(0,0,0,0.10),
    0 0 0 3px rgba(232,165,191,0.12) inset;

  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Fixed height = consistent cards */
body.ll-home-v2 a.socialCard{
  height: 340px;
}

/* ✅ Image containment rules (prevents stretch/distortion) */
/* ✅ NO CLIP: show full image inside card */
body.ll-home-v2 a.socialCard img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;        /* <-- key change */
  object-position: center;
  background: rgba(56,219,128,0.08);  /* fills the “letterbox” area */
  padding: 10px;              /* optional: gives breathing room */
  box-sizing: border-box;
}
/* === SOCIAL FEED IMAGE POLISH === */

/* Card container */
body.ll-home-v2 .socialCard {
  position: relative;
  border-radius: 24px;
  overflow: hidden; /* critical for soft edges */
  background: rgba(22, 163, 118, 0.10); /* brand green fill */
}

/* Image inside card */
body.ll-home-v2 .socialCard img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* prevents cropping */
  border-radius: 18px;      /* softer than card */
  display: block;
}

/* Subtle inner softening layer (Canva-style) */
body.ll-home-v2 .socialCard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}


/* Hover: lift + slightly stronger glow */
body.ll-home-v2 a.socialCard:hover{
  transform: translateY(-8px);
  border-color: rgba(15,127,120,0.22);
  box-shadow:
    0 36px 90px rgba(0,0,0,0.14),
    0 0 0 3px rgba(15,127,120,0.12) inset,
    0 0 0 6px rgba(232,165,191,0.10) inset;
}

/* Optional: make middle card “featured” slightly */
body.ll-home-v2 .greenLinesShape .row > div:nth-child(2) a.socialCard{
  box-shadow:
    0 32px 90px rgba(0,0,0,0.14),
    0 0 0 3px rgba(15,127,120,0.14) inset,
    0 0 0 7px rgba(232,165,191,0.10) inset;
}

/* Follow link at bottom: make it a CTA */
body.ll-home-v2 .greenLinesShape .followLinkedin,
body.ll-home-v2 .greenLinesShape .follow-us,
body.ll-home-v2 .greenLinesShape .followText{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(15,127,120,0.16);
  color: rgba(11,95,90,0.85);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(0,0,0,0.10);
}

/* Mobile tuning */
@media (max-width: 991px){
  body.ll-home-v2 a.socialCard{ height: 280px; border-radius: 26px; }
}
@media (max-width: 575px){
  body.ll-home-v2 a.socialCard{ height: 320px; }
}
/* =========================================================
   SOCIAL FEED — round the ACTUAL poster images (no extra frame)
   Paste at VERY END of CSS
========================================================= */

/* 1) Remove any "frame" padding/background that may have been added */
body.ll-home-v2 a.socialCard{
  padding: 0 !important;
  background: transparent !important;
  border-radius: 28px;
  overflow: hidden;              /* clips the image to the same radius */
  position: relative;            /* keeps it stable if you add overlays later */
}

/* 2) Force the poster image itself to be rounded */
body.ll-home-v2 a.socialCard img{
  border-radius: 28px !important;  /* force */
  overflow: hidden;                /* extra safety */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;             /* keep full poster visible (no crop) */
  background: rgba(15,127,120,0.12); /* "letterbox" fill behind the poster */
}
/* =========================================================
   LinkedIn CTA — homepage only
========================================================= */

body.ll-home-v2 .ll-linkedin-btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  color: #0f7f78;
  background: rgba(255,255,255,0.92);
  border: 2px solid rgba(15,127,120,0.28);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* LinkedIn badge */
body.ll-home-v2 .ll-linkedin-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  color: #ffffff;
  background: #0a66c2;
}

/* Hover */
body.ll-home-v2 .ll-linkedin-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
  border-color: rgba(15,127,120,0.45);
}
/* --- HERO / Owl fix: don't flex Owl internals --- */
body.ll-home-v2 .homeBanner-carousel .owl-stage-outer,
body.ll-home-v2 .homeBanner-carousel .owl-stage,
body.ll-home-v2 .homeBanner-carousel .owl-item{
  display: block !important;        /* <-- was flex; breaks height calc */
  align-items: unset !important;
  justify-content: unset !important;
  height: auto !important;
}

/* keep centering on your own wrapper instead */
body.ll-home-v2 .home-bannerSliderInner{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* image sizing: stable + never cropped */
body.ll-home-v2 .home-bannerSliderInner img,
body.ll-home-v2 .hero-image{
  width: auto;
  max-width: 100%;
  height: calc(100vh - var(--ll-header-h));
  max-height: calc(100vh - var(--ll-header-h));
  object-fit: contain;
}

/* If you use Owl's lazyLoad, it keeps images at opacity:0 until loaded.
   Ensure they actually fade in (sometimes sticks during autoplay). */
body.ll-home-v2 .homeBanner-carousel .owl-lazy{
  opacity: 1 !important;
}
body.ll-home-v2 .ll-solutionCards{
  margin-top: -12px !important;  /* subtle overlap only */
  padding-top: 24px !important;
}
/* Center text inside Clinical solution chips */
body.ll-home-v2 .solutionChipStack li{
  text-align: center;          /* <-- key fix */
  justify-content: center;
}
/* =========================================================
   FOOTER — keep original style, remove nav row
========================================================= */
body.ll-home-v2 .ll-footer-clean{
  background: #0f7f78;
  padding: 40px 0 34px;
}

/* The rounded “info bar” */
body.ll-home-v2 .ll-footerBar{
  background: rgba(22, 163, 118, 0.22);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1.4fr auto 1fr;
  gap: 16px;
  align-items: center;
}

/* Left pills */
body.ll-home-v2 .ll-footerBar__left{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

body.ll-home-v2 .ll-footerPill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

body.ll-home-v2 .ll-footerPill i{
  opacity: 0.9;
}

/* Social icons */
body.ll-home-v2 .ll-footerBar__center{
  display: flex;
  gap: 10px;
  justify-content: center;
}

body.ll-home-v2 .ll-socialIcon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.12);
  color: #ffffff;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}

body.ll-home-v2 .ll-socialIcon:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,0.18);
}

/* Copyright */
body.ll-home-v2 .ll-footerBar__right{
  text-align: right;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 991px){
  body.ll-home-v2 .ll-footerBar{
    grid-template-columns: 1fr;
    text-align: center;
  }
  body.ll-home-v2 .ll-footerBar__left{
    justify-content: center;
  }
  body.ll-home-v2 .ll-footerBar__right{
    text-align: center;
  }
}
/* HERO image: responsive + no crop */
body.ll-home-v2 .home-bannerSliderInner picture,
body.ll-home-v2 .home-bannerSliderInner picture img{
  display:block;
  width:100%;
}

body.ll-home-v2 .home-bannerSliderInner img,
body.ll-home-v2 .hero-image{
  display:block;
  width:100%;
  height:auto;
  max-height: calc(100vh - var(--ll-header-h));
  object-fit: contain;
  margin: 0 auto;
  max-width: 1320px; /* optional: keep desktop centered */
}
/*/* =========================================================
   MOBILE FIX — Clinical card: phone left, text right
   ========================================================= */
@media (max-width: 991px){

  /* 1) Turn the LEFT card into a 2-column layout */
  body.ll-home-v2 .solutionPane--clinicalBg{
    display: grid !important;
    grid-template-columns: 38% 62% !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    min-height: 220px !important;
  }

  /* 2) Phone = normal flow (NOT absolute) */
  body.ll-home-v2 .solutionPane--clinicalBg .solutionPhone{
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 140% !important;
    max-width: 300px !important;
    z-index: 2 !important;
  }

  /* 3) Overlay = normal flow (THIS is the key) */
  body.ll-home-v2 .solutionPane--clinicalBg .solutionPaneOverlay{
    position: static !important;   /* ← kills right-anchoring */
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
    z-index: 3 !important;
  }

  /* 4) Title + CTA sizing for mobile */
  body.ll-home-v2 .solutionPaneTitle{
    font-size: 28px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  body.ll-home-v2 .solutionBtn{
    padding: 18px 24px !important;
    min-height: 42px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   MOBILE FIX — Wellness collage must NOT bleed out
========================================================= */
@media (max-width: 991px){

  /* 1) Stop the card from allowing bleed */
  body.ll-home-v2 .solutionPane--wellbeingMedia{
    overflow: hidden !important;   /* KEY FIX */
  }

  /* 2) Reposition collage safely inside the card */
  body.ll-home-v2 .wellbeingCollage{
    position: relative !important; /* cancel absolute bleed */
    right: auto !important;
    bottom: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 350px !important;   /* knob: control image size */
    display: block !important;
  }

  /* 3) Optional: give breathing room */
  body.ll-home-v2 .solutionPane--wellbeingMedia{
    padding: 24px 16px 28px !important;
  }
}
/* =========================================================
   MOBILE FIX — center circles by fixing the CONTAINER
========================================================= */
@media (max-width: 991px){

  /* 1. Reset the flow container */
  body.ll-home-v2 .howFlow{
    display: flex !important;
    justify-content: center !important;
  }

  /* 2. Hard-center the steps wrapper */
  body.ll-home-v2 .howSteps{
    width: 100% !important;
    max-width: 420px !important; /* key knob */
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 3. Each step fully centered */
  body.ll-home-v2 .howStep{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 4. Kill desktop offsets */
  body.ll-home-v2 .howStep,
  body.ll-home-v2 .howStep__circle{
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  /* 5. Hide connector */
  body.ll-home-v2 .howConnector{
    display: none !important;
  }
}
/* =========================================================
   MOBILE — Partners: disable marquee + hide duplicate logos
========================================================= */
@media (max-width: 991px){

  /* kill marquee behaviour */
  body.ll-home-v2 .ll-partners .logoMarquee{
    overflow: visible !important;
  }

  body.ll-home-v2 .ll-partners .logoMarquee__track{
    animation: none !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  /* hide the duplicated set (you have 6 real + 6 duplicates) */
  body.ll-home-v2 .ll-partners .logoMarquee__track img:nth-child(n+7){
    display: none !important;
  }

  /* tighten logo pills for mobile */
  body.ll-home-v2 .ll-partners .logoMarquee__track img{
    height: 50px !important;
    max-width: 150px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }
}

 @media (max-width: 991px){
  body.ll-home-v2 .mobile-menu-bg{ z-index: 10040 !important; }
  body.ll-home-v2 .mobile-menu{ z-index: 10050 !important; pointer-events: auto !important; }
  body.ll-home-v2 .header{ z-index: 10030 !important; position: relative !important; }

  body.ll-home-v2 .home-banner::before,
  body.ll-home-v2 .home-banner::after,
  body.ll-home-v2 .hero-bg{
    pointer-events: none !important;
  }
}
/* =========================================================
   HOMEPAGE — hide DESKTOP nav on mobile (use global mobile-menu)
   Paste at VERY END of layout-styles.css
========================================================= */
@media (max-width: 991px){
  /* 1) Hide the desktop nav on mobile */
  body.ll-home-v2 .header .menu{
    display: none !important;
  }

  /* 2) Show burger on mobile */
  body.ll-home-v2 .mobMenu-btn{
    display: inline-flex !important;
  }

  /* 3) Make sure burger stays clickable above hero */
  body.ll-home-v2 .header{
    position: relative !important;
    z-index: 10030 !important;
  }
}