/* =====================================================================
   LIGHT CONTENT SECTIONS — qgs  (services page)
     #qgTransform  The QwikGlam Transformation
     #qgHygiene    Beauty Without Compromise
     #qgRewards    The QwikGlam Rewards Programme

   Markup: page-services.php. Each <section> keeps its old class
   (.qg-transformation / .qg-hygiene / .qg-loyalty) only so the existing
   phone rule that hides these sections, and the GSAP scroll triggers, still
   find them. Those classes also carry dark gradients and blurred orbs with
   !important in qg-services.css / qg-services-additions.css — the ID
   selectors below reset them. Everything inside uses qgs- classes.
   ===================================================================== */

html body #qgTransform.qgs,
html body #qgHygiene.qgs,
html body #qgRewards.qgs {
  --qgs-ink:    #231019;
  --qgs-ink-2:  #5E4854;
  --qgs-ink-3:  #8F7A86;
  --qgs-rose:   #B83A66;
  --qgs-line:   rgba(35,16,25,.08);
  --qgs-ease:   cubic-bezier(.2,.8,.2,1);

  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: clamp(72px, 9vw, 120px) 24px !important;
  border: 0 !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: var(--qgs-ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
}
html body #qgHygiene.qgs {
  background: linear-gradient(180deg, #FBF7F4 0%, #F8F2F0 100%) !important;
}
html body #qgTransform.qgs::before, html body #qgTransform.qgs::after,
html body #qgHygiene.qgs::before,   html body #qgHygiene.qgs::after,
html body #qgRewards.qgs::before,   html body #qgRewards.qgs::after {
  content: none !important;
  display: none !important;
}

html body .qgs .qgs-inner { max-width: 1160px; margin: 0 auto; position: relative; }

/* ── Section heading ───────────────────────────────────────────────── */
html body .qgs .qgs-head { max-width: 780px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
html body .qgs .qgs-eyebrow {
  margin: 0 0 14px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--qgs-rose);
}
html body .qgs .qgs-head h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -.015em;
  color: var(--qgs-ink) !important;
  -webkit-text-fill-color: currentColor;
  text-wrap: balance;
}
html body .qgs .qgs-head h2 em {
  font-style: italic; font-weight: 600;
  color: var(--qgs-rose) !important;
  -webkit-text-fill-color: currentColor;
  background: none !important;
}
html body .qgs .qgs-sub {
  margin: 18px auto 0; max-width: 560px;
  font-size: 1.06rem; line-height: 1.6; color: var(--qgs-ink-2);
  text-wrap: pretty;
}

/* ── Transformation: before / after cards ──────────────────────────── */
html body #qgTransform .qgs-ba-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
html body #qgTransform .qgs-ba {
  display: flex; flex-direction: column;
  margin: 0; padding: 8px;
  background: #fff;
  border: 1px solid var(--qgs-line);
  border-radius: 28px;
  box-shadow: 0 1px 2px rgba(35,16,25,.04), 0 18px 40px -24px rgba(35,16,25,.22);
  transition: transform .5s var(--qgs-ease), box-shadow .5s var(--qgs-ease);
}
html body #qgTransform .qgs-ba-pair {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border-radius: 21px;
  overflow: hidden;
  background: #F3EAEE;
}
html body #qgTransform .qgs-ba-shot {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #F3EAEE;
}
html body #qgTransform .qgs-ba-shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 24%;
  display: block; margin: 0;
  transition: transform 1.1s var(--qgs-ease);
}
html body #qgTransform .qgs-ba-tag {
  position: absolute; left: 10px; top: 10px;
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: 999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  color: var(--qgs-ink);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
          backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 1px 6px rgba(35,16,25,.12);
}
html body #qgTransform .qgs-ba-tag--after { left: auto; right: 10px; color: #fff; background: rgba(35,16,25,.72); }
html body #qgTransform .qgs-ba-seam {
  position: absolute; left: 50%; top: 50%;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff; color: var(--qgs-ink);
  box-shadow: 0 4px 14px rgba(35,16,25,.2);
  pointer-events: none;
}
html body #qgTransform .qgs-ba-seam svg { width: 16px; height: 16px; }

html body #qgTransform .qgs-ba-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 12px 12px 14px;
}
html body #qgTransform .qgs-ba-text { min-width: 0; }
html body #qgTransform .qgs-ba-text h3 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.24rem; font-weight: 600; line-height: 1.2; color: var(--qgs-ink);
}
html body #qgTransform .qgs-ba-text p { margin: 4px 0 0; font-size: .88rem; line-height: 1.45; color: var(--qgs-ink-2); }
html body #qgTransform .qgs-ba-link {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--qgs-ink); color: #fff;
  text-decoration: none !important;
  transition: background .25s ease, transform .25s var(--qgs-ease);
}
html body #qgTransform .qgs-ba-link svg { width: 18px; height: 18px; }
html body #qgTransform .qgs-ba-link:hover { background: var(--qgs-rose); transform: translateX(2px); }
html body #qgTransform .qgs-ba-link:focus-visible { outline: 2px solid #D4547A; outline-offset: 3px; }

@media (hover: hover) {
  html body #qgTransform .qgs-ba:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(35,16,25,.04), 0 28px 56px -26px rgba(35,16,25,.32); }
  html body #qgTransform .qgs-ba:hover .qgs-ba-shot img { transform: scale(1.04); }
}

html body #qgTransform .qgs-note {
  margin: 32px 0 0; text-align: center;
  font-size: .82rem; color: var(--qgs-ink-3);
}

/* ── Beauty Without Compromise: feature cards ──────────────────────── */
html body #qgHygiene .qgs-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
html body #qgHygiene .qgs-feature {
  margin: 0; padding: 30px 28px 32px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(35,16,25,.06);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(35,16,25,.03), 0 12px 30px -22px rgba(35,16,25,.2);
  transition: transform .45s var(--qgs-ease), box-shadow .45s var(--qgs-ease);
}
@media (hover: hover) {
  html body #qgHygiene .qgs-feature:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(35,16,25,.04), 0 22px 44px -24px rgba(35,16,25,.28); }
}
html body #qgHygiene .qgs-feature-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin: 0 0 22px;
  border-radius: 14px;
  color: var(--qgs-rose);
  background: linear-gradient(145deg, #FCEDF2, #F7E3EA);
  box-shadow: inset 0 0 0 1px rgba(184,58,102,.1);
}
html body #qgHygiene .qgs-feature-icon svg { width: 22px; height: 22px; }
html body #qgHygiene .qgs-feature h3 {
  margin: 0 0 8px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.08rem; font-weight: 600; line-height: 1.3; letter-spacing: -.005em;
  color: var(--qgs-ink) !important;
}
html body #qgHygiene .qgs-feature p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--qgs-ink-2) !important; }

/* ── Rewards: tier cards ───────────────────────────────────────────── */
html body #qgRewards .qgs-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
html body #qgRewards .qgs-tier {
  position: relative;
  display: flex; flex-direction: column;
  margin: 0; padding: 28px 28px 30px;
  background: #fff;
  border: 1px solid var(--qgs-line);
  border-radius: 28px;
  box-shadow: 0 1px 2px rgba(35,16,25,.03), 0 14px 34px -24px rgba(35,16,25,.2);
}
html body #qgRewards .qgs-tier--gold {
  background: linear-gradient(180deg, #FFFDF8 0%, #FFFFFF 42%);
  border-color: rgba(184,146,74,.35);
  box-shadow: 0 1px 2px rgba(35,16,25,.03), 0 24px 48px -26px rgba(154,111,46,.4);
}
html body #qgRewards .qgs-tier-top { display: flex; align-items: center; gap: 14px; }
html body #qgRewards .qgs-tier-medal {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 4px rgba(0,0,0,.12), 0 4px 10px -4px rgba(35,16,25,.3);
}
html body #qgRewards .qgs-tier--silver   .qgs-tier-medal { background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #D9DCE2 38%, #9CA2AC 100%); }
html body #qgRewards .qgs-tier--gold     .qgs-tier-medal { background: radial-gradient(circle at 32% 28%, #FFF6DC 0%, #E7C678 40%, #B08A3E 100%); }
html body #qgRewards .qgs-tier--platinum .qgs-tier-medal { background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #DCD8EA 40%, #8F88AA 100%); }
html body #qgRewards .qgs-tier h3 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--qgs-ink) !important;
}
html body #qgRewards .qgs-tier-range { margin: 3px 0 0; font-size: .82rem; color: var(--qgs-ink-3); font-variant-numeric: tabular-nums; }

html body #qgRewards .qgs-tier-rate {
  display: flex; align-items: baseline; gap: 8px;
  margin: 24px 0 0; padding: 0 0 22px;
  border-bottom: 1px solid var(--qgs-line);
}
html body #qgRewards .qgs-tier-rate strong {
  font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--qgs-ink); font-variant-numeric: tabular-nums;
}
html body #qgRewards .qgs-tier--gold .qgs-tier-rate strong { color: #9A6F2E; }
html body #qgRewards .qgs-tier-rate span { font-size: .9rem; color: var(--qgs-ink-2); }

html body #qgRewards .qgs-tier-perks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
html body #qgRewards .qgs-tier-perks li {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 0;
  font-size: .93rem; line-height: 1.45; color: var(--qgs-ink) !important;
}
html body #qgRewards .qgs-tier-perks li::before { content: none !important; }
html body #qgRewards .qgs-tier-perks svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: #1F7A4D; }

/* "Your tier" — added by qg-services.js for a signed-in member */
html body #qgRewards .qgs-tier .qg-loyalty-tier-you {
  position: absolute; top: 18px; right: 18px;
  height: 24px; padding: 0 10px; display: inline-flex; align-items: center;
  border-radius: 999px; background: var(--qgs-ink); color: #fff;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
}
html body #qgRewards .qgs-tier:has(.qg-loyalty-tier-you) { border-color: var(--qgs-ink); box-shadow: 0 0 0 1px var(--qgs-ink), 0 24px 48px -28px rgba(35,16,25,.4); }

html body #qgRewards .qgs-rewards-foot {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin: 40px 0 0; text-align: center;
}
html body #qgRewards .qgs-rewards-foot p { margin: 0; font-size: .88rem; color: var(--qgs-ink-3); }
html body .qgs .qgs-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 24px 0 26px;
  border-radius: 999px;
  background: var(--qgs-ink); color: #fff !important;
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none !important;
  box-shadow: 0 10px 24px -12px rgba(35,16,25,.55);
  transition: background .25s ease, transform .2s var(--qgs-ease);
}
html body .qgs .qgs-btn svg { width: 16px; height: 16px; transition: transform .25s var(--qgs-ease); }
html body .qgs .qgs-btn:hover { background: var(--qgs-rose); }
html body .qgs .qgs-btn:hover svg { transform: translateX(2px); }
html body .qgs .qgs-btn:focus-visible { outline: 2px solid #D4547A; outline-offset: 3px; }

/* ── Narrower screens ──────────────────────────────────────────────── */
@media (max-width: 1080px) {
  html body #qgTransform .qgs-ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body #qgHygiene .qgs-features  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three cards in two columns: centre the last one instead of orphaning it left */
  html body #qgTransform .qgs-ba:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 14px);
  }
}
@media (max-width: 900px) {
  html body #qgRewards .qgs-tiers { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 680px) {
  html body #qgTransform.qgs, html body #qgHygiene.qgs, html body #qgRewards.qgs { padding: 64px 16px !important; }
  html body #qgTransform .qgs-ba-grid { grid-template-columns: 1fr; }
  html body #qgHygiene .qgs-features  { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html body .qgs .qgs-ba, html body .qgs .qgs-ba-shot img, html body .qgs .qgs-feature,
  html body .qgs .qgs-btn, html body .qgs .qgs-ba-link { transition: none !important; }
  html body #qgTransform .qgs-ba:hover, html body #qgHygiene .qgs-feature:hover { transform: none; }
  html body #qgTransform .qgs-ba:hover .qgs-ba-shot img { transform: none; }
}