/* ════════════════════════════════════════════════════════════════════════════
   QwikGlam — HOME, FOUR SECTIONS ELEVATED  (WEB-5)
   File: assets/css/qg-home-premium.css
   Loads after qg-app-shell.css. Scoped to four sections and nothing else.
   ════════════════════════════════════════════════════════════════════════════

   SCOPE
   -----
     .qg-services       Premium Beauty Services
     .qg-artists        Meet Our Star Artists
     .qg-before-after   Before & After
     .qg-testimonials   Stories of Glam

   Every selector below is prefixed with one of those four. Nothing here can
   reach the hero, the packages, the membership block or anything else on the
   page, which is what makes it safe to load last and safe to delete whole.

   THE APPROACH — RESTRAINT, NOT DECORATION
   ----------------------------------------
   Luxury on screen is mostly subtraction: fewer competing weights, fewer
   filled colours, more air, and one accent used sparingly enough that it still
   reads as an accent. The palette is already right (plum ink, gold, rose,
   cream); what the sections lacked was a consistent rhythm and material detail.

   So: a single modular type scale shared by all four headings; gold demoted
   from fills to hairlines; one shadow recipe layered rather than a single soft
   blur; images pinned to fixed ratios so a row of cards has one baseline
   instead of four; and motion kept slow and small.

   WHAT IS DELIBERATELY NOT HERE
   -----------------------------
   No invented content. "Stories of Glam" has no customer testimonials yet
   because the platform is pre-launch, and the honest founding-cohort message
   that sits there is treated as the real content it is and given proper
   editorial weight. Writing plausible-looking reviews into a stylesheet's
   ::before would be the same dark pattern this codebase already removed once,
   in the fake "N people viewing" counters on the service cards.
   ════════════════════════════════════════════════════════════════════════════ */

.qg-services,
.qg-artists,
.qg-before-after,
.qg-testimonials {
  /* Ink */
  --p-ink:        #2A1128;
  --p-ink-soft:   #6A4060;
  --p-ink-mute:   rgba(42, 17, 40, .58);
  /* Metal — used as line and text, almost never as fill */
  --p-gold:       #C9A86C;
  --p-gold-deep:  #A8863F;
  --p-gold-hair:  rgba(201, 168, 108, .38);
  /* Accent */
  --p-rose:       #C2547B;
  --p-rose-deep:  #A83060;
  /* Ground */
  --p-cream:      #FEF9F5;
  --p-ivory:      #FFFDFB;
  --p-line:       rgba(42, 17, 40, .09);
  /* One shadow recipe, layered: a tight contact shadow plus a wide soft one.
     A single large blur reads as haze; two reads as a physical object. */
  --p-lift:       0 1px 2px rgba(42,17,40,.06), 0 8px 28px -8px rgba(42,17,40,.14);
  --p-lift-hi:    0 2px 4px rgba(42,17,40,.08), 0 18px 48px -12px rgba(42,17,40,.22);
  --p-radius:     18px;
  --p-ease:       cubic-bezier(.22, .61, .36, 1);
}

/* ────────────────────────────────────────────────────────────────────────────
   1 · SECTION HEADS — one editorial voice across all four
   ──────────────────────────────────────────────────────────────────────────── */

.qg-services  .qg-section-head,
.qg-artists   .qg-section-head,
.qg-before-after .qg-section-head,
.qg-testimonials .qg-section-head {
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}

/* The eyebrow earns its keep with a hairline on each side — the oldest trick in
   editorial layout, and the cheapest way to make a label feel considered. */
.qg-services  .qg-eyebrow,
.qg-artists   .qg-eyebrow,
.qg-before-after .qg-eyebrow,
.qg-testimonials .qg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--p-gold-deep);
}
.qg-services  .qg-eyebrow::before, .qg-services  .qg-eyebrow::after,
.qg-artists   .qg-eyebrow::before, .qg-artists   .qg-eyebrow::after,
.qg-before-after .qg-eyebrow::before, .qg-before-after .qg-eyebrow::after,
.qg-testimonials .qg-eyebrow::before, .qg-testimonials .qg-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--p-gold-hair));
}
.qg-services  .qg-eyebrow::after,
.qg-artists   .qg-eyebrow::after,
.qg-before-after .qg-eyebrow::after,
.qg-testimonials .qg-eyebrow::after {
  background: linear-gradient(90deg, var(--p-gold-hair), transparent);
}

/* Display serif, tightened. `text-wrap: balance` stops a two-line heading
   leaving one orphan word on line two — the single most visible difference
   between a typeset page and a typed one. */
.qg-services  .qg-section-head h2,
.qg-artists   .qg-section-head h2,
.qg-before-after .qg-section-head h2,
.qg-testimonials .qg-section-head h2 {
  margin: .5rem 0 .75rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--p-ink);
  text-wrap: balance;
}

/* The italic word inside each heading is already in the markup as a <span>. */
.qg-services  .qg-section-head h2 span,
.qg-artists   .qg-section-head h2 span,
.qg-before-after .qg-section-head h2 span,
.qg-testimonials .qg-section-head h2 span {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(100deg, var(--p-gold-deep), var(--p-gold) 55%, var(--p-rose));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.qg-services  .qg-section-head > p,
.qg-artists   .qg-section-head > p,
.qg-before-after .qg-section-head > p,
.qg-testimonials .qg-section-head > p {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--p-ink-mute);
  text-wrap: pretty;
}

/* ────────────────────────────────────────────────────────────────────────────
   2 · PREMIUM BEAUTY SERVICES
   ──────────────────────────────────────────────────────────────────────────── */

.qg-services {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(201,168,108,.07), transparent 60%),
    var(--p-cream);
}

/* The live-availability line. Kept because it reports a real server figure,
   but demoted to a quiet monospaced-feeling stat instead of a red alert — the
   difference between informing and pressuring. */
.qg-services .qg-services__urgency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline: auto;
  padding: 7px 16px;
  border: 1px solid var(--p-line);
  border-radius: 999px;
  background: var(--p-ivory);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--p-ink-soft);
}
.qg-services .qg-urgency-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2E9E5B;
  box-shadow: 0 0 0 3px rgba(46,158,91,.16);
}

/* Filter tabs as a swipeable rail — no wrapping to three ragged lines. */
.qg-services .qg-services-filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 16px;
  margin-inline: -16px;
}
.qg-services .qg-services-filter::-webkit-scrollbar { display: none; }

.qg-services .qg-filter-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 10px 18px;
  border: 1px solid var(--p-line);
  border-radius: 999px;
  background: var(--p-ivory);
  color: var(--p-ink-soft);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s var(--p-ease), border-color .25s var(--p-ease),
              background .25s var(--p-ease), box-shadow .25s var(--p-ease);
}
.qg-services .qg-filter-tab:hover { border-color: var(--p-gold-hair); color: var(--p-ink); }

/* Active = ink, not a coloured fill. A dark pill against cream is calmer and
   higher-contrast than the brand pink it replaces. */
.qg-services .qg-filter-tab.active {
  background: var(--p-ink);
  border-color: var(--p-ink);
  color: #fff;
  box-shadow: var(--p-lift);
}

/* Cards */
.qg-services .qg-service-card {
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  background: var(--p-ivory);
  box-shadow: var(--p-lift);
  overflow: hidden;
  transition: transform .45s var(--p-ease), box-shadow .45s var(--p-ease),
              border-color .45s var(--p-ease);
}
.qg-services .qg-service-card:hover,
.qg-services .qg-service-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--p-lift-hi);
  border-color: var(--p-gold-hair);
}

/* One ratio for every card image, so a row shares a baseline no matter what
   the source images are. */
.qg-services .qg-service-card__img,
.qg-services .qg-service-card .qg-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(135deg, #F6EDE6, #EFE2DA);
}
.qg-services .qg-service-card__img img,
.qg-services .qg-service-card .qg-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--p-ease);
}
.qg-services .qg-service-card:hover .qg-service-card__img img,
.qg-services .qg-service-card:hover .qg-card-media img { transform: scale(1.045); }

/* Scrim so any overlaid badge stays legible on a light photo. */
.qg-services .qg-service-card__img::after,
.qg-services .qg-service-card .qg-card-media::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to top, rgba(20,8,20,.42), transparent);
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   3 · MEET OUR STAR ARTISTS
   Portraits, treated like portraits: a taller ratio, a warm duotone ground
   while the image loads, and the name plate over a scrim rather than beneath
   the photo in its own grey strip.
   ──────────────────────────────────────────────────────────────────────────── */

.qg-artists { background: var(--p-ivory); }

.qg-artists .qg-artists-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 16px 10px;
  margin-inline: -16px;
}
.qg-artists .qg-artists-grid::-webkit-scrollbar { display: none; }

.qg-artists .qg-artist-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: min(72vw, 250px);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  background: var(--p-ivory);
  box-shadow: var(--p-lift);
  overflow: hidden;
  transition: transform .45s var(--p-ease), box-shadow .45s var(--p-ease),
              border-color .45s var(--p-ease);
}
.qg-artists .qg-artist-card:hover,
.qg-artists .qg-artist-card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--p-lift-hi);
  border-color: var(--p-gold-hair);
}

.qg-artists .qg-artist-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(140deg, #F3E7E0 0%, #E8D6CC 100%);
}
.qg-artists .qg-artist-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* faces sit high in a portrait crop */
  transition: transform 1.2s var(--p-ease);
}
.qg-artists .qg-artist-card:hover .qg-artist-media img { transform: scale(1.05); }
.qg-artists .qg-artist-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,8,20,.58) 0%, rgba(20,8,20,.12) 38%, transparent 62%);
  pointer-events: none;
}

/* A single gold hairline under each card's content block — the one piece of
   metal per card, which is what keeps it feeling like metal. */
.qg-artists .qg-artist-card > *:not(.qg-artist-media) {
  position: relative;
  padding: 14px 14px 16px;
}
.qg-artists .qg-artist-card > *:not(.qg-artist-media)::before {
  content: "";
  position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--p-gold-hair) 30%, var(--p-gold-hair) 70%, transparent);
}

/* ── 3b · ARTISTS AS A RAIL AT EVERY WIDTH (WEB-10) ─────────────────────────
   Eight cards in a desktop grid asks a customer to compare eight strangers at
   once. §77: "Do: guide customers. Do not: force customers to compare
   everything." A rail shows three or four properly and offers the next.

   The edge fade is the affordance that makes it obvious more exists — a hard
   crop at the container edge reads as a layout bug, a fade reads as a deck.
   `mask-image` rather than a gradient overlay so it works over any ground. */
.qg-artists .qg-artists-grid {
  scroll-padding-inline: clamp(16px, 4vw, 32px);
}
.qg-artists .qg-artists-grid:focus-visible {
  outline: 2px solid var(--p-gold-deep);
  outline-offset: -4px;
  border-radius: 12px;
}

@media (min-width: 768px) {
  .qg-artists .qg-artists-grid {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
    gap: 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px,
                        #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px,
                        #000 calc(100% - 44px), transparent 100%);
  }
  .qg-artists .qg-artist-card { width: 264px; }
}

/* The artists rail has no dots — with eight cards they would be eight
   near-identical targets. Arrows only, right-aligned under the rail. */
.qg-rail-nav--artists {
  justify-content: flex-end;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.qg-artists .qg-center .qg-btn--primary {
  border-radius: 999px;
  letter-spacing: .04em;
  box-shadow: var(--p-lift);
  transition: transform .3s var(--p-ease), box-shadow .3s var(--p-ease);
}
.qg-artists .qg-center .qg-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--p-lift-hi);
}

/* ────────────────────────────────────────────────────────────────────────────
   4 · BEFORE & AFTER
   The comparison is the content, so the frame gets out of its way: dark ground
   so both photos read, a gold handle, and the caption as a quiet plate.
   ──────────────────────────────────────────────────────────────────────────── */

/* LIGHT, AT EVERY WIDTH (WEB-9).
   An earlier version of this file made the section dark above 768px. It looked
   striking in isolation and wrong in place: one near-black band interrupting
   twenty cream sections reads as a different website, and it fought the system
   qg-mobile.css already establishes below 768px —

     html body.home #qg-home .qg-before-after { background: #FEF7F2 !important }

   Two grounds for one section also meant two sets of ink, and a light-on-dark
   colour that leaked past its breakpoint would have been white text on cream.
   One ground removes that entire class of bug.

   So the drama comes from the PHOTOGRAPHY, not the backdrop: a warm ivory
   ground, generous white cards, and a gold hairline. On a page about
   transformation, the images should be the only things competing for attention. */
.qg-before-after {
  background:
    radial-gradient(95% 60% at 50% 0%, rgba(201,168,108,.12), transparent 62%),
    linear-gradient(180deg, #FDF6F1 0%, #FEFAF7 55%, #FDF3F1 100%);
}
.qg-before-after .qg-section-head h2  { color: var(--p-ink); }
.qg-before-after .qg-section-head > p { color: var(--p-ink-mute); }
.qg-before-after .qg-eyebrow          { color: var(--p-gold-deep); }

.qg-before-after .qg-ba-card {
  background: #fff;
  border-color: rgba(201,168,108,.28);
  /* Deeper than the standard card lift: these sit on a warm ground and need
     the separation to read as objects rather than as part of the backdrop. */
  box-shadow:
    0 1px 2px rgba(42,17,40,.05),
    0 10px 24px -10px rgba(42,17,40,.16),
    0 36px 64px -28px rgba(42,17,40,.28);
}
.qg-before-after .qg-ba-info {
  color: var(--p-ink-soft);
  border-top-color: rgba(201,168,108,.2);
  background: linear-gradient(180deg, #fff, #FFFCF9);
}

/* The Before / After chips sit on photographs of skin and hair — mid-tones,
   often pale. A translucent dark chip stays legible on all of them; a white
   one disappears on exactly the bright images this section is selling. */
.qg-before-after .qg-ba-label {
  background: rgba(26, 10, 24, .62) !important;
  color: #FFF8F2 !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  letter-spacing: .1em;
}

.qg-before-after .qg-ba-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 16px 12px;
  margin-inline: -16px;
}
.qg-before-after .qg-ba-grid::-webkit-scrollbar { display: none; }

/* Ground and shadow are set per-breakpoint above, because the section's
   background differs by breakpoint and a card has to sit on its own ground. */
.qg-before-after .qg-ba-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: min(82vw, 340px);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  overflow: hidden;
}

.qg-before-after .qg-ba-slider {
  position: relative;
  aspect-ratio: 1 / 1;      /* square: equal weight to both halves */
  overflow: hidden;
  background: #180712;
}
.qg-before-after .qg-ba-slider img { width: 100%; height: 100%; object-fit: cover; }

/* The drag handle. Gold, thin, with a soft glow so it stays findable over a
   busy photo without becoming furniture. */
.qg-before-after .qg-ba-slider [class*="handle"],
.qg-before-after .qg-ba-slider [class*="divider"] {
  background: linear-gradient(180deg, transparent, var(--p-gold) 12%, var(--p-gold) 88%, transparent) !important;
  box-shadow: 0 0 14px rgba(201,168,108,.55);
}

.qg-before-after .qg-ba-info {
  padding: 13px 15px 15px;
  border-top: 1px solid rgba(201,168,108,.18);
  font-size: .8125rem;
  line-height: 1.5;
}
/* Gold reads on both grounds, so the credit line needs no per-breakpoint
   variant — it is the one colour that works dark-on-light and light-on-dark. */
.qg-before-after .qg-ba-info strong { color: var(--p-gold-deep); font-weight: 700; letter-spacing: .01em; }
@media (min-width: 768px) {
  .qg-before-after .qg-ba-info strong { color: var(--p-gold); }
}

/* ────────────────────────────────────────────────────────────────────────────
   5 · STORIES OF GLAM
   There are no customer testimonials yet — the platform is pre-launch. What is
   here is an honest founding-cohort invitation, so it is set as a pull-quote
   card rather than dressed up as social proof it does not have.
   ──────────────────────────────────────────────────────────────────────────── */

.qg-testimonials {
  background:
    radial-gradient(90% 55% at 50% 100%, rgba(194,84,123,.07), transparent 60%),
    var(--p-cream);
}

.qg-testimonials .qg-founding {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
  padding: 34px 24px 30px;
  border: 1px solid var(--p-line);
  border-radius: 22px;
  background: var(--p-ivory);
  box-shadow: var(--p-lift);
  text-align: center;
  overflow: hidden;
}

/* Gold capline across the top of the card. */
.qg-testimonials .qg-founding::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--p-gold) 22%, var(--p-rose) 50%, var(--p-gold) 78%, transparent);
}

.qg-testimonials .qg-founding__badge {
  border-radius: 999px;
  font-size: .6875rem !important;
  letter-spacing: .16em !important;
}

/* The paragraph is the voice of the section — give it editorial size and a
   serif face, the way a pull-quote is set in print. */
.qg-testimonials .qg-founding > p {
  max-width: 32rem;
  margin: 14px auto 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--p-ink-soft);
  text-wrap: pretty;
}

.qg-testimonials .qg-founding__rule { margin: 20px auto; }
.qg-testimonials .qg-founding__rule-icon {
  color: var(--p-gold);
  letter-spacing: .5em;
  font-size: .75rem;
  opacity: .85;
}

.qg-testimonials .qg-founding__cta {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--p-ink), #4A2246);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .03em;
  box-shadow: var(--p-lift);
  transition: transform .3s var(--p-ease), box-shadow .3s var(--p-ease);
}
.qg-testimonials .qg-founding__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--p-lift-hi);
}

/* ════════════════════════════════════════════════════════════════════════════
   WEB-11 — SEASONAL EDITS · SAFETY SOS · FAQ
   Three sections, one idea: let the type and the spacing do the work, and use
   exactly one accent. These are scoped selectors like everything above, so
   nothing here reaches another section.
   ════════════════════════════════════════════════════════════════════════════ */

.qg-seasonal,
.qg-safety,
.qg-faq {
  --w-ink:    #2A1128;
  --w-soft:   #6A4060;
  --w-mute:   rgba(42, 17, 40, .64);
  --w-gold:   #C9A86C;
  --w-gold-d: #A8863F;
  --w-rose:   #C2547B;
  --w-line:   rgba(42, 17, 40, .085);
  --w-ease:   cubic-bezier(.22, .61, .36, 1);
}

/* ── SEASONAL EDITS ────────────────────────────────────────────────────────
   Five collection tiles. The photography-less cards carry their weight through
   a deep colour field, so the job here is restraint: one radius, one ratio, a
   readable scrim, and a caption that starts at the bottom rather than floating.
   ────────────────────────────────────────────────────────────────────────── */
.qg-seasonal { background: linear-gradient(180deg, #FEFAF7, #FDF4F1); }

/* WEB-12: a RAIL, not a wrapping grid. Five 400px-tall tiles in a grid pushed
   the rest of the page two screens down and wrapped the two newest onto a
   second row nobody scrolled to. The edge fade is what makes "there is more"
   legible — a hard crop at the container edge reads as a layout bug. */
.qg-seasonal .qg-seasonal__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(14px, 2vw, 22px);
  max-width: 1240px;
  margin-inline: auto;
  padding: 4px clamp(16px, 4vw, 32px) 14px;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(16px, 4vw, 32px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qg-seasonal .qg-seasonal__grid::-webkit-scrollbar { display: none; }
.qg-seasonal .qg-seasonal__grid:focus-visible {
  outline: 2px solid var(--w-gold-d);
  outline-offset: -4px;
  border-radius: 12px;
}
@media (min-width: 768px) {
  .qg-seasonal .qg-seasonal__grid {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px,
                        #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px,
                        #000 calc(100% - 44px), transparent 100%);
  }
}

/* Packages: the same rail treatment. The track already scrolled — it just gave
   no sign that it did, which is why two of the five were never seen. */
.qg-packages .qg-packages-track {
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(16px, 4vw, 32px);
  scrollbar-width: none;
}
.qg-packages .qg-packages-track::-webkit-scrollbar { display: none; }
.qg-packages .qg-packages-track > * { scroll-snap-align: start; }
.qg-packages .qg-packages-track:focus-visible {
  outline: 2px solid var(--w-gold-d);
  outline-offset: -4px;
  border-radius: 12px;
}
@media (min-width: 768px) {
  .qg-packages .qg-packages-track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px,
                        #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px,
                        #000 calc(100% - 44px), transparent 100%);
  }
}

.qg-seasonal .qg-seasonal-card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(82vw, 340px);
  min-height: 400px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(42,17,40,.08),
    0 18px 40px -18px rgba(42,17,40,.42);
  transition: transform .5s var(--w-ease), box-shadow .5s var(--w-ease);
}
@media (hover: hover) and (pointer: fine) {
  .qg-seasonal .qg-seasonal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 4px rgba(42,17,40,.1), 0 34px 70px -24px rgba(42,17,40,.55);
  }
}

/* A scrim that is strongest exactly where the text sits, so the caption is
   legible without flattening the colour field above it. */
.qg-seasonal .qg-seasonal-card__overlay {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top,
              rgba(12, 4, 12, .82) 0%,
              rgba(12, 4, 12, .46) 34%,
              rgba(12, 4, 12, .06) 68%,
              transparent 100%);
}

.qg-seasonal .qg-seasonal-card__body {
  position: relative; z-index: 1;
  margin-top: auto;               /* caption sits on the floor, not mid-air */
  padding: clamp(18px, 3vw, 26px);
  color: #FFF8F2;
}

.qg-seasonal .qg-seasonal-card__tag {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid rgba(255, 248, 242, .28);
  border-radius: 999px;
  background: rgba(255, 248, 242, .1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .6rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}
.qg-seasonal .qg-seasonal-card h3 {
  margin: .7rem 0 .45rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 600; line-height: 1.16; letter-spacing: -.01em;
  color: #FFF8F2;
  text-wrap: balance;
}
.qg-seasonal .qg-seasonal-card p {
  margin: 0;
  font-size: .875rem; line-height: 1.6;
  color: rgba(255, 248, 242, .76);
  text-wrap: pretty;
}
.qg-seasonal .qg-seasonal-card__price {
  margin-top: .85rem;
  font-size: 1.02rem; font-weight: 700; letter-spacing: .01em;
  color: var(--w-gold);
}
/* A sentence set at price size shouts. Where there is no figure, the line is
   a description and is typed like one. */
.qg-seasonal .qg-seasonal-card__price--quote {
  font-size: .82rem; font-weight: 600;
  color: rgba(255, 248, 242, .72);
}

/* ── "DURING YOUR SESSION" — LIGHT ─────────────────────────────────────────
   It was a near-black bar mid-section. A dark slab is how a page signals
   DANGER, and this line is reassurance: the safety net that is already there.
   Light ground, rose accent, the SOS chip doing the emphasis on its own.
   ────────────────────────────────────────────────────────────────────────── */
.qg-safety .qg-safety-sos {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 1000px;
  margin: clamp(22px, 3vw, 34px) auto 0;
  padding: 18px 20px;
  border: 1px solid rgba(194, 84, 123, .22);
  border-left: 3px solid var(--w-rose);
  border-radius: 16px;
  background: linear-gradient(180deg, #FFF6F8, #FFFDFC);
  box-shadow: 0 1px 2px rgba(42,17,40,.04), 0 10px 26px -14px rgba(194,84,123,.3);
}
.qg-safety .qg-safety-sos__ic {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--w-rose), #A83060);
  box-shadow: 0 4px 12px -4px rgba(168, 48, 96, .55);
  font-size: 1rem;
  line-height: 1;
}
.qg-safety .qg-safety-sos p {
  margin: 0;
  font-size: .92rem; line-height: 1.62;
  color: var(--w-mute);
  text-wrap: pretty;
}
.qg-safety .qg-safety-sos strong { color: var(--w-ink); font-weight: 700; }

/* ── YOUR QUESTIONS, ANSWERED ──────────────────────────────────────────────
   An accordion is mostly a list of tap targets, so the whole row is the
   target — not the 14px "+" glyph at the end of it. Hairline dividers rather
   than boxes: six bordered cards read as six competing objects, one ruled list
   reads as one document.
   ────────────────────────────────────────────────────────────────────────── */
.qg-faq { background: linear-gradient(180deg, #FEFAF7, #FDF6F2); }

/* The real markup, checked rather than assumed: .qg-faq__container wrapping
   .qg-acc blocks, each a <button class="qg-acc__header"> plus a
   .qg-acc__content whose max-height is driven inline by the existing JS. That
   JS keeps owning open/closed; this only restyles what it produces. An earlier
   draft of this block targeted <details>/<summary>, which live in the SEPARATE
   safety FAQ (.qg-sfaq) and would have styled nothing here. */
.qg-faq .qg-faq__container {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}

/* Hairline rules, not boxes: six bordered cards read as six competing objects,
   one ruled list reads as a single document. */
.qg-faq .qg-acc {
  border: 0;
  border-bottom: 1px solid var(--w-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.qg-faq .qg-acc:first-child { border-top: 1px solid var(--w-line); }

.qg-faq .qg-acc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  /* 22px block padding clears the 44px minimum target without a min-height
     that would fight a question wrapping to two lines. The whole row is the
     target — not the 14px glyph at the end of it. */
  padding: 22px 2px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  font-weight: 600; line-height: 1.4; letter-spacing: -.01em;
  color: var(--w-ink);
  transition: color .3s var(--w-ease);
}
@media (hover: hover) and (pointer: fine) {
  .qg-faq .qg-acc__header:hover { color: var(--w-rose); }
}
.qg-faq .qg-acc__header:focus-visible {
  outline: 2px solid var(--w-gold-d);
  outline-offset: 4px;
  border-radius: 6px;
}

/* The +/− affordance. Two bars, one rotated; the open state flattens it into a
   minus. Cheaper than an icon swap and it animates. */
.qg-faq .qg-acc-icon {
  flex: none;
  position: relative;
  width: 26px; height: 26px;
  border: 1px solid var(--w-line);
  border-radius: 50%;
  transition: background .3s var(--w-ease), border-color .3s var(--w-ease);
}
.qg-faq .qg-acc-icon::before,
.qg-faq .qg-acc-icon::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1.5px;
  background: var(--w-soft);
  transform: translate(-50%, -50%);
  transition: transform .35s var(--w-ease), background .3s var(--w-ease);
}
.qg-faq .qg-acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qg-faq .qg-acc.open .qg-acc-icon {
  background: var(--w-gold-d);
  border-color: var(--w-gold-d);
}
.qg-faq .qg-acc.open .qg-acc-icon::before,
.qg-faq .qg-acc.open .qg-acc-icon::after { background: #fff; }
.qg-faq .qg-acc.open .qg-acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.qg-faq .qg-acc__content {
  /* The inline max-height the JS sets stays in charge of the animation; this
     only handles what the revealed text looks like. */
  overflow: hidden;
  transition: max-height .45s var(--w-ease);
}
.qg-faq .qg-acc__content p {
  margin: 0;
  padding: 0 2px 24px;
  font-size: .94rem; line-height: 1.72;
  color: var(--w-mute);
  max-width: 68ch;
  text-wrap: pretty;
}

/* ────────────────────────────────────────────────────────────────────────────
   6 · TABLET / DESKTOP — the rails become grids once there is room for one.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* WEB-9: `margin-inline: auto` and a max-width, not just `margin-inline: 0`.
     Measured at 1440px before this: the grid was 1240px wide sitting at
     left: 0 inside a 1425px section — flush to the left edge with all 185px of
     slack piled on the right, which on a wide monitor reads as the cards
     falling off the screen. A grid needs to be told to centre; zeroing a
     negative margin only removes the bleed, it does not place anything.

     WEB-10: .qg-artists-grid is NO LONGER in this rule. It stays a horizontal
     rail at every width — see section 3b. */
  .qg-before-after .qg-ba-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    overflow: visible;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
  }
  .qg-before-after .qg-ba-card { width: auto; }

  .qg-services .qg-services-filter {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    margin-inline: 0;
  }
}

@media (min-width: 1024px) {
  .qg-services  .qg-section-head,
  .qg-artists   .qg-section-head,
  .qg-before-after .qg-section-head,
  .qg-testimonials .qg-section-head { max-width: 38rem; }

  .qg-testimonials .qg-founding { padding: 46px 48px 40px; }
  .qg-testimonials .qg-founding > p { font-size: 1.3125rem; }
}

/* ────────────────────────────────────────────────────────────────────────────
   7 · MOTION — every transform above is disabled here, not merely shortened.
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .qg-services *, .qg-artists *, .qg-before-after *, .qg-testimonials * {
    transition: none !important;
    animation: none !important;
  }
  .qg-services .qg-service-card:hover,
  .qg-artists .qg-artist-card:hover,
  .qg-testimonials .qg-founding__cta:hover { transform: none !important; }
}