/* ═════════════════════════════════════════════
   QUALITY — built layer by layer
   Craft: pinned scroll assembly — ingredients
   drop in one by one as you scroll, each with a
   spotlight note; rotating quality seal.
   ═════════════════════════════════════════════ */

/* ── HERO ── */
.q-hero {
  min-height: 88vh;
  display: grid; place-content: center; text-align: center;
  gap: 1.1rem; padding: 7rem 1.5rem 4rem;
  background:
    radial-gradient(55% 50% at 50% 0%, rgba(95,168,69,.18), transparent 70%),
    var(--cream);
}
.q-seal { justify-self: center; width: clamp(110px, 16vw, 160px); }
.q-seal svg { width: 100%; height: auto; animation: qSealSpin 26s linear infinite; filter: drop-shadow(3px 5px 0 rgba(56,41,28,.2)); }
@keyframes qSealSpin { to { transform: rotate(360deg); } }
.q-title {
  font-family: var(--mouse);
  font-weight: 400;
  font-size: clamp(3.4rem, 12vw, 10rem);
  line-height: .8;
  text-transform: uppercase;
  color: var(--red);
  -webkit-text-stroke: .55vw var(--white);
  paint-order: stroke fill;
}
.q-title em { font-style: normal; color: var(--mustard); -webkit-text-stroke: .55vw var(--white); }
.q-sub { font-size: 1.4rem; max-width: 44ch; margin: 0 auto; }

/* ── SCROLL-BUILT BURGER ── */
.q-build { height: 500vh; position: relative; background: var(--cream-2); }
.q-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
}
.q-stack {
  position: relative;
  width: clamp(260px, 38vw, 480px);
  aspect-ratio: 1;
  display: grid; place-items: center;
}
.q-layer {
  position: absolute;
  width: var(--w, 70%);
  z-index: var(--z, 1);
  translate: 0 calc(var(--dy, 0%) + var(--fall, var(--drop)));
  rotate: var(--tilt, 0deg);
  opacity: var(--vis, 0);
  filter: drop-shadow(0 14px 18px rgba(56,41,28,.3));
  transition:
    translate .75s cubic-bezier(.34,1.4,.64,1),
    opacity .3s ease,
    rotate .75s cubic-bezier(.34,1.4,.64,1);
  will-change: translate;
}
.q-layer.dropped { --fall: 0vh; --vis: 1; --tilt: 0deg; }
.q-layer.dropped.squish { animation: qSquish .45s ease .32s; }
@keyframes qSquish {
  0% { scale: 1 1; } 40% { scale: 1.12 .82; } 70% { scale: .95 1.06; } 100% { scale: 1 1; }
}
.q-shadow {
  position: absolute; bottom: 6%;
  width: 70%; height: 26px;
  border-radius: 50%;
  background: rgba(56,41,28,.22);
  filter: blur(8px);
  z-index: 0;
  scale: var(--sh, .4) 1;
  transition: scale .6s ease;
}

/* spotlight notes — swap in sync with the drops */
.q-note {
  position: absolute;
  right: clamp(1rem, 6vw, 7rem);
  top: 50%;
  translate: 40px -50%;
  max-width: min(320px, 38vw);
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 10px 0 rgba(56,41,28,.2);
  padding: 1.4rem 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, translate .4s cubic-bezier(.34,1.56,.64,1);
}
.q-note.is-on { opacity: 1; translate: 0 -50%; }
.q-chip {
  display: inline-block;
  font-family: var(--modak);
  font-size: 1.15rem;
  color: var(--white);
  background: var(--c, var(--red));
  padding: .1em .7em .2em;
  border-radius: 999px;
  margin-bottom: .4rem;
  rotate: -2deg;
}
.q-note h3 {
  font-family: var(--mouse);
  font-weight: 400;
  font-size: 1.9rem; line-height: .95;
  text-transform: uppercase;
  color: var(--red);
}
.q-note p { font-size: 1.15rem; margin-top: .3rem; }

/* ── PROMISES ── */
.q-promise {
  text-align: center;
  padding: clamp(4rem, 9vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  background:
    radial-gradient(45% 60% at 50% 115%, rgba(255,215,80,.5), transparent 70%),
    var(--cream);
}
.q-promise-head {
  font-family: var(--mouse);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: .85;
  text-transform: uppercase;
  color: var(--red);
  -webkit-text-stroke: .5vw var(--white);
  paint-order: stroke fill;
  margin-bottom: 2.4rem;
}
.q-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.8rem;
  max-width: 1100px;
  margin: 0 auto;
}
.q-card {
  position: relative;
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 10px 0 rgba(56,41,28,.2);
  padding: 2.4rem 1.6rem 1.8rem;
  rotate: var(--r, 0deg);
  transition: rotate .3s, translate .3s, box-shadow .3s;
  text-align: left;
}
.q-card:hover { rotate: 0deg; translate: 0 -8px; box-shadow: 10px 16px 0 rgba(249,24,20,.3); }
.q-card b {
  position: absolute; top: -1.2rem; left: 1.4rem;
  font-family: var(--mouse); font-weight: 400;
  font-size: 2.6rem; line-height: 1;
  color: var(--white);
  background: var(--red);
  border-radius: 14px;
  padding: .1em .5em;
  box-shadow: 0 5px 0 var(--red-deep);
}
.q-card h3 {
  font-family: var(--mouse); font-weight: 400;
  font-size: 2.1rem; text-transform: uppercase;
  color: var(--ink); line-height: 1;
}
.q-card p { font-size: 1.2rem; margin-top: .4rem; }
.q-cta {
  display: inline-block; margin-top: 2.8rem;
  font-family: var(--mouse); font-size: 1.5rem; letter-spacing: .06em;
  background: var(--red); color: var(--white);
  padding: .5em 1.7em; border-radius: 999px;
  box-shadow: 0 6px 0 var(--red-deep);
  transition: translate .2s, box-shadow .2s;
}
.q-cta:hover { translate: 0 -3px; box-shadow: 0 9px 0 var(--red-deep); }
.q-cta:active { translate: 0 4px; box-shadow: 0 2px 0 var(--red-deep); }

@media (max-width: 760px) {
  .q-stack { width: min(74vw, 340px); margin-top: -18vh; }
  .q-note {
    right: 50%; top: auto; bottom: 7vh;
    translate: 50% 30px;
    max-width: 86vw;
    text-align: center;
  }
  .q-note.is-on { translate: 50% 0; }
}