:root{
  --sg-primary:#E91E63;
  --sg-accent:#FF4F8B;
  --sg-black:#111111;
  --sg-white:#FFFFFF;
  --sg-soft-bg:#FFF5F8;
  --sg-body:#2B2B2B;
  --sg-muted:#6B7280;
  --sg-radius:14px;
  --sg-radius-pill:100px;
  --sg-maxw:1240px;
  --sg-shadow:0 20px 50px -25px rgba(17,17,17,0.25);
  --sg-ff-heading:'Playfair Display', serif;
  --sg-ff-body:'Poppins', sans-serif;
}

body.sonia-glow{
  font-family:var(--sg-ff-body);
  color:var(--sg-body);
  -webkit-font-smoothing:antialiased;
}
.sonia-glow h1,.sonia-glow h2,.sonia-glow h3,.sonia-glow h4{
  font-family:var(--sg-ff-heading);
  color:var(--sg-black);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
}
.sonia-glow img{max-width:100%;display:block;}
.sonia-glow a{color:inherit;text-decoration:none;}

/* Full-width sections with a consistent inner content column.
   Every top-level Elementor container should be set to Full Width;
   this class creates the boxed inner column at 1240px inside it. */
.sg-inner{max-width:var(--sg-maxw);margin:0 auto;padding:0 24px;width:100%;}

/* Vertical rhythm: 80-120px desktop, 60-80px tablet, 40-60px mobile */
.sg-section{padding-top:clamp(80px,8vw,120px);padding-bottom:clamp(80px,8vw,120px);}
.sg-section-tight{padding-top:clamp(60px,6vw,90px);padding-bottom:clamp(60px,6vw,90px);}
@media (max-width:1024px){
  .sg-section{padding-top:70px;padding-bottom:70px;}
  .sg-section-tight{padding-top:60px;padding-bottom:60px;}
}
@media (max-width:767px){
  .sg-section{padding-top:48px;padding-bottom:48px;}
  .sg-section-tight{padding-top:40px;padding-bottom:40px;}
}

/* Buttons */
.sg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:1em 2em;border-radius:var(--sg-radius-pill);
  font-family:var(--sg-ff-body);font-weight:600;font-size:.95rem;
  border:1.5px solid transparent;white-space:nowrap;cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sg-btn-primary{background:var(--sg-primary);color:var(--sg-white);border-color:var(--sg-primary);}
.sg-btn-primary:hover{background:var(--sg-accent);border-color:var(--sg-accent);color:var(--sg-white);transform:translateY(-2px);box-shadow:var(--sg-shadow);}
.sg-btn-secondary{background:var(--sg-white);color:var(--sg-black);border-color:var(--sg-black);}
.sg-btn-secondary:hover{background:var(--sg-primary);border-color:var(--sg-primary);color:var(--sg-white);transform:translateY(-2px);}
.sg-btn-sm{padding:.7em 1.4em;font-size:.85rem;}

/* Reveal / fade-slide animation */
.sg-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.sg-reveal.sg-in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .sg-reveal{opacity:1;transform:none;transition:none;}
}

/* Note: Elementor core CSS forces boxed flex-containers to column direction
   and resets align/justify to initial (see .e-con-boxed.e-flex in
   elementor/assets/css/frontend.css). Every container in this rebuild is
   set to Full Width specifically to avoid that behavior entirely - do not
   leave any top-level or card-row container on the Boxed setting. */