/* Portfolio responsive refinement and subtle homepage hero motion */
img,video,svg,canvas{max-width:100%;height:auto}
table{max-width:100%}
pre,code{max-width:100%;overflow-x:auto}

@keyframes portfolioHeroAmbient{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1.01)}
  100%{transform:translate3d(1.5%,1%,0) scale(1.035)}
}
body.precision-home .portfolio-reference-hero{
  isolation:isolate;
}
body.precision-home .portfolio-reference-hero::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-12% !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 18% 30%,rgba(255,255,255,.055),transparent 30%),
    radial-gradient(circle at 78% 62%,rgba(255,255,255,.035),transparent 34%) !important;
  transform:translate3d(0,0,0) scale(1);
  animation:portfolioHeroAmbient 18s ease-in-out infinite alternate;
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){
  body.precision-home .portfolio-reference-hero::before{animation:none !important}
}

@media(max-width:760px){
  body .reference-header.site-header{
    width:calc(100% - 20px) !important;
    top:8px !important;
  }
  body .reference-header .reference-nav{
    min-height:54px !important;
    padding:6px 10px !important;
    gap:10px !important;
  }
  body .reference-brand{flex:0 1 auto !important;min-width:0 !important}
  body .reference-header .reference-logo{width:34px !important;height:34px !important;object-fit:contain !important}
  body .reference-menu{
    flex:1 1 auto !important;
    min-width:0 !important;
    justify-content:flex-end !important;
    gap:clamp(10px,3.2vw,16px) !important;
  }
  body .reference-menu a{
    font-size:.78rem !important;
    letter-spacing:-.01em !important;
  }
  body .reference-header .reference-linkedin{
    min-height:32px !important;
    padding:6px 8px !important;
  }

  .shell{width:calc(100% - 32px)}
  main{min-width:0}
  h1{font-size:clamp(40px,11vw,58px)}
  h2{font-size:clamp(30px,8vw,44px)}
  .actions,.hero-actions{flex-wrap:wrap}
  .button,.hero-btn{max-width:100%}
  .hero-grid,.hero-reference-shell,.case-hero-grid,.case-section-grid,
  .story-row,.story-row.reverse,.about-grid,.skills-grid,.project-grid{
    grid-template-columns:1fr !important;
  }
  .case-hero,.about-hero{overflow:hidden}
  .case-title,.case-facts,.section-head,.story-copy,.story-media{min-width:0}
  .story-media img,.case-section img,.project-image img,.work-card img{
    width:100%;height:auto;object-fit:cover;
  }
  .footer > .shell{width:calc(100% - 32px) !important}
}
@media(max-width:480px){
  body .reference-menu{gap:9px !important}
  body .reference-menu a{font-size:.72rem !important}
  body .reference-header .reference-linkedin{display:none !important}
  .shell{width:calc(100% - 28px)}
  .hero-text{font-size:17px}
  .hero-stage{max-width:100%;overflow:hidden}
  .case-title h1{overflow-wrap:anywhere}
  .next-case a{min-width:0}
}

/* Final homepage hero ambient motion: subtle, visible, non-distracting */
@keyframes heroAmbientShift {
  0%, 100% { background-position: 12% 38%, 84% 66%, center; }
  50% { background-position: 20% 44%, 76% 60%, center; }
}

body.precision-home .portfolio-reference-hero {
  position: relative !important;
  overflow: hidden !important;
  background-color: #000 !important;
  background-image:
    radial-gradient(circle at 12% 38%, rgba(255,255,255,.075), transparent 27%),
    radial-gradient(circle at 84% 66%, rgba(255,255,255,.045), transparent 30%) !important;
  background-size: 125% 125%, 125% 125%, auto !important;
  animation: heroAmbientShift 18s ease-in-out infinite alternate !important;
}

body.precision-home .portfolio-reference-hero::before,
body.precision-home .portfolio-reference-hero::after {
  content: none !important;
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.precision-home .portfolio-reference-hero {
    animation: none !important;
  }
}