/* ==========================================================================
   JBT — "Let's talk": Ready to play? (a drum kit you can play) — the last section
   ========================================================================== */
.drm {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(24px, 4vw, 64px);
  padding: calc(var(--header-h, 76px) + clamp(32px, 6vh, 72px)) clamp(16px, 5vw, 72px) clamp(40px, 7vh, 88px);
  background: radial-gradient(60% 70% at 68% 58%, #26324f 0%, #141a2c 55%, #0b0d14 100%);
  color: #fbfaf6; font-family: "Instrument Sans", system-ui, sans-serif;
}
.drm__spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(34% 70% at 66% 0%, rgba(255, 244, 222, .16) 0%, rgba(255, 244, 222, 0) 72%); }
.drm__copy { position: relative; z-index: 1; max-width: 520px; }
.drm__eyebrow { display: flex; align-items: center; gap: 12px; font: 500 12px/1 "Instrument Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(251, 250, 246, .8); }
.drm__eyebrow i { width: 28px; height: 1px; background: currentColor; }
.drm__title { margin-top: 18px; font: 400 clamp(52px, 6.4vw, 108px)/.92 "Instrument Serif", Georgia, serif; letter-spacing: -.03em; }
.drm__title em { font-style: italic; }
.drm__lede { margin-top: 20px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: rgba(251, 250, 246, .82); max-width: 42ch; }
.drm__ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.drm__btn {
  display: inline-flex; align-items: center; height: 50px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid rgba(251, 250, 246, .55); color: #fbfaf6; text-decoration: none; font: 500 15px/1 "Instrument Sans", sans-serif;
  transition: transform .25s, background .25s, color .25s, border-color .25s;
}
.drm__btn:hover { transform: translateY(-2px); border-color: #fbfaf6; }
.drm__btn--solid { background: #fbfaf6; color: #111; border-color: #fbfaf6; }
.drm__btn:focus-visible { outline: 2px solid #fbfaf6; outline-offset: 3px; }
.drm__hint { margin-top: 26px; font-size: 13px; line-height: 1.8; color: rgba(251, 250, 246, .6); }
.drm__hint kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; border: 1px solid rgba(251, 250, 246, .3); font: 600 11px/1 "Instrument Sans", sans-serif; color: #fbfaf6; }
.drm__hint-touch { display: none; }
@media (hover: none) { .drm__hint-keys { display: none; } .drm__hint-touch { display: inline; } }

.drm__stage { position: relative; z-index: 1; width: 100%; }
.drm__kit { display: block; width: 100%; height: auto; max-height: 78svh; overflow: visible; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.drm__pad { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: 50% 50%; transition: filter .2s; }
.drm__pad:hover { filter: brightness(1.1); }
.drm__pad:focus-visible { filter: drop-shadow(0 0 5px rgba(251, 250, 246, .9)); }
.drm__cym { transform-origin: 50% 50%; }
.drm__drum.is-hit { animation: drm-thump .24s cubic-bezier(.3, 1.6, .5, 1); }
.drm__cym.is-hit { animation: drm-wobble .9s ease-out; }
@keyframes drm-thump { 30% { transform: scale(1.035, .955); } }
@keyframes drm-wobble { 15% { transform: rotate(-5deg); } 35% { transform: rotate(3.5deg); } 55% { transform: rotate(-2deg); } 75% { transform: rotate(1deg); } }
.drm__key { font: 600 13px/1 "Instrument Sans", sans-serif; fill: rgba(17, 17, 17, .55); pointer-events: none; }
.drm__key--light { fill: rgba(251, 250, 246, .7); }
@media (hover: none) { .drm__key { display: none; } }

/* Phones: copy first, the kit below it */
@media (max-width: 899px) {
  .drm { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--header-h, 64px) + 40px); }
  .drm__title { font-size: clamp(48px, 14vw, 72px); }
  .drm__spot { background: radial-gradient(70% 45% at 50% 55%, rgba(255, 244, 222, .14) 0%, rgba(255, 244, 222, 0) 72%); }
}
@media (prefers-reduced-motion: reduce) { .drm__drum.is-hit, .drm__cym.is-hit { animation: none; } }

/* The footer continues the "Let's talk" stage: same blue, no wordmark */
.site-footer {
  border-top: 1px solid rgba(251, 250, 246, .1); color: #fbfaf6;
  padding: clamp(36px, 6vh, 64px) clamp(16px, 5vw, 72px) 36px;
  background: radial-gradient(60% 160% at 68% 0%, #1b2440 0%, #141a2c 55%, #0b0d14 100%);
}
.site-footer__cols { margin-top: 0; }
.site-footer p { color: rgba(251, 250, 246, .7); }
.site-footer a { color: #fbfaf6; }
.site-footer__legal { color: rgba(251, 250, 246, .6); }

/* ── Phones & small tablets: each section settles in place, one at a time ──
   Native scroll snapping (touch scrolling is native here). "stop: always" means a
   flick never skips a whole section; sections taller than the screen (and the
   pinned Services / theater sequences) still scroll freely inside. */
@media (max-width: 899px) {
  html { scroll-snap-type: y mandatory; }
  .hb, .abx, .rbx, .svx, .thr, .drm, .pin-spacer { scroll-snap-align: start; scroll-snap-stop: always; }
  .pin-spacer > section { scroll-snap-align: none; }
  .site-footer { scroll-snap-align: end; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { html { scroll-snap-type: y proximity; } }