.elementor-3163 .elementor-element.elementor-element-7d6d6c0:not(.elementor-motion-effects-element-type-background), .elementor-3163 .elementor-element.elementor-element-7d6d6c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#767636;}.elementor-3163 .elementor-element.elementor-element-7d6d6c0 > .elementor-background-overlay{background-image:url("https://7of9juicein.com/wp-content/uploads/2026/01/7of9-juicein-banner-services.png");background-repeat:no-repeat;background-size:100% auto;opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3163 .elementor-element.elementor-element-7d6d6c0 .elementor-background-overlay{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-3163 .elementor-element.elementor-element-7d6d6c0{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:140px 0px 60px 0px;}.elementor-3163 .elementor-element.elementor-element-7d6d6c0 > .elementor-shape-top svg{height:120px;transform:translateX(-50%) rotateY(180deg);}.elementor-3163 .elementor-element.elementor-element-7d6d6c0 > .elementor-shape-bottom .elementor-shape-fill{fill:var( --e-global-color-d1c92a2 );}.elementor-3163 .elementor-element.elementor-element-00f44d3 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:0px;}.elementor-3163 .elementor-element.elementor-element-d087760.elementor-element{--align-self:stretch;--flex-grow:0;--flex-shrink:0;}.elementor-3163 .elementor-element.elementor-element-a8fa5ae{--display:flex;}@media(max-width:1024px){.elementor-3163 .elementor-element.elementor-element-7d6d6c0 > .elementor-background-overlay{background-position:top center;opacity:1;}body.elementor-page-3163:not(.elementor-motion-effects-element-type-background), body.elementor-page-3163 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://7of9juicein.com/wp-content/uploads/2025/12/7of9-juicein-banner-test-1024x390.png");background-position:479px 734px;background-repeat:no-repeat;}}@media(max-width:767px){.elementor-3163 .elementor-element.elementor-element-7d6d6c0 > .elementor-background-overlay{background-image:url("https://7of9juicein.com/wp-content/uploads/2026/01/7of9-juicein-banner-services.png");background-position:top right;background-size:1000px auto;opacity:1;}.elementor-3163 .elementor-element.elementor-element-7d6d6c0{padding:120px 0px 50px 0px;}body.elementor-page-3163:not(.elementor-motion-effects-element-type-background), body.elementor-page-3163 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://7of9juicein.com/wp-content/uploads/2025/12/7of9-juicein-banner-test.png");background-position:-390px -19px;background-repeat:no-repeat;}}@media(max-width:479px){.elementor-3163 .elementor-element.elementor-element-7d6d6c0 > .elementor-background-overlay{background-image:url("https://7of9juicein.com/wp-content/uploads/2026/01/7of9-juicein-banner-services.png");background-size:475px auto;}.elementor-3163 .elementor-element.elementor-element-7d6d6c0{padding:110px 0px 50px 0px;}body.elementor-page-3163:not(.elementor-motion-effects-element-type-background), body.elementor-page-3163 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://7of9juicein.com/wp-content/uploads/2025/12/7of9-juicein-banner-test.png");background-position:22px 0px;background-repeat:no-repeat;background-size:initial;}}/* Start custom CSS for html, class: .elementor-element-d087760 *//* =========================
   SERVICES PAGE — PREMIUM TUNED (CSS)
   Paste into Custom CSS / Additional CSS
   Premium • Vibrant • Sales-focused (NO pink / NO cream)
========================= */

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

/* --------------------------
   PAGE FRAME + BACKGROUND
--------------------------- */
.servicesP{
  --inkStrong: #0B2E1D;
  --ink: rgba(11,23,18,.86);
  --muted: rgba(11,23,18,.72);
  --hair: rgba(11,23,18,.10);
  --hair2: rgba(11,23,18,.07);

  --mint: rgba(102,240,174,.20);
  --sun: rgba(255,211,90,.20);
  --glass: rgba(255,255,255,.82);
  --glass2: rgba(255,255,255,.64);

  position:relative;
  overflow:hidden;
  padding: clamp(54px, 5.5vw, 92px) 0 52px;

  background:
    radial-gradient(960px 560px at 10% 4%, var(--mint), transparent 62%),
    radial-gradient(960px 560px at 92% 10%, var(--sun), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

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

/* keep inner content above texture */
.servicesP__inner{
  position:relative;
  z-index:1;
}

/* --------------------------
   INTRO HERO
--------------------------- */
.servicesP__head{
  position:relative;
  max-width: 980px;
  margin: 0 auto 24px;
  text-align:center;

  padding: clamp(20px, 2.8vw, 30px) clamp(18px, 3vw, 32px);
  border-radius: 32px;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--hair);
  box-shadow:
    0 32px 120px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.34);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* glow edge behind hero card */
.servicesP__head::before{
  content:"";
  position:absolute;
  inset:-24px;
  background:
    radial-gradient(720px 360px at 22% 16%, rgba(102,240,174,.20), transparent 62%),
    radial-gradient(720px 360px at 78% 20%, rgba(255,211,90,.20), transparent 62%);
  filter: blur(20px);
  opacity:.95;
  z-index:-1;
}

/* eyebrow / category line */
.servicesP__eyebrow{
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(11,23,18,.60);
}

/* Title: reduced size, tighter line */
.servicesP__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--inkStrong);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  position:relative;
  display:inline-block;
  padding-bottom: 8px;
}

.servicesP__title::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: clamp(80px, 18vw, 150px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(22,165,101,.10),
    rgba(22,165,101,.70),
    rgba(22,165,101,.10)
  );
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}

.servicesP__sub{
  margin: 0 auto 6px;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 640;
  color: rgba(10, 35, 22, .82);
}

.servicesP__sub--emphasis{
  margin-bottom: 8px;
  font-weight: 760;
  color: rgba(10, 35, 22, .88);
}

/* intro chips */
.servicesP__tags{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 8px;
}

.servicesP__tag{
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,23,18,.80);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.96),
    rgba(230,252,243,.96)
  );
  border: 1px solid rgba(11,23,18,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* CTA row */
.servicesP__heroCta{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Divider */
.servicesP__divider{
  width: 72px;
  height: 2px;
  margin: 28px auto 36px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    rgba(11,23,18,.22),
    rgba(11,23,18,.05)
  );
}

/* --------------------------
   EVENT TYPE SEGMENTS
--------------------------- */
.servicesP__segments{
  max-width: 980px;
  margin: 0 auto 46px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.servicesP__segment{
  position:relative;
  border-radius: 24px;
  padding: 16px 16px 14px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.94),
    rgba(255,255,255,.74)
  );
  border: 1px solid var(--hair2);
  box-shadow: 0 22px 80px rgba(0,0,0,.10);
  overflow:hidden;
}

.servicesP__segment::before{
  content:"";
  position:absolute;
  inset:-16px;
  background:
    radial-gradient(520px 260px at 18% 18%, rgba(102,240,174,.16), transparent 62%),
    radial-gradient(520px 260px at 86% 20%, rgba(255,211,90,.14), transparent 62%);
  filter: blur(14px);
  opacity:.85;
  pointer-events:none;
}

.servicesP__segmentTitle{
  position:relative;
  margin:0 0 4px;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(11,23,18,.88);
}

.servicesP__segmentText{
  position:relative;
  margin:0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 650;
  color: rgba(11,23,18,.78);
}

/* --------------------------
   STACK WRAP
--------------------------- */
.servicesP__stack{
  margin-top: 16px;
  display:grid;
  gap: clamp(12px, 1.8vw, 16px);
}

.servicesP__service{
  padding: clamp(4px, 0.9vw, 8px);
}

/* --------------------------
   WhatsApp icon helper
--------------------------- */
.btn--whatsapp{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.btn--whatsapp svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}

/* ==========================================================
   SERVICE CARDS (svcCard)
   ========================================================== */

.svcCard{
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  border: 1px solid rgba(11,23,18,.10);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.96),
    rgba(255,255,255,.70)
  );
  box-shadow:
    0 30px 120px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.30);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  display: grid;
  grid-template-columns: minmax(320px, 1.02fr) minmax(360px, .98fr);
  align-items: stretch;

  transition:
    transform 220ms cubic-bezier(.2,.9,.2,1),
    box-shadow 220ms cubic-bezier(.2,.9,.2,1),
    filter 220ms cubic-bezier(.2,.9,.2,1);
}

.svcCard:hover{
  transform: translateY(-5px);
  box-shadow: 0 44px 150px rgba(0,0,0,.16);
  filter: saturate(1.04);
}

.svcCard::before{
  content:"";
  position:absolute;
  inset:-22px;
  background:
    radial-gradient(620px 360px at 14% 18%, rgba(102,240,174,.18), transparent 62%),
    radial-gradient(620px 360px at 92% 18%, rgba(255,211,90,.16), transparent 62%);
  filter: blur(18px);
  opacity: .9;
  pointer-events:none;
}

.svcCard__media,
.svcCard__panel{
  position: relative;
  z-index: 1;
  min-width: 0;
}

.svcCard__media{
  padding: 12px;
  display:flex;
}

.svcCard__img{
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid rgba(11,23,18,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.16);
  transform: scale(1.01);
}

.svcCard__panel{
  padding: clamp(14px, 1.9vw, 20px);
  display:flex;
  flex-direction: column;
  justify-content:center;
}

.svcCard--imgRight{
  grid-template-columns: minmax(360px, .98fr) minmax(320px, 1.02fr);
}
.svcCard--imgRight .svcCard__media{ order: 2; }
.svcCard--imgRight .svcCard__panel{ order: 1; }

.svcCard__topRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.svcCard__label{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,23,18,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inkStrong);
}

.svcCard__label::before{
  content:"";
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(180deg, #FFD35A, #D6A61C);
  box-shadow: 0 0 0 4px rgba(214,166,28,.18);
}

.svcCard__badge{
  display:inline-flex;
  align-items:center;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  color: var(--inkStrong);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(11,23,18,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.svcCard__badge--inhouse{
  background: linear-gradient(
    180deg,
    rgba(102,240,174,.22),
    rgba(255,255,255,.86)
  );
}

.svcCard__heading{
  margin: 0 0 6px;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: -.02em;
  color: var(--inkStrong);
}

.svcCard__text{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.72;
  font-weight: 650;
  color: rgba(10, 35, 22, .82);
}

.svcCard__price{
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,23,18,.60);
}
.svcCard__price strong{
  color: var(--inkStrong);
}

.svcCard__bullets{
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.svcCard__bullets li{
  display:flex;
  align-items:flex-start;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(11,23,18,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  font-weight: 850;
  font-size: 13px;
  color: rgba(11,23,18,.84);
}

.svcCard__bullets li::before{
  content:"";
  width: 9px;
  height: 9px;
  border-radius: 99px;
  margin-top: 4px;
  background: linear-gradient(180deg, #66F0AE, #2FAE6A);
  box-shadow: 0 0 0 4px rgba(102,240,174,.16);
  flex: 0 0 9px;
}

.svcCard__cta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.svcCard__partner{
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  color: rgba(10, 35, 22, .76);
}

.svcCard__partner strong{
  font-weight: 950;
  color: var(--inkStrong);
}

.svcCard__fine{
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,23,18,.54);
}

.servicesP strong,
.servicesP b{
  color: var(--inkStrong);
}

/* ==========================================================
   HOW IT WORKS
   ========================================================== */

.servicesP__how{
  padding: 40px 0 10px;
}

.howP{
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: 32px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.90),
    rgba(255,255,255,.68)
  );
  border: 1px solid rgba(11,23,18,.10);
  box-shadow: 0 28px 110px rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
}

.howP::before{
  content:"";
  position:absolute;
  inset:-20px;
  background:
    radial-gradient(620px 320px at 18% 18%, rgba(102,240,174,.18), transparent 62%),
    radial-gradient(620px 320px at 86% 18%, rgba(255,211,90,.16), transparent 62%);
  filter: blur(18px);
  opacity:.9;
  pointer-events:none;
}

.howP__title{
  position:relative;
  margin: 0 0 4px;
  text-align:center;
  font-size: 19px;
  font-weight: 950;
  letter-spacing: -.01em;
  color: var(--inkStrong);
}

.howP__sub{
  position:relative;
  margin: 0 0 14px;
  text-align:center;
  font-size: 13px;
  font-weight: 650;
  color: rgba(11,23,18,.74);
}

.howP__grid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.howP__step{
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,23,18,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 12px 12px 10px;
}

.howP__num{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
  color: rgba(11,23,18,.60);
  margin-bottom: 6px;
}

.howP__h{
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 950;
  color: var(--inkStrong);
}

.howP__p{
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 650;
  color: rgba(11,23,18,.74);
}

.howP__cta{
  position:relative;
  margin-top: 16px;
  display:flex;
  gap: 8px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ==========================================================
   PARTNER NOTE
   ========================================================== */

.partnerNoteP{
  padding: 30px 0 10px;
}

.partnerNoteP__card{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 16px 14px;
  border-radius: 24px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(11,23,18,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.10);
}

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

.partnerNoteP__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 650;
  color: rgba(11,23,18,.78);
}

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

@media (max-width: 980px){
  .svcCard{
    grid-template-columns: 1fr;
  }
  .svcCard--imgRight .svcCard__media{
    order: 0;
  }
  .svcCard__img{
    min-height: 260px;
  }

  .servicesP__segments{
    grid-template-columns: 1fr;
  }
  .howP__grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px){
  .servicesP__head{
    padding: 16px 14px 18px;
  }
  .servicesP__title{
    font-size: clamp(24px, 6vw, 30px);
  }
  .servicesP__segments{
    margin-bottom: 36px;
  }
}

@media (max-width: 560px){
  .servicesP__heroCta{
    gap: 8px;
  }
  .svcCard__panel{
    padding: 13px;
  }
  .svcCard__media{
    padding: 10px;
  }
  .howP__grid{
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .svcCard{
    transition:none !important;
  }
  .svcCard:hover{
    transform:none;
    filter:none;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f2f5b94 */<!-- SERVICES STACK -->
    <div class="servicesP__stack" aria-label="Services list">

      <!-- =======================
           BAKING
      ======================= -->
      <section class="servicesP__service" id="baking" aria-labelledby="svc-baking-title">
        <article class="svcCard svcCard--imgLeft">
          <div class="svcCard__media">
            <img
              src="https://7of9juicein.com/wp-content/uploads/2025/12/7of9juicein-Baking-1.png"
              alt="Shades Yummies premium cakes and desserts"
              loading="lazy"
              decoding="async"
              class="svcCard__img"
              width="1200"
              height="800"
            >
          </div>

          <div class="svcCard__panel">
            <div class="svcCard__topRow">
              <p class="svcCard__label">Baking &amp; Desserts</p>
              <span class="svcCard__badge" aria-label="Partner service">Partner Service</span>
            </div>

            <h3 class="svcCard__heading" id="svc-baking-title">
              Desserts that look luxe and taste even better
            </h3>

            <p class="svcCard__text">
              Elegant cakes, dessert boxes and pastries that sit beautifully beside your drinks —
              designed for photos, plated for real enjoyment.
            </p>

            <p class="svcCard__price">
              Starting from <strong>₦15,000</strong> • Dessert boxes / pastries
            </p>

            <ul class="svcCard__bullets" aria-label="Baking highlights">
              <li>Signature dessert boxes &amp; event pastries</li>
              <li>Fresh prep for your exact event date</li>
              <li>Colours and styling matched to your theme</li>
            </ul>

            <div class="svcCard__cta">
              <a
                class="btn btn--primary btn--whatsapp"
                href="https://wa.me/2348065088293?text=Hello%20Shades%20Yummies%2C%0A%0AI%27d%20like%20to%20request%20a%20quote%20for%20baking%20%2F%20desserts%20for%20an%20upcoming%20event.%0A%0AEvent%20date%3A%20%5B%20%5D%0ANumber%20of%20guests%3A%20%5B%20%5D%0AEvent%20type%20or%20theme%3A%20%5B%20%5D%0ALocation%3A%20%5B%20%5D%0A%0APlease%20share%20available%20dessert%20options%2C%20packages%2C%20and%20pricing.%0A%0AThank%20you."
                target="_blank"
                rel="noopener"
                aria-label="Request baking quote on WhatsApp from Shades Yummies"
              >
                <svg aria-hidden="true" viewBox="0 0 32 32" focusable="false">
                  <path d="M19.11 17.56c-.27-.13-1.6-.79-1.85-.88-.25-.09-.43-.13-.61.13-.18.27-.7.88-.86 1.06-.16.18-.32.2-.59.07-.27-.13-1.14-.42-2.17-1.34-.8-.72-1.34-1.6-1.5-1.87-.16-.27-.02-.41.12-.54.12-.12.27-.32.4-.47.13-.16.18-.27.27-.45.09-.18.04-.34-.02-.47-.07-.13-.61-1.47-.83-2.01-.22-.53-.44-.46-.61-.46h-.52c-.18 0-.47.07-.72.34-.25.27-.95.93-.95 2.27 0 1.34.98 2.64 1.12 2.82.13.18 1.93 2.95 4.67 4.13.65.28 1.16.45 1.56.58.66.21 1.26.18 1.73.11.53-.08 1.6-.65 1.83-1.28.23-.63.23-1.17.16-1.28-.06-.11-.25-.18-.52-.32z"/>
                  <path d="M16.02 3C9.39 3 4 8.2 4 14.6c0 2.37.77 4.57 2.08 6.39L4 29l8.36-2.14c1.12.34 2.31.53 3.66.53 6.63 0 12.02-5.2 12.02-11.6S22.65 3 16.02 3zm0 21.07c-1.22 0-2.31-.2-3.32-.57l-.24-.09-4.96 1.27 1.33-4.73-.16-.24c-1.24-1.65-1.89-3.53-1.89-5.45 0-5.01 4.24-9.09 9.24-9.09s9.24 4.08 9.24 9.09-4.24 9.81-9.24 9.81z"/>
                </svg>
                <span>Request Dessert Quote</span>
              </a>

              <a class="btn btn--secondary" href="/shop/">
                View Cake &amp; Dessert Menu
              </a>
            </div>

            <p class="svcCard__partner">
              Partner: <strong>Shades Yummies</strong>
            </p>

            <p class="svcCard__fine">
              Port Harcourt • Subject to capacity.
            </p>
          </div>
        </article>
      </section>

      <!-- =======================
           CATERING
      ======================= -->
      <section class="servicesP__service" id="catering" aria-labelledby="svc-catering-title">
        <article class="svcCard svcCard--imgRight">
          <div class="svcCard__media">
            <img
              src="https://7of9juicein.com/wp-content/uploads/2025/12/7of9juiceIn-Shades-yummies-catering.png"
              alt="Shades Yummies catering and food trays"
              loading="lazy"
              decoding="async"
              class="svcCard__img"
              width="1200"
              height="800"
            >
          </div>

          <div class="svcCard__panel">
            <div class="svcCard__topRow">
              <p class="svcCard__label">Catering &amp; Food Trays</p>
              <span class="svcCard__badge" aria-label="Partner service">Partner Service</span>
            </div>

            <h3 class="svcCard__heading" id="svc-catering-title">
              Food that carries the room — and pairs with your drinks
            </h3>

            <p class="svcCard__text">
              From finger foods to beautifully arranged food trays, we curate menus that sit
              neatly with juices, smoothies and wellness shots — no heavy, clashing options.
            </p>

            <p class="svcCard__price">
              Starting from <strong>₦35,000</strong> • Small-event catering
            </p>

            <ul class="svcCard__bullets" aria-label="Catering highlights">
              <li>Food trays, finger foods &amp; plated options</li>
              <li>Pairing suggestions with your chosen drinks</li>
              <li>Optional on-site service and refills</li>
            </ul>

            <div class="svcCard__cta">
              <a
                class="btn btn--primary btn--whatsapp"
                href="https://wa.me/2348065088293?text=Hello%20Shades%20Yummies%2C%0A%0AI%27d%20like%20to%20request%20a%20quote%20for%20catering%20for%20an%20upcoming%20event.%0A%0AEvent%20date%3A%20%5B%20%5D%0ANumber%20of%20guests%3A%20%5B%20%5D%0AEvent%20type%3A%20%5B%20%5D%0ALocation%3A%20%5B%20%5D%0A%0APlease%20share%20menu%20options%2C%20package%20ideas%2C%20and%20pricing.%0A%0AThank%20you."
                target="_blank"
                rel="noopener"
                aria-label="Request catering quote on WhatsApp from Shades Yummies"
              >
                <svg aria-hidden="true" viewBox="0 0 32 32" focusable="false">
                  <path d="M19.11 17.56c-.27-.13-1.6-.79-1.85-.88-.25-.09-.43-.13-.61.13-.18.27-.7.88-.86 1.06-.16.18-.32.2-.59.07-.27-.13-1.14-.42-2.17-1.34-.8-.72-1.34-1.6-1.5-1.87-.16-.27-.02-.41.12-.54.12-.12.27-.32.4-.47.13-.16.18-.27.27-.45.09-.18.04-.34-.02-.47-.07-.13-.61-1.47-.83-2.01-.22-.53-.44-.46-.61-.46h-.52c-.18 0-.47.07-.72.34-.25.27-.95.93-.95 2.27 0 1.34.98 2.64 1.12 2.82.13.18 1.93 2.95 4.67 4.13.65.28 1.16.45 1.56.58.66.21 1.26.18 1.73.11.53-.08 1.6-.65 1.83-1.28.23-.63.23-1.17.16-1.28-.06-.11-.25-.18-.52-.32z"/>
                  <path d="M16.02 3C9.39 3 4 8.2 4 14.6c0 2.37.77 4.57 2.08 6.39L4 29l8.36-2.14c1.12.34 2.31.53 3.66.53 6.63 0 12.02-5.2 12.02-11.6S22.65 3 16.02 3zm0 21.07c-1.22 0-2.31-.2-3.32-.57l-.24-.09-4.96 1.27 1.33-4.73-.16-.24c-1.24-1.65-1.89-3.53-1.89-5.45 0-5.01 4.24-9.09 9.24-9.09s9.24 4.08 9.24 9.09-4.24 9.81-9.24 9.81z"/>
                </svg>
                <span>Request Catering Quote</span>
              </a>

              <a class="btn btn--secondary" href="/shop/">
                View Food Options
              </a>
            </div>

            <p class="svcCard__partner">
              Partner: <strong>Shades Yummies</strong>
            </p>

            <p class="svcCard__fine">
              Custom packages available for recurring office orders.
            </p>
          </div>
        </article>
      </section>

      <!-- =======================
           DJ & SOUND
      ======================= -->
      <section class="servicesP__service" id="dj-sound" aria-labelledby="svc-dj-title">
        <article class="svcCard svcCard--imgLeft">
          <div class="svcCard__media">
            <img
              src="https://7of9juicein.com/wp-content/uploads/2025/12/daguestpro-sounds.png"
              alt="DJ and sound system rentals for events"
              loading="lazy"
              decoding="async"
              class="svcCard__img"
              width="1200"
              height="800"
            >
          </div>

          <div class="svcCard__panel">
            <div class="svcCard__topRow">
              <p class="svcCard__label">DJ &amp; Sound Rentals</p>
              <span class="svcCard__badge" aria-label="Partner service">Partner Service</span>
            </div>

            <h3 class="svcCard__heading" id="svc-dj-title">
              Clean sound, great energy, zero chasing vendors
            </h3>

            <p class="svcCard__text">
              Trusted DJs and solid sound equipment for weddings, birthdays and corporate events.
              We handle booking, setup and timing — you just choose the vibe.
            </p>

            <p class="svcCard__price">
              Starting from <strong>₦90,000</strong> • DJ + sound setup
            </p>

            <ul class="svcCard__bullets" aria-label="DJ and sound highlights">
              <li>DJ, speakers and mic options in one package</li>
              <li>Setup coordination and timing handled for you</li>
              <li>Perfect add-on to juice bar &amp; catering</li>
            </ul>

            <div class="svcCard__cta">
              <a
                class="btn btn--primary"
                href="https://wa.me/2348125320865?text=Hi%207OF9%20JuiceIN!%20I%27d%20like%20to%20book%20DJ%20%26%20Sound%20(DGP%20Sounds).%20Date%3A%20%5B%5D%20Location%3A%20%5B%5D%20Guests%3A%20%5B%5D.%20Please%20share%20packages%20and%20availability."
                target="_blank"
                rel="noopener"
              >
                Book DJ &amp; Sound
              </a>

              <a
                class="btn btn--secondary"
                href="https://wa.me/2348125320865?text=Hi%207OF9%20JuiceIN!%20Please%20check%20availability%20for%20DJ%20%26%20Sound%20on%20Date%3A%20%5B%5D%20Location%3A%20%5B%5D."
                target="_blank"
                rel="noopener"
              >
                Check Availability
              </a>
            </div>

            <p class="svcCard__partner">
              Partner: <strong>DGP Sounds</strong>
            </p>

            <p class="svcCard__fine">
              We manage booking, timing and delivery.
            </p>
          </div>
        </article>
      </section>

      <!-- =======================
           EVENT POPUP JUICING (IN-HOUSE)
      ======================= -->
      <section class="servicesP__service" id="popup-juicing" aria-labelledby="svc-popup-title">
        <article class="svcCard svcCard--imgRight">
          <div class="svcCard__media">
            <img
              src="https://7of9juicein.com/wp-content/uploads/2025/12/7of9juicein-events.png"
              alt="Live event popup juicing and juice bar"
              loading="lazy"
              decoding="async"
              class="svcCard__img"
              width="1200"
              height="800"
            >
          </div>

          <div class="svcCard__panel">
            <div class="svcCard__topRow">
              <p class="svcCard__label">Event Popup Juicing</p>
              <span class="svcCard__badge svcCard__badge--inhouse" aria-label="In-house service">In-House</span>
            </div>

            <h3 class="svcCard__heading" id="svc-popup-title">
              A live juice bar your guests keep talking about
            </h3>

            <p class="svcCard__text">
              We bring the station, team and cold-pressed blends — a clean, elevated juice bar
              that feels like an experience, not just another drinks table.
            </p>

            <p class="svcCard__price">
              Starting from <strong>₦75,000</strong> • Pop-up juice bar
            </p>

            <ul class="svcCard__bullets" aria-label="Popup highlights">
              <li>Brand-aligned styling and bar setup</li>
              <li>Custom menu for your guest list and vibe</li>
              <li>Fast, chilled service all through your event</li>
            </ul>

            <div class="svcCard__cta">
              <a
                class="btn btn--primary"
                href="https://wa.me/2348125320865?text=Hi%207OF9%20JuiceIN!%20I%27d%20like%20to%20book%20an%20Event%20Popup%20Juice%20Bar.%20Date%3A%20%5B%5D%20Location%3A%20%5B%5D%20Guests%3A%20%5B%5D.%20Please%20share%20packages%20and%20pricing."
                target="_blank"
                rel="noopener"
              >
                Book a Popup Juice Bar
              </a>

              <a class="btn btn--secondary" href="/shop-menu/">
                View Drinks Menu
              </a>
            </div>

            <p class="svcCard__fine">
              Port Harcourt • Made fresh • No concentrates.
            </p>
          </div>
        </article>
      </section>

    </div><!-- /.servicesP__stack -->

  </div>
</section>

<!-- =======================
     HOW IT WORKS
======================= -->
<section class="servicesP__how" aria-labelledby="servicesP-how-title">
  <div class="howP">
    <h3 id="servicesP-how-title" class="howP__title">How it works</h3>
    <p class="howP__sub">Simple planning. Smooth delivery. Happy guests.</p>

    <div class="howP__grid">
      <div class="howP__step">
        <div class="howP__num">01</div>
        <h4 class="howP__h">Tell us the date &amp; guest count</h4>
        <p class="howP__p">We’ll suggest the right mix and package sizes in minutes.</p>
      </div>

      <div class="howP__step">
        <div class="howP__num">02</div>
        <h4 class="howP__h">Choose your service combo</h4>
        <p class="howP__p">Juice bar, catering, desserts, DJ &amp; sound — all in one plan.</p>
      </div>

      <div class="howP__step">
        <div class="howP__num">03</div>
        <h4 class="howP__h">We prep &amp; coordinate everything</h4>
        <p class="howP__p">Including partners. One timeline, one point of contact.</p>
      </div>

      <div class="howP__step">
        <div class="howP__num">04</div>
        <h4 class="howP__h">Delivered, styled &amp; ready</h4>
        <p class="howP__p">Fresh, chilled, polished — your guests simply walk in and enjoy.</p>
      </div>
    </div>

    <div class="howP__cta">
      <a class="btn btn--primary"
         href="https://wa.me/2348125320865?text=Hi%207OF9%20JuiceIN!%20I%27d%20like%20a%20quote%20for%20an%20event.%20Date%3A%20%5B%5D%20Guests%3A%20%5B%5D%20Services%3A%20%5B%5D."
         target="_blank" rel="noopener">
        Get a Quick Quote
      </a>

      <a class="btn btn--secondary"
         href="https://wa.me/2348125320865?text=Hi%207OF9%20JuiceIN!%20I%20have%20a%20question%20about%20your%20services."
         target="_blank" rel="noopener">
        Ask a Question
      </a>
    </div>
  </div>
</section>

<!-- =======================
     PARTNER NOTE
======================= -->
<section class="partnerNoteP" aria-labelledby="partnerNoteP-title">
  <div class="partnerNoteP__card">
    <h3 id="partnerNoteP-title" class="partnerNoteP__title">
      Partner services, one standard
    </h3>

    <p class="partnerNoteP__text">
      When a service is delivered by a partner (like <strong>Shades Yummies</strong> or <strong>DGP Sounds</strong>),
      you still work with one team. We coordinate timing, setup and standards so every part of your event
      feels like 7OF9 JuiceIN — clean, considered and on-brand.
    </p>
  </div>
</section>/* End custom CSS */