.elementor-1859 .elementor-element.elementor-element-6c6fdcd{--display:flex;}/* Start custom CSS for html, class: .elementor-element-e846bdb *//* ==========================================================
   ABOUT PAGE — 7OF9 JuiceIN
   Scoped under .aboutP (no pink, no cream)
   ========================================================== */

.aboutP,
.aboutP *,
.aboutP *::before,
.aboutP *::after {
  box-sizing: border-box;
}

.aboutP {
  --inkStrong: #0B2E1D;
  --muted: rgba(11, 23, 18, 0.74);
  --mint: rgba(102, 240, 174, 0.22);
  --sun: rgba(255, 211, 90, 0.18);

  position: relative;
  padding: clamp(48px, 6vw, 96px) 0;

  background:
    radial-gradient(900px 520px at 12% 10%, var(--mint), transparent 60%),
    radial-gradient(900px 520px at 90% 14%, var(--sun), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #F2FBF6 52%, #ffffff 100%);
}

/* subtle dot texture */
.aboutP::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.22;
  pointer-events: none;
}

/* container alignment */
.aboutP__wrap {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* basic image hygiene */
.aboutP img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* emphasise inline bolds inside about section */
.aboutP strong {
  color: var(--inkStrong);
  font-weight: 900;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 2px rgba(0, 0, 0, 0.14);
}

/* =========================
   HERO
   ========================= */

.aboutP__head {
  max-width: 980px;
  margin: 0 auto 28px;
  text-align: center;
}

.aboutP__kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #ffffff;
  border: 1px solid rgba(11, 23, 18, 0.12);
  color: rgba(11, 23, 18, 0.78);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* smaller pill variant */
.aboutP__kicker--mini {
  padding: 8px 12px;
  font-size: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.aboutP__title {
  margin: 12px 0 8px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 950;
  letter-spacing: -0.025em;
  color: var(--inkStrong);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.22);
}

.aboutP__sub {
  max-width: 72ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
}

.aboutP__heroCta {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================
   CARD SHELL
   ========================= */

.aboutP__card {
  position: relative;
  border-radius: 34px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.76)
  );
  border: 1px solid rgba(11, 23, 18, 0.1);
  box-shadow:
    0 30px 110px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.55);
  overflow: hidden;
}

/* soft internal glow for all cards */
.aboutP__card::before {
  content: "";
  position: absolute;
  inset: -30px;
  background:
    radial-gradient(640px 380px at 8% 0%, rgba(102, 240, 174, 0.2), transparent 60%),
    radial-gradient(640px 380px at 92% 0%, rgba(255, 211, 90, 0.18), transparent 60%);
  opacity: 0.85;
  filter: blur(18px);
  pointer-events: none;
}

.aboutP__card > * {
  position: relative;
  z-index: 1;
}

.aboutP__cardPad {
  padding: clamp(18px, 2.2vw, 28px);
}

/* =========================
   HEART SECTION
   ========================= */

.aboutP__heart {
  max-width: 760px;
  margin: 0 auto 24px;
}

.aboutP__h3 {
  margin: 0 0 12px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 950;
  color: var(--inkStrong);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.aboutP__body {
  font-size: 15px;
  line-height: 1.9;
  font-weight: 650;
  color: var(--muted);
}

.aboutP__body p {
  margin: 0 0 14px;
}

.aboutP__body p:last-child {
  margin-bottom: 0;
}

/* =========================
   STATS SECTION
   ========================= */

.aboutP__stats {
  margin: 26px 0;
}

.aboutP__statsCard {
  border-radius: 34px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94),
    rgba(255, 255, 255, 0.74)
  );
  border: 1px solid rgba(11, 23, 18, 0.1);
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.14);
}

.aboutP__statsHead {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 16px;
}

.aboutP__statsTitle {
  margin: 0 0 6px;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 950;
  color: var(--inkStrong);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.aboutP__statsSub {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.aboutP__statsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.aboutP__stat {
  padding: 14px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(11, 23, 18, 0.06);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/* subtle accent bar */
.aboutP__stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(102, 240, 174, 0.25), rgba(255, 211, 90, 0.18));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.aboutP__stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
  border-color: rgba(11, 23, 18, 0.14);
}

.aboutP__stat:hover::before {
  opacity: 0.25;
}

.aboutP__statNum {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 950;
  color: var(--inkStrong);
}

.aboutP__statLabel {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(11, 23, 18, 0.72);
}

.aboutP__statNote {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* =========================
   STORY BAND
   ========================= */

.aboutP__storyBand {
  margin: 24px 0;
  padding: 14px;
  border-radius: 28px;
  background: linear-gradient(180deg, #092618, #0B2E1D);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.25);
}

.aboutP__storyInner {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  padding: clamp(18px, 2.2vw, 26px);
}

.aboutP__storyTitle {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 950;
  color: var(--inkStrong);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.aboutP__storyText {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
}

/* =========================
   WHAT WE MAKE (SPLIT)
   ========================= */

.aboutP__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  margin: 24px 0;
}

.aboutP__media {
  padding: 14px;
}

.aboutP__img {
  width: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 26px;
  border: 1px solid rgba(11, 23, 18, 0.1);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.2);
}

.aboutP__panel {
  padding: clamp(18px, 2vw, 26px);
}

.aboutP__panelTitle {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 950;
  color: var(--inkStrong);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.aboutP__list {
  display: grid;
  gap: 12px;
}

.aboutP__itemTitle {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 950;
  color: var(--inkStrong);
}

.aboutP__itemText {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* =========================
   FOUNDER SECTION
   ========================= */

.aboutP__founder {
  margin: 24px 0 0;
}

/* uses .aboutP__card shell */
.aboutP__founderCard {
  padding: clamp(18px, 2.4vw, 28px);
}

.aboutP__founderTitle {
  margin: 6px 0 12px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: var(--inkStrong);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.aboutP__founderBody {
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
}

.aboutP__founderBody p {
  margin: 0 0 12px;
}

.aboutP__founderBody p:last-child {
  margin-bottom: 0;
}

.aboutP__founderName {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 23, 18, 0.78);
}

/* =========================
   ACCESSIBILITY / FOCUS
   ========================= */

.aboutP .btn:focus-visible {
  outline: 2px solid #2FAE6A;
  outline-offset: 2px;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 980px) {
  .aboutP__wrap {
    padding: 0 14px;
  }

  .aboutP__split {
    grid-template-columns: 1fr;
  }

  .aboutP__statsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .aboutP {
    padding: 40px 0 52px;
  }

  .aboutP__head {
    margin-bottom: 20px;
  }

  .aboutP__title {
    font-size: 24px;
  }

  .aboutP__statsGrid {
    grid-template-columns: 1fr;
  }

  .aboutP__storyBand {
    padding: 10px;
  }

  .aboutP__media {
    padding: 10px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3c9ed40 *//* =========================
   OUR PROMISE BLOCK (UNIFIED)
   ========================= */

/* Use same grid base as .aboutP__split but reversed */
.aboutP__promiseBlock.aboutP__split--reverse{
  display:grid;
  grid-template-columns:1.05fr .95fr;  /* consistent with main split */
  gap:18px;
  margin:22px 0;
  align-items:center;
}

/* On desktop: logo on the right, copy on the left (reverse visually) */
.aboutP__promiseBlock .aboutP__panel{
  order:1;
  padding:clamp(18px, 2.2vw, 26px);   /* same as other about cards */
}

.aboutP__promiseBlock .aboutP__media{
  order:2;
  padding:14px;                       /* matches other .aboutP__media */
}

/* Micro label above heading (mini pill, same language as other kickers) */
.aboutP__micro{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 6px;
  padding:6px 12px;
  border-radius:999px;

  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;

  background:#ffffff;
  border:1px solid rgba(11,23,18,.10);
  color:rgba(11,23,18,.78);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}

/* Use same panel title scale but slightly tuned for this block */
.aboutP__panelTitle--promise{
  margin:4px 0 12px;
  font-size:clamp(18px, 1.6vw, 22px);
  font-weight:950;
  letter-spacing:-.015em;
  color:var(--inkStrong);
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 1px 2px rgba(0,0,0,.12);
}

/* Promise list – clean, premium tick bullets */
.aboutP__promiseList{
  margin:0 0 14px;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.aboutP__promiseList li{
  position:relative;
  padding-left:26px;
  font-size:14px;
  line-height:1.8;
  font-weight:650;
  color:var(--muted);
}

.aboutP__promiseList li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:16px;
  height:16px;
  border-radius:999px;
  background:linear-gradient(135deg,#35B276,#FFD35A);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.aboutP__promiseList li::after{
  content:"✓";
  position:absolute;
  left:3px;
  top:1px;
  font-size:11px;
  font-weight:900;
  color:#042013;
}

.aboutP__promiseList strong{
  font-weight:900;
  color:var(--inkStrong);
}

/* Links – same energy as the rest of the page, not shouty */
.aboutP__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}

.aboutP__links a{
  position:relative;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--inkStrong);
  padding-bottom:3px;
}

.aboutP__links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(135deg,#35B276,#FFD35A);
  transition:width .18s ease;
}

.aboutP__links a:hover::after{
  width:100%;
}

/* Logo card – same shell, smaller image to avoid empty space */
.aboutP__media--logo{
  text-align:center;
}

.aboutP__img--logo{
  width:100%;
  max-width:220px;           /* reduced size */
  height:auto;
  min-height:auto;
  margin:6px auto;
  object-fit:contain;
  display:block;
}

/* RESPONSIVE – keep it tidy on mobile */
@media (max-width:980px){
  .aboutP__promiseBlock.aboutP__split--reverse{
    grid-template-columns:1fr;
  }

  /* On mobile: text first, logo second */
  .aboutP__promiseBlock .aboutP__panel{
    order:1;
  }

  .aboutP__promiseBlock .aboutP__media{
    order:2;
  }

  .aboutP__img--logo{
    max-width:200px;
  }
}

@media (max-width:560px){
  .aboutP__promiseBlock.aboutP__split--reverse{
    margin:20px 0;
  }

  .aboutP__promiseList li{
    padding-left:24px;
    font-size:13px;
  }
}/* End custom CSS */