/* ════════════════════════════════════════════════════════════════════════════
   QwikGlam — HOME: EMPATHY SECTION + MOTION SYSTEM  (WEB-6)
   File: assets/css/qg-home-motion.css
   ════════════════════════════════════════════════════════════════════════════

   TWO THINGS LIVE HERE

   1. The styling for .qg-empathy, the section added in home-qwikglam.php to
      fill step two of the Brand Playbook's §24 Website Copy Formula.

   2. A motion system for the home page.

   ── ON THE MOTION, AND WHY IT IS RESTRAINED ────────────────────────────────
   The brief asked for advanced, animated, dynamic, world-class. Those words
   are usually taken as licence to move everything. On a page selling "Trusted
   Beauty at Home" that would be a mistake, and the Playbook says why more than
   once: §13 wants a Trust app rather than a flashy one, and §78 has first
   impressions deciding trust. Motion that draws attention to itself reads as a
   sales page. Motion nobody consciously notices reads as quality.

   So the vocabulary here is deliberately small — reveal, settle, draw, lift —
   applied consistently to every section rather than a different trick per
   block. Consistency is §14's whole argument, and it is also what separates a
   designed page from a decorated one.

   ── BUILT ON WHAT IS ALREADY THERE ─────────────────────────────────────────
   The page already ships a reveal system: luxe-home.js adds `.visible` to
   `[data-animate]` on intersection, staggers siblings with an inline
   transition-delay, and force-reveals everything after 2800ms so a failed
   observer can never leave the page blank. That failsafe is the reason this
   file styles the `.visible` state rather than introducing a second mechanism
   with its own failure mode. 51 elements on the home page already carry the
   attribute; they all inherit the refinements below for free.

   ── SCROLL-LINKED MOTION, PROGRESSIVELY ────────────────────────────────────
   Section 4 uses `animation-timeline: view()` — genuine scroll-linked
   animation, driven by the compositor with no JavaScript and no scroll
   listener, so it cannot jank. It is behind @supports: browsers without it get
   the ordinary reveal and lose nothing.

   ── REDUCED MOTION IS A FULL STOP, NOT A DIMMER ────────────────────────────
   Section 6 disables every transform, transition and scroll-linked animation
   in this file and pins every revealed element to its final state. A visitor
   with vestibular sensitivity gets the whole page, instantly, with no movement.
   ════════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   0 · TOKENS
   ──────────────────────────────────────────────────────────────────────────── */
.qg-empathy,
[data-animate] {
  --m-ease:      cubic-bezier(.22, .61, .36, 1);   /* fast out, long settle */
  --m-ease-soft: cubic-bezier(.33, 1, .68, 1);
  --m-dur:       .72s;
  --m-rise:      22px;
}

/* ────────────────────────────────────────────────────────────────────────────
   1 · THE EMPATHY SECTION
   Quiet by design. It is the one block on the page with no CTA, because §07
   says the first thing a customer should feel is understood, not sold to.
   ──────────────────────────────────────────────────────────────────────────── */

.qg-empathy {
  --e-ink:   #2A1128;
  --e-soft:  #6A4060;
  --e-mute:  rgba(42, 17, 40, .62);
  --e-gold:  #C9A86C;
  --e-gold-d:#A8863F;
  --e-line:  rgba(42, 17, 40, .09);
  padding: clamp(48px, 9vw, 96px) 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(201,168,108,.08), transparent 62%),
    #FFFDFB;
}

.qg-empathy .qg-section-head {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.qg-empathy .qg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--e-gold-d);
}
.qg-empathy .qg-eyebrow::before,
.qg-empathy .qg-eyebrow::after {
  content: "";
  width: 28px; height: 1px;
  background: rgba(201,168,108,.4);
  /* Drawn out from the centre when the heading arrives — see section 3. */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .9s var(--m-ease-soft) .15s;
}
.qg-empathy [data-animate].visible .qg-eyebrow::before,
.qg-empathy [data-animate].visible .qg-eyebrow::after,
.qg-empathy .qg-section-head.visible .qg-eyebrow::before,
.qg-empathy .qg-section-head.visible .qg-eyebrow::after { transform: scaleX(1); }

.qg-empathy h2 {
  margin: .6rem 0 .9rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 5.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--e-ink);
  text-wrap: balance;
}
.qg-empathy h2 span {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(100deg, var(--e-gold-d), var(--e-gold) 55%, #C2547B);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.qg-empathy .qg-section-head > p {
  font-size: 1rem;
  line-height: 1.68;
  color: var(--e-mute);
  text-wrap: pretty;
}

.qg-empathy__list {
  display: grid;
  gap: 14px;
  max-width: 56rem;
  margin: clamp(28px, 5vw, 44px) auto 0;
  padding: 0;
  list-style: none;
}

.qg-empathy__item {
  display: grid;
  gap: 8px;
  padding: 22px 20px;
  border: 1px solid var(--e-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(42,17,40,.05), 0 8px 26px -10px rgba(42,17,40,.12);
  transition: transform .5s var(--m-ease), box-shadow .5s var(--m-ease),
              border-color .5s var(--m-ease);
}
.qg-empathy__item:hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,108,.35);
  box-shadow: 0 2px 4px rgba(42,17,40,.07), 0 18px 44px -14px rgba(42,17,40,.2);
}

/* The worry, in the customer's own voice — set as speech, in the serif, so it
   reads as something a person said rather than a feature heading. */
.qg-empathy__worry {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 1.24rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--e-ink);
}

.qg-empathy__answer {
  font-size: .9rem;
  line-height: 1.62;
  color: var(--e-mute);
}
.qg-empathy__answer strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 700;
  color: var(--e-soft);
}

@media (min-width: 768px) {
  .qg-empathy__list { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .qg-empathy__item { padding: 26px 22px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   1b · THE TEAM RAIL (WEB-7)
   A horizontal rail that reads correctly at one card or nine — which matters,
   because it ships with one. At small counts it centres rather than stranding a
   lone card against the left edge, which is what a grid would have done.
   ──────────────────────────────────────────────────────────────────────────── */

.qg-team {
  --t-ink:  #2A1128;
  --t-soft: #6A4060;
  --t-mute: rgba(42, 17, 40, .62);
  --t-gold: #C9A86C;
  --t-gold-d: #A8863F;
  --t-line: rgba(42, 17, 40, .09);
  padding: clamp(44px, 8vw, 88px) 0;
  background:
    radial-gradient(110% 60% at 50% 100%, rgba(194,84,123,.06), transparent 60%),
    #FEF9F5;
}

.qg-team .qg-section-head { max-width: 38rem; margin-inline: auto; text-align: center; }
.qg-team .qg-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--t-gold-d);
}
.qg-team .qg-eyebrow::before, .qg-team .qg-eyebrow::after {
  content: ""; width: 28px; height: 1px; background: rgba(201,168,108,.4);
}
.qg-team h2 {
  margin: .6rem 0 .8rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.55rem, 5.4vw, 2.4rem);
  font-weight: 600; line-height: 1.14; letter-spacing: -.015em;
  color: var(--t-ink); text-wrap: balance;
}
.qg-team h2 span {
  font-style: italic; font-weight: 400;
  background: linear-gradient(100deg, var(--t-gold-d), var(--t-gold) 55%, #C2547B);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.qg-team .qg-section-head > p { font-size: .95rem; line-height: 1.65; color: var(--t-mute); }

.qg-team__rail {
  display: flex;
  gap: 16px;
  /* centred while the cards fit, scrollable the moment they do not */
  justify-content: safe center;
  margin: clamp(26px, 5vw, 40px) -16px 0;
  padding: 6px 16px 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qg-team__rail::-webkit-scrollbar { display: none; }

.qg-team__card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: min(78vw, 290px);
  border: 1px solid var(--t-line);
  border-radius: 20px;
  background: #FFFDFB;
  box-shadow: 0 1px 2px rgba(42,17,40,.06), 0 10px 30px -12px rgba(42,17,40,.16);
  overflow: hidden;
  transition: transform .5s var(--m-ease), box-shadow .5s var(--m-ease),
              border-color .5s var(--m-ease);
}
@media (hover: hover) and (pointer: fine) {
  .qg-team__card:hover {
    transform: translateY(-4px);
    border-color: rgba(201,168,108,.4);
    box-shadow: 0 2px 5px rgba(42,17,40,.08), 0 22px 52px -16px rgba(42,17,40,.26);
  }
}

.qg-team__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(140deg, #F3E7E0, #E8D6CC);
}
.qg-team__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;   /* headshots sit high in the frame */
  transition: transform 1.2s var(--m-ease);
}
@media (hover: hover) and (pointer: fine) {
  .qg-team__card:hover .qg-team__media img { transform: scale(1.04); }
}

/* Missing photo is a DESIGNED state, not a broken image. A monogram on the
   brand gradient looks deliberate; a browser's torn-page icon looks abandoned,
   and on a page whose whole argument is "you can trust us", that matters. */
.qg-team__media--monogram {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(201,168,108,.30), transparent 60%),
    linear-gradient(140deg, #3B1F3A, #5A2C50);
}
.qg-team__monogram {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 248, 242, .92);
}

.qg-team__body { padding: 16px 16px 18px; }
.qg-team__name {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--t-ink);
}
.qg-team__role {
  margin: 3px 0 0;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-gold-d);
}
.qg-team__note {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--t-line);
  font-size: .86rem; line-height: 1.6; color: var(--t-mute);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .qg-team__rail { margin-inline: 0; padding-inline: 0; gap: 20px; }
  .qg-team__card { width: 300px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   1b-2 · THE LEADERS SLIDER (WEB-8)
   The founder note, widened to carry the founder AND the brand executive in one
   format. Full-bleed portrait, gold eyebrow, serif headline, signature — the
   treatment the founder already had, now shared rather than duplicated at a
   smaller size. A slide is one screen wide and snaps, so the rail behaves like
   a deck rather than a scrolling list.
   ──────────────────────────────────────────────────────────────────────────── */

.qg-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.qg-leaders {
  --l-ink:    #2A1128;
  --l-soft:   #6A4060;
  --l-mute:   rgba(42, 17, 40, .68);
  --l-gold:   #C9A86C;
  --l-gold-d: #A8863F;
  --l-line:   rgba(42, 17, 40, .09);
  position: relative;
  padding: clamp(40px, 7vw, 84px) 0 clamp(28px, 4vw, 44px);
  background:
    radial-gradient(90% 60% at 75% 0%, rgba(194,84,123,.07), transparent 62%),
    linear-gradient(180deg, #FDF3F1 0%, #FEF9F5 100%);
}

.qg-leaders__rail {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qg-leaders__rail::-webkit-scrollbar { display: none; }
/* The rail is focusable so it can be driven by the arrow keys; the ring has to
   be visible when it is, or keyboard users get a silent control. */
.qg-leaders__rail:focus-visible { outline: 2px solid var(--l-gold-d); outline-offset: -4px; }

.qg-leader {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  gap: clamp(18px, 4vw, 40px);
  align-items: center;
  padding-inline: clamp(16px, 5vw, 64px);
}

/* Portrait */
.qg-leader__media {
  position: relative;
  justify-self: center;
  width: min(78vw, 340px);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(140deg, #F3E7E0, #E8D6CC);
  box-shadow: 0 2px 6px rgba(42,17,40,.08), 0 26px 60px -20px rgba(42,17,40,.32);
}
.qg-leader__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

/* A missing portrait is a designed state, not a broken image — this section's
   whole argument is that these are real, accountable people, and a torn-page
   icon undoes that more than an absent photo would. */
.qg-leader__media--monogram {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(201,168,108,.30), transparent 60%),
    linear-gradient(140deg, #3B1F3A, #5A2C50);
}
.qg-leader__monogram {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(3rem, 12vw, 4.4rem);
  font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 248, 242, .92);
}

.qg-leader__badge {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 253, 251, .94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(42,17,40,.16);
  font-size: .62rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--l-ink);
  white-space: nowrap;
}

/* Copy */
.qg-leader__text { max-width: 34rem; }
.qg-leader .qg-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .66rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #C2547B;
}
.qg-leader .qg-eyebrow::before, .qg-leader .qg-eyebrow::after {
  content: ""; width: 24px; height: 1px; background: rgba(194,84,123,.4);
}
/* A <p>, not an <h2> — the section already has one heading, and two people
   cannot both own it. Styled as a headline, announced as body text. */
.qg-leader__title {
  margin: .55rem 0 .85rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.45rem, 5vw, 2.15rem);
  font-weight: 600; line-height: 1.16; letter-spacing: -.015em;
  color: var(--l-ink);
  text-wrap: balance;
}
.qg-leader__text p:not(.qg-leader__title):not(.qg-leader__sign) {
  margin: 0 0 .8rem;
  font-size: .95rem; line-height: 1.72; color: var(--l-mute);
  text-wrap: pretty;
}
.qg-leader__text em { font-style: italic; color: #C2547B; }
.qg-leader__sign {
  margin: 1.1rem 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.02rem; font-weight: 600; color: var(--l-ink);
}

/* Controls (WEB-9) — arrows + dots. The dots are buttons now, not decoration:
   a mouse cannot scroll a horizontal rail, so without these the second slide
   was unreachable on desktop. */
.qg-leaders__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(18px, 3vw, 28px);
}

.qg-leaders__arrow {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid rgba(42,17,40,.14);
  border-radius: 50%;
  background: #FFFDFB;
  color: var(--l-ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(42,17,40,.06), 0 8px 20px -10px rgba(42,17,40,.24);
  transition: transform .3s var(--m-ease), box-shadow .3s var(--m-ease),
              border-color .3s var(--m-ease), opacity .3s var(--m-ease);
}
@media (hover: hover) and (pointer: fine) {
  .qg-leaders__arrow:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(201,168,108,.55);
    box-shadow: 0 2px 4px rgba(42,17,40,.08), 0 14px 30px -12px rgba(42,17,40,.34);
  }
}
.qg-leaders__arrow:focus-visible { outline: 2px solid var(--l-gold-d); outline-offset: 3px; }
/* Disabled at the ends — visibly inert rather than a live control that does
   nothing when pressed. */
.qg-leaders__arrow:disabled { opacity: .32; cursor: default; box-shadow: none; }

.qg-leaders__dots { display: flex; align-items: center; gap: 8px; }
.qg-leaders__dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(42,17,40,.2);
  cursor: pointer;
  transition: background .35s var(--m-ease), width .35s var(--m-ease);
}
.qg-leaders__dot.is-active {
  width: 22px; border-radius: 999px;
  background: linear-gradient(90deg, var(--l-gold-d), var(--l-gold));
}
.qg-leaders__dot:focus-visible { outline: 2px solid var(--l-gold-d); outline-offset: 3px; }
/* 7px is a 7px target. Pad the hit area out to a thumb without changing the
   dot's size — the control has to be tappable, not just visible. */
.qg-leaders__dot { position: relative; }
.qg-leaders__dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  transform: translate(-50%, -50%);
}

/* Two columns once there is room — the founder's original desktop layout. */
@media (min-width: 860px) {
  .qg-leader {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: clamp(32px, 5vw, 64px);
    padding-inline: clamp(32px, 7vw, 110px);
  }
  .qg-leader__media { width: 100%; justify-self: start; }
}

/* Single slide: nothing to navigate, so the whole control strip is noise.
   (Targets __nav, not __dots — the dots are nested inside __nav now, and
   hiding only them would leave two dead arrows behind.) */
.qg-leaders:has(.qg-leader:only-child) .qg-leaders__nav { display: none; }

/* ────────────────────────────────────────────────────────────────────────────
   1c · PACKAGE CARD WITHOUT A PRICE (WEB-7)
   The fifth package is a real catalogue entry that has no price in the
   catalogue. Rather than invent one, its card states the programme shape. The
   type scale drops because a sentence at price size shouts.
   ──────────────────────────────────────────────────────────────────────────── */
.qg-pkg-card__price--quote {
  font-size: .82rem !important;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: .01em;
  opacity: .8;
  text-transform: none !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   2 · THE BASE REVEAL — refined, not replaced
   luxe-home.js owns when `.visible` lands. This owns what it looks like.
   `will-change` is set only while the element is still hidden, so it is
   released the moment the animation is done instead of pinning a layer for the
   life of the page — 51 permanently promoted layers is its own performance bug.
   ──────────────────────────────────────────────────────────────────────────── */
[data-animate] {
  opacity: 0;
  transform: translate3d(0, var(--m-rise), 0);
  will-change: opacity, transform;
  transition: opacity var(--m-dur) var(--m-ease),
              transform var(--m-dur) var(--m-ease);
}
[data-animate].visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ────────────────────────────────────────────────────────────────────────────
   3 · SECTION HEADINGS — a wipe, not a fade
   The heading is masked and uncovered from below. It is the one piece of
   motion on the page a reader might consciously notice, which is why it is
   reserved for the single most important line in each section.
   ──────────────────────────────────────────────────────────────────────────── */
.qg-empathy .qg-section-head h2,
.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 {
  clip-path: inset(0 0 110% 0);
  transform: translate3d(0, 12px, 0);
  transition: clip-path 1s var(--m-ease-soft), transform 1s var(--m-ease-soft);
}
.qg-empathy .qg-section-head.visible h2,
.qg-services .qg-section-head.visible h2,
.qg-artists .qg-section-head.visible h2,
.qg-before-after .qg-section-head.visible h2,
.qg-testimonials .qg-section-head.visible h2 {
  clip-path: inset(0 0 -20% 0);   /* -20% so descenders are never clipped */
  transform: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   4 · SCROLL-LINKED MOTION  (progressive enhancement)

   Two effects, both driven by the compositor from the scroll position itself —
   no scroll listener, no requestAnimationFrame, nothing on the main thread:

     • card images settle from a slight scale as their card crosses the viewport
       (a very slow ken-burns that reads as depth, not as movement);
     • each section's gold rule draws itself as the section enters.

   Guarded by @supports. Where `animation-timeline` is missing, none of this
   applies and the ordinary reveal in section 2 carries the page on its own.
   ──────────────────────────────────────────────────────────────────────────── */
@supports (animation-timeline: view()) {

  @keyframes qg-settle {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }

  .qg-artists .qg-artist-media img,
  .qg-services .qg-service-card__img img {
    animation: qg-settle linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  @keyframes qg-draw {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
  }

  .qg-empathy .qg-eyebrow::before,
  .qg-empathy .qg-eyebrow::after {
    animation: qg-draw linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 70%;
    transition: none;   /* the timeline owns it now */
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   5 · INTERACTION — the smallest possible acknowledgement
   Pointer-precision devices only: a 2px lift on hover is noise on a phone,
   where there is no hover state and the "hover" style sticks after a tap.
   ──────────────────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .qg-empathy__item,
  .qg-services .qg-service-card,
  .qg-artists .qg-artist-card { transition-duration: .5s; }
}
@media (hover: none) {
  .qg-empathy__item:hover { transform: none; box-shadow: 0 1px 2px rgba(42,17,40,.05), 0 8px 26px -10px rgba(42,17,40,.12); }
}

/* ────────────────────────────────────────────────────────────────────────────
   6 · REDUCED MOTION — everything off, nothing hidden
   The critical line is `opacity: 1` on [data-animate]: if motion is disabled
   without it, elements that were waiting to be revealed stay invisible forever
   and the page is blank. Turning animation off must never cost content.
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .qg-empathy .qg-section-head h2,
  .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 {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  .qg-empathy .qg-eyebrow::before,
  .qg-empathy .qg-eyebrow::after {
    transform: scaleX(1) !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  .qg-artists .qg-artist-media img,
  .qg-services .qg-service-card__img img,
  .qg-team__media img {
    animation: none !important;
    transform: none !important;
  }
  .qg-empathy__item:hover,
  .qg-team__card:hover { transform: none !important; }
}