/* ====================================================
   REDUCED MOTION
   ==================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  .reveal{opacity:1;transform:none;filter:none}
  #hero-canvas,#blueprint-canvas{display:none}
  .hero-kicker,.hero-name,.hero-dim,.hero-architect,.hero-sub,.hero-buttons,.hero-socials,.title-block,.hero-folio{opacity:1;animation:none}
  .title-block tr{opacity:1;animation:none}
  .hero-marks{opacity:0.5;animation:none;transform:none}
  .hero-cl{opacity:0.22;animation:none;transform:none}
  .hn-arm{opacity:1}
  .hero-scroll{animation:none}
  .hero-dim,.sheet-line{clip-path:none!important}
  .btn-primary::after,.nav-cta::after{display:none}
  #sheet-hud{transition:none}
  /* bento scenes resolve to their finished drawings */
  .yt-schematic .bp-draw{stroke-dashoffset:0;animation:none}
  .yt-schematic .bp-note{opacity:1;animation:none}
  .yt-schematic .bp-arrow{opacity:0.55;animation:none}
  .yt-schematic .bp-fill{opacity:var(--fo,0.85);animation:none}
  .yt-pulse,.yt-caret{display:none}
  .disco-track{transition:none!important;transform:none!important}
  .disco-dot--on{animation:none}
  .spec-bar::before{transform:scaleX(1);animation:none}
  .idx-rule{transform:none;animation:none}
  .idx-list li{opacity:1;transform:none;animation:none}
  /* statement plate resolves to its finished state */
  .statement .st-reticle{opacity:1;transform:none;animation:none}
  .statement .st-tag,.statement .st-runtime{opacity:1;animation:none}
}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media(max-width:960px){
  #sheet-hud{display:none}
  .about-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:1fr;grid-template-areas:"yt" "dc" "st" "eco" "ws" "idx"}
  .disco{height:300px}
  .statement-grid{grid-template-columns:1fr;gap:var(--space-5)}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-card.featured{translate:0 calc(var(--p) * -6px)}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  /* the grids collapse to one tall column here — raise the off-screen height
     estimates to match so scrolling into them doesn't pop (the page height jumps
     when the real laid-out height replaces a too-short estimate) */
  #content{contain-intrinsic-size:0 3400px}
  #pricing{contain-intrinsic-size:0 2600px}
  #reviews{contain-intrinsic-size:0 1100px}
}
@media(max-width:900px){
  .title-block{display:none}
}
@media(max-width:700px){
  .review-stats{grid-template-columns:1fr}
  .review-stat + .review-stat{border-left:none;border-top:1px solid var(--border)}
}
@media(max-width:600px){
  #dock{display:none}
  .contact-box{padding:40px 22px 30px}
  .commission-cta{width:100%;justify-content:center}
  .commission-dim{margin:var(--space-6) auto var(--space-5)}
  .hero-name{font-size:clamp(2.8rem,15vw,4.6rem)}
}
/* mobile nav open */
.nav-open .nav-links{
  display:flex;flex-direction:column;gap:2px;align-items:stretch;
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:min(86vw,300px);
  background:rgba(16,18,21,0.95);
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:10px;
}
.nav-open .nav-link{padding:10px 12px}