/* ==========================================================================
   QuietQuality — motion.css
   Presentation layer for the scroll-driven motion engine (motion.js).
   Dependency-free. Reads brand tokens from :root defined in site.css.
   Every effect degrades to a static, safe state under prefers-reduced-motion
   and under body[data-motion="calm"].
   ========================================================================== */

/* --- Enable position:sticky inside .page --------------------------------
   site.css sets `.page { overflow-x: hidden }`, which forces overflow-y to
   compute to `auto` and turns .page into a scroll container — that silently
   breaks position:sticky for descendants (the runner and zoom scenes rely on
   it). `overflow-x: clip` prevents the same horizontal overflow WITHOUT
   establishing a scroll container, so sticky keeps working. */
.page {
  overflow-x: clip;
}

/* --- Split headings (line-mask reveal) ---------------------------------- */
.qq-line {
  display: block;
  overflow: hidden;
}

.qq-line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.95s cubic-bezier(0.19, 0.9, 0.22, 1);
}

.qq-line.is-in .qq-line-inner {
  transform: translateY(0);
}

/* --- Magnetic buttons ---------------------------------------------------- */
.qq-magnetic {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Scene will-change (added only while a scene is active) -------------- */
.qq-active {
  will-change: transform;
}

/* --- Marquee ------------------------------------------------------------- */
.qq-marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.qq-marquee-track {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  will-change: transform;
  animation: qq-marquee-move var(--qq-marquee-dur, 28s) linear infinite;
}

.qq-marquee[data-reverse] .qq-marquee-track {
  animation-direction: reverse;
}

.qq-marquee:hover .qq-marquee-track {
  animation-play-state: paused;
}

@keyframes qq-marquee-move {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* --- Panel (rounded panel resolving its corners on entry) --------------- */
[data-panel] {
  will-change: transform, border-radius;
}

/* --- Sticky runner ------------------------------------------------------- */
[data-runner] {
  position: relative;
}

/* --- Video scenes -------------------------------------------------------- */
[data-video-scene] {
  position: relative;
  overflow: hidden;
}

[data-video-scene] video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-video-scene="zoom"] video {
  transform-origin: center center;
  will-change: transform, opacity;
}

.qq-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

[data-video-scene].is-full .qq-video-overlay {
  opacity: 1;
}

/* --- HUD layer (auto-injected) ------------------------------------------ */
.qq-hud {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  mix-blend-mode: difference;
}

.qq-hud-progress {
  position: absolute;
  top: 12vh;
  bottom: 12vh;
  right: 18px;
  width: 2px;
  background: rgba(232, 200, 140, 0.16);
  overflow: hidden;
}

.qq-hud-progress-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: linear-gradient(180deg, var(--gold-soft, #e8c88c), var(--gold, #c9863b));
  transform: scaleY(0);
  transform-origin: top center;
}

/* Top-right, just under the fixed 76px header. Right-aligned two-line readout
   that clears the header nav / CTA and the gold progress line (right: 18px). */
.qq-hud-meta {
  position: absolute;
  top: 90px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: right;
  color: #e8c88c;
  text-transform: uppercase;
}

/* --- Custom cursor (auto-injected on fine pointers) --------------------- */
.qq-has-cursor {
  cursor: none;
}

.qq-has-cursor a,
.qq-has-cursor button,
.qq-has-cursor [data-magnetic] {
  cursor: none;
}

.qq-has-cursor input,
.qq-has-cursor textarea,
.qq-has-cursor select,
.qq-has-cursor [contenteditable="true"] {
  cursor: auto;
}

.qq-cursor-dot,
.qq-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  pointer-events: none;
  border-radius: 999px;
  mix-blend-mode: difference;
}

.qq-cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--gold-soft, #e8c88c);
}

.qq-cursor-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(232, 200, 140, 0.7);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--gold-soft, #e8c88c);
  transition:
    width 0.25s ease,
    height 0.25s ease,
    margin 0.25s ease,
    opacity 0.25s ease,
    background-color 0.25s ease;
}

.qq-cursor-ring.is-active {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(232, 200, 140, 0.08);
}

.qq-cursor-hidden .qq-cursor-dot,
.qq-cursor-hidden .qq-cursor-ring {
  opacity: 0;
}

@media (max-width: 620px) {
  /* Keep the readout, tucked below the 66px mobile header so it never overlaps
     the hamburger toggle. */
  .qq-hud-meta {
    top: 74px;
    right: 16px;
    font-size: 10px;
  }
}

/* --- Reduced motion: neutralise every autonomous animation -------------- */
@media (prefers-reduced-motion: reduce) {
  .qq-line-inner {
    transform: translateY(0);
    transition: none;
  }

  .qq-magnetic {
    transition: none;
  }

  .qq-marquee-track {
    animation: none;
  }

  .qq-cursor-dot,
  .qq-cursor-ring {
    display: none;
  }
}

/* ==========================================================================
   ===== INDEX SCENES =====
   Flagship home-page scenes composed on top of the shared engine. These read
   the engine's runner progress (--p), video-scene .is-full and split .qq-line
   hooks. Everything degrades to a static, legible state under reduced motion
   (the --p-driven "fade out on scroll" effects are gated behind
   prefers-reduced-motion: no-preference so the pinned state stays visible).
   ========================================================================== */

/* --- Shared: keep reveal from transforming a sticky ancestor ------------
   .section-pad is auto-revealed (translateY), which would create a containing
   block and disturb the sticky children inside runner scenes. Sections that
   host a sticky stage opt out of the transform but keep their place. */
.qq-has-sticky.reveal,
.qq-has-sticky.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- HERO: pinned stage (>=1081px) ------------------------------------
   The hero content is pinned to one screen (fold containment) while the runner
   drives --p, so the heading disperses in place and hands directly to the
   marquee — there is no empty canvas tail to scroll past. The canvas lives
   inside the pinned stage so it stays put while the copy lifts away. */
.home-hero {
  overflow: clip; /* clip (not hidden) keeps the sticky stage pinning */
}

.qq-hero-stage {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  /* Top pad ≈ bottom pad + header(76px) so the flex-centred content reads as
     vertically centred in the area *below* the fixed header — no bottom blank. */
  padding: clamp(92px, 11vh, 116px) 0 clamp(20px, 3.5vh, 44px);
  overflow: hidden;
}

/* Contrast wash between the canvas (z0) and the copy (z2), kept inside the
   stage so it rides with the pinned content. */
.qq-hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.22) 48%, rgba(0, 0, 0, 0.08) 100%);
}

/* Fold-fit: drop the authored 920px min-height + 122px padding and tighten the
   vertical rhythm with viewport-scaled gaps so it fits shorter screens too. */
.home-hero .hero-inner {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.home-hero .eyebrow {
  margin-bottom: clamp(16px, 2.2vh, 30px);
}
.home-hero .hero-copy {
  margin-top: clamp(16px, 2.6vh, 34px);
}
.home-hero .hero-actions {
  margin-top: clamp(20px, 3vh, 40px);
}
.home-hero .hero-stats {
  margin-top: clamp(22px, 3.4vh, 52px);
}

/* Stat cards: one line each (incl. the wide "3〜6ヶ月") so all three are the same
   height at every viewport. */
.home-hero .stat {
  min-height: 0;
  padding: clamp(14px, 2vh, 22px) 16px;
}
.home-hero .stat strong {
  white-space: nowrap;
  font-size: clamp(26px, 2.9vw, 40px);
}

/* FOUR PILLARS panel: fit its own content (no stretched dead space, no rows
   over-spread on tall screens) and centre it so the panel's vertical midpoint
   lines up with the left column's. The kicker's big dead gap is gone; the four
   rows keep a natural, mildly viewport-scaled gap. */
.home-hero .hero-panel {
  align-self: center;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vh, 34px);
}
.home-hero .panel-kicker {
  margin-bottom: clamp(20px, 2.6vh, 34px);
}
.home-hero .layer-stack {
  gap: clamp(14px, 1.8vh, 28px);
}

/* On tablet/phone the FOUR PILLARS panel stacks under the copy, so the hero is
   taller than one screen: fall back to a natural (unpinned) hero whose runner
   is never taller than its content (no tail), keeping the --p dispersal. */
@media (max-width: 1080px) {
  .home-hero {
    overflow: hidden;
  }
  .home-hero[data-runner] {
    min-height: 100vh !important;
  }
  .qq-hero-stage {
    position: static;
    z-index: auto;
    height: auto;
    display: block;
    padding: 0;
    overflow: visible;
  }
  .home-hero .hero-inner {
    padding: 126px 0 64px;
  }
}

/* Fold-fit for short viewports (the user's ~1312×820 laptop): compress the
   heading and gaps so the centred content — stats and the FOUR PILLARS panel —
   still fits one screen. Content stays vertically centred (no top-align, no
   bottom blank). Desktop pinned hero only (>=1081px). */
@media (min-width: 1081px) and (max-height: 940px) {
  .home-hero h1 {
    font-size: clamp(46px, 7.2vh, 92px);
    line-height: 1.06;
  }
  .home-hero .hero-copy {
    font-size: clamp(15px, 2.4vh, 21px);
    line-height: 1.75;
    margin-top: clamp(16px, 2.8vh, 34px);
  }
  .home-hero .eyebrow {
    margin-bottom: clamp(14px, 2.4vh, 30px);
  }
  .home-hero .hero-actions {
    margin-top: clamp(20px, 3.2vh, 44px);
  }
  .home-hero .hero-stats {
    margin-top: clamp(24px, 4vh, 62px);
  }
}

/* Tall viewports (≥1000px high, e.g. 2000×1358): open up the vertical rhythm and
   let the panel grow so the centred content fills the height — the black band
   below the stats stays within ~15% of the viewport. Below 1000px the 900/982
   balance and the ≤940 fold-fit are untouched. */
@media (min-width: 1081px) and (min-height: 1000px) {
  .home-hero .eyebrow {
    margin-bottom: clamp(28px, 3.6vh, 60px);
  }
  .home-hero .hero-copy {
    margin-top: clamp(30px, 4vh, 66px);
  }
  .home-hero .hero-actions {
    margin-top: clamp(34px, 4.8vh, 82px);
  }
  .home-hero .hero-stats {
    margin-top: clamp(40px, 5.8vh, 112px);
  }
  .home-hero .layer-stack {
    gap: clamp(24px, 3.4vh, 52px);
  }
}

/* --- HERO: line-by-line dispersal as the hero scrolls away --------------
   The dispersal is packed into --p 0.25–0.85: the hero holds briefly, disperses,
   and (with the short runner) hands to the marquee almost immediately — there is
   no canvas-only stretch to scroll past. --d undefined under reduced motion, so
   the calc()s below are ignored and the hero stays static. */
@media (prefers-reduced-motion: no-preference) {
  .home-hero {
    --d: clamp(0, (var(--p, 0) - 0.25) / 0.6, 1);
  }
  .home-hero .hero-inner {
    opacity: calc(1 - var(--d));
  }
  .home-hero h1 .qq-line {
    will-change: transform;
    transform: translateY(calc(var(--d) * -96px));
  }
  .home-hero h1 .qq-line:nth-child(2) {
    transform: translateY(calc(var(--d) * -168px));
  }
  .home-hero h1 .qq-line:nth-child(3) {
    transform: translateY(calc(var(--d) * -248px));
  }
  .home-hero h1 .qq-line:nth-child(4) {
    transform: translateY(calc(var(--d) * -336px));
  }
  /* Scroll cue: lit at rest (anchors the hero's lower area / any tall-screen
     breathing room) and fades out as the copy disperses. */
  .home-hero .scroll-note {
    opacity: clamp(0, (0.72 - var(--p, 0)) / 0.16, 1);
    animation: qq-scroll-bob 1.7s ease-in-out infinite;
  }
}

/* Laid out horizontally (arrow stacked over the word) rather than as the base
   vertical label, so the "↓" reliably points down instead of being rotated by
   the vertical writing mode. Applies in every motion mode; the --p fade and bob
   above are gated to no-preference. */
.home-hero .scroll-note {
  bottom: 13vh;
  writing-mode: horizontal-tb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 3;
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

.home-hero .scroll-note .scroll-arrow {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
}

@keyframes qq-scroll-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(7px);
  }
}

/* --- Marquee band (gold outline lettering) ------------------------------ */
.qq-index-marquee {
  align-items: center;
  padding: clamp(16px, 3vw, 30px) 0;
  background: var(--black);
  border-top: 1px solid rgba(232, 200, 140, 0.18);
  border-bottom: 1px solid rgba(232, 200, 140, 0.18);
}

.qq-index-marquee span {
  display: inline-block;
  padding: 0 0.5em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 6vw, 74px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--gold);
}

.qq-index-marquee .qq-marquee-sep {
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  -webkit-text-stroke-width: 0;
}

/* Index CTA labels never wrap mid-phrase (they flex-wrap to a new line whole if
   space runs out). Scoped to index-only sections. */
.home-hero .button,
[data-hud-label="CONSULT"] .hero-actions .button,
.qq-final .button {
  white-space: nowrap;
}

/* --- Video cinematic scenes (differentiated: uncover / letterbox) --------
   The clip plays full-bleed the whole time; there is never a hidden/blank
   phase. initCine (motion.js) locks the frame to the viewport top during entry,
   so the previous section (.qq-cover-above) slides up and reveals it. Scene 1
   (uncover) shows the full frame; scene 2 (letterbox) reveals a 32vh centre band
   that opens to full. Copy rises on --p. Reduced motion / no-JS: full & static. */
.qq-cine {
  position: relative;
  z-index: 0; /* sit below .qq-cover-above so the previous section reveals it */
  background: var(--black);
}

.qq-cine-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: visible; /* the frame is lifted above this box during entry */
}

.qq-cine-frame {
  position: absolute;
  inset: 0;
  overflow: hidden; /* clips the (scaled/letterboxed) video to the frame */
  will-change: transform;
}

.qq-cine-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The previous section is lifted above the cine frame so that, as it scrolls
   off, it uncovers the fixed video underneath (parallax reveal). */
.qq-cover-above {
  position: relative;
  z-index: 1;
}

.qq-cine-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  text-align: center;
  pointer-events: none;
}

.qq-cine-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at center, rgba(5, 6, 7, 0.42), rgba(5, 6, 7, 0.72));
  opacity: clamp(0, (var(--p, 0) - 0.45) / 0.2, 1);
}

.qq-cine-lead {
  margin: 0;
  max-width: min(920px, 88vw);
  font-size: clamp(30px, 6.4vw, 82px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--cream);
}

.qq-cine-sub {
  margin: clamp(14px, 2vw, 24px) 0 0;
  max-width: min(760px, 84vw);
  font-size: clamp(15px, 2.1vw, 22px);
  line-height: 1.7;
  font-weight: 700;
  color: var(--gold-soft);
}

.qq-cine-mask {
  display: block;
  overflow: hidden;
}

.qq-cine-mask > span {
  display: inline-block;
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  /* Copy rises on --p; base (above) stays shown for reduced motion / no-JS.
     Uncover reveals its copy earlier (full frame from entry); letterbox waits
     until the band has essentially opened. */
  .qq-cine-uncover .qq-cine-lead .qq-cine-mask > span {
    transform: translateY(calc((1 - clamp(0, (var(--p, 0) - 0.3) / 0.24, 1)) * 118%));
  }
  .qq-cine-uncover .qq-cine-sub .qq-cine-mask > span {
    transform: translateY(calc((1 - clamp(0, (var(--p, 0) - 0.42) / 0.24, 1)) * 118%));
  }
  .qq-cine-letterbox .qq-cine-lead .qq-cine-mask > span {
    transform: translateY(calc((1 - clamp(0, (var(--p, 0) - 0.62) / 0.22, 1)) * 118%));
  }
  .qq-cine-letterbox .qq-cine-sub .qq-cine-mask > span {
    transform: translateY(calc((1 - clamp(0, (var(--p, 0) - 0.74) / 0.2, 1)) * 118%));
  }
}

/* --- CONCEPT: gold-lines loop behind the visual panel ------------------- */
.qq-concept-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.qq-concept-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concept-visual::before,
.concept-visual::after {
  z-index: 2;
}

/* --- SERVICE: sticky horizontal track ----------------------------------- */
.qq-htrack-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vh, 40px);
  padding: clamp(92px, 12vh, 122px) 0 clamp(26px, 5vh, 46px);
  overflow: hidden;
}

.qq-htrack-head {
  flex: 0 0 auto;
}

.qq-htrack-head .split-head {
  margin-bottom: 0;
}

.qq-htrack-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.qq-htrack {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 16px;
  padding: 0 var(--gutter);
  will-change: transform;
}

.qq-htrack .service-card {
  flex: 0 0 auto;
  width: min(80vw, 420px);
  min-height: clamp(300px, 42vh, 380px);
}

.qq-htrack-dots {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.qq-htrack-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(245, 239, 229, 0.22);
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.qq-htrack-dot.is-on {
  background: var(--gold);
  transform: scale(1.3);
}

/* Static (reduced-motion) fallback: normal wrapping grid, no pin, no slide */
.qq-htrack-static .qq-htrack-stage {
  position: static;
  height: auto;
  display: block;
  padding: 0;
  overflow: visible;
}

.qq-htrack-static .qq-htrack-viewport {
  overflow: visible;
  margin-top: clamp(30px, 5vw, 48px);
}

.qq-htrack-static .qq-htrack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  width: auto;
  padding: 0;
  transform: none;
}

.qq-htrack-static .qq-htrack .service-card {
  width: auto;
  min-height: auto;
}

.qq-htrack-static .qq-htrack-dots {
  display: none;
}

/* --- METHOD: 3-layer build with a drawing connector -------------------- */
.method-runner {
  position: relative;
}

.method-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(84px, 10vh, 104px) 0 clamp(24px, 4vh, 44px);
}

/* Fill the pinned viewport with the dark diagram panel so there is no bright
   paper gap around it while it builds (the f27 "empty tail"). */
.method-diagram {
  width: 100%;
  min-height: min(640px, calc(100svh - 150px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.method-line {
  position: relative;
}

.method-connector {
  position: absolute;
  left: 24px;
  top: 6%;
  width: 4px;
  height: 88%;
  overflow: visible;
  pointer-events: none;
}

.method-connector path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-dasharray: 1;
  /* Draw across the build window (p 0.05–0.85) so the line is still moving
     through the tail — no static idle before release. */
  stroke-dashoffset: calc(1 - clamp(0, (var(--p, 0) - 0.05) / 0.8, 1));
}

@media (prefers-reduced-motion: no-preference) {
  .method-runner .method-layer {
    opacity: clamp(0, calc((var(--p, 0) - var(--layer-start, 0)) / 0.2), 1);
    transform: translateY(
      calc((1 - clamp(0, calc((var(--p, 0) - var(--layer-start, 0)) / 0.2), 1)) * 26px)
    );
    will-change: opacity, transform;
  }
  /* Build across p 0.05–0.78 (last layer resolves before the runner ends). */
  .method-runner .method-layer[data-layer="1"] {
    --layer-start: 0.05;
  }
  .method-runner .method-layer[data-layer="2"] {
    --layer-start: 0.32;
  }
  .method-runner .method-layer[data-layer="3"] {
    --layer-start: 0.58;
  }
}

/* --- MILESTONE: outlined giant phase numbers --------------------------- */
.qq-milestone .phase-number {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--gold);
  font-size: clamp(70px, 11vw, 148px);
  line-height: 0.86;
  letter-spacing: -0.02em;
}

/* --- CASE: gentle image zoom on hover ---------------------------------- */
.qq-case-grid .case-card {
  overflow: hidden;
}

.qq-case-grid .case-image {
  transition: transform 0.7s cubic-bezier(0.19, 0.9, 0.22, 1);
}

.qq-case-grid .case-card:hover .case-image {
  transform: scale(1.06);
}

/* --- FINAL CTA: full-height, particles behind ------------------------- */
.qq-final {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.qq-final-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.qq-final-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.qq-final-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 78% 20%, rgba(232, 200, 140, 0.16), transparent 42%),
    linear-gradient(90deg, rgba(16, 18, 16, 0.94), rgba(16, 18, 16, 0.66));
}

.qq-final .cta-grid {
  position: relative;
  z-index: 2;
}

.qq-final h2 {
  font-size: clamp(40px, 7.2vw, 96px);
  line-height: 1.08;
}

/* --- Mobile: shorten runner scroll distance (effects preserved) --------
   (Hero is handled by the <=1080px block above: min-height:100vh, unpinned.) */
@media (max-width: 560px) {
  .qq-cine[data-runner] {
    min-height: 150vh !important;
  }
  #service[data-runner] {
    min-height: 180vh !important;
  }
  .method-runner[data-runner] {
    min-height: 145vh !important;
  }
}

@media (max-width: 620px) {
  .qq-htrack-stage {
    justify-content: flex-start;
    gap: 18px;
    padding-top: 92px;
  }
  .qq-htrack .service-card {
    width: 78vw;
    min-height: auto;
  }
  .qq-index-marquee span {
    font-size: clamp(26px, 9vw, 44px);
  }

  /* Fold-fit: keep the three stats as a compact single row so their bottom sits
     within the first screen at 390×844, and tighten the copy/CTA rhythm. */
  .home-hero .hero-inner {
    padding: 108px 0 56px;
  }
  .home-hero .hero-copy {
    font-size: 15px;
    line-height: 1.7;
    margin-top: clamp(12px, 2vh, 22px);
  }
  .home-hero .hero-actions {
    margin-top: clamp(12px, 2vh, 22px);
  }
  .home-hero .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: clamp(14px, 2.2vh, 26px);
  }
  .home-hero .stat {
    min-height: 0;
    padding: 12px 10px;
  }
  .home-hero .stat strong {
    font-size: clamp(19px, 5.6vw, 28px);
    white-space: nowrap;
  }
  .home-hero .stat span {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.4;
  }
}

/* --- Reduced motion: pin scene copy to its resolved, legible state ------ */
@media (prefers-reduced-motion: reduce) {
  .qq-case-grid .case-image {
    transition: none;
  }
  .qq-case-grid .case-card:hover .case-image {
    transform: none;
  }
}