/* CSS-only motion: safe visible defaults, progressive scroll enhancement. */
:root{--motion-ease:cubic-bezier(.22,.68,.22,1)}
@keyframes hmb-rise{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:translateY(0)}}
@keyframes hmb-photo{from{opacity:0;transform:translateY(36px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hmb-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes hmb-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes hmb-nav{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
 /* Time-based hero entrance; deliberately override the older V1 reset. */
 :is(.v1-site,.v2-site,.v3-site) :is(.hero-copy>*,.hero-content>*,.stage-copy>*){animation:hmb-rise 1s var(--motion-ease) both!important;animation-delay:120ms!important}
 :is(.v1-site,.v2-site,.v3-site) :is(.hero-copy,.hero-content,.stage-copy)>h1{animation-delay:250ms!important}
 :is(.v1-site,.v2-site,.v3-site) :is(.hero-copy,.hero-content,.stage-copy)>p:not(.eyebrow){animation-delay:390ms!important}
 :is(.v1-site,.v2-site,.v3-site) :is(.hero-copy,.hero-content,.stage-copy)>.button{animation-delay:530ms!important}
 .v1-site .hero-art,.v2-site .v2-auto-gallery,.v2-site .v2-manual-gallery,.v3-site .auto-gallery,.v3-site .gallery{animation:hmb-photo 1.15s var(--motion-ease) 300ms both!important}
 /* Header stays stable during navigation; only page content enters. */
 :is(.header-inner,.header-row){animation:none!important}
}
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  :is(.service-catalog article,.about-layout,.detail-layout,.introduction,.contact-band .wrap,.about,.working,.contact-layout){view-timeline-name:--hmb-section;view-timeline-axis:block}
  :is(.service-card,.project-card,.project-tile,.steps li,.deliverable-grid>div,.footer-grid>div,.contact-form-wrap,.contact-copy>*,.working-copy>*,.about-copy>*,.page-heading>*),:is(.service-catalog article,.about-layout,.detail-layout,.introduction,.contact-band .wrap,.about,.working,.contact-layout)>:is(div,img),.project-detail-image,.working-photo{
   animation:hmb-rise auto var(--motion-ease) both;
   animation-timeline:view();
   animation-range:entry 0% cover 34%;
  }
  /* Siblings share the section's timeline so the sequence remains coherent. */
  :is(.service-catalog article,.about-layout,.detail-layout,.introduction,.contact-band .wrap,.about,.working,.contact-layout)>:is(div,img){animation-timeline:--hmb-section}
  :is(.about-layout,.detail-layout,.introduction)>div,.service-catalog article>div{animation-name:hmb-left!important}
  .service-catalog article:nth-child(even)>div{animation-name:hmb-right!important}
  :is(.about-layout,.detail-layout)>img,.service-catalog article>img,.project-detail-image,.working-photo{animation-name:hmb-photo!important;animation-range:entry 8% cover 40%!important}
  .introduction>div{animation-range:entry 8% cover 38%!important}
  :is(.service-card,.project-card,.project-tile,.steps li,.footer-grid>div,.deliverable-grid>div):nth-child(2n){animation-range:entry 8% cover 38%!important}
  :is(.service-card,.project-card,.project-tile,.steps li,.footer-grid>div,.deliverable-grid>div):nth-child(3n){animation-range:entry 14% cover 42%!important}
  .about-copy,.working-copy{animation:none!important}
  :is(.about-copy,.working-copy,.page-heading)>p{animation-range:entry 8% cover 38%!important}
  :is(.about-copy,.working-copy)>.button{animation-range:entry 14% cover 42%!important}
  .footer-grid>div{animation-range:entry 0% entry 100%!important}
  /* Never hide a keyboard-focused control or its content group. */
  :is(.service-card,.project-card,.project-tile,.steps li,.deliverable-grid>div,.footer-grid>div,.contact-form-wrap,.contact-copy>*,.working-copy>*,.about-copy>*,.page-heading>*),:is(.service-catalog article,.about-layout,.detail-layout,.introduction,.contact-band .wrap,.about,.working,.contact-layout)>:is(div,img),.project-detail-image,.working-photo{will-change:auto}
  :is(.service-card,.project-card,.project-tile,.steps li,.deliverable-grid>div,.footer-grid>div,.contact-form-wrap,.contact-copy>*,.working-copy>*,.about-copy>*,.page-heading>*):focus-within,:is(.service-catalog article,.about-layout,.detail-layout,.introduction,.contact-band .wrap,.about,.working,.contact-layout)>div:focus-within{animation:none;opacity:1;transform:none}
 }
}
/* Independent transform properties keep hover from fighting reveal keyframes. */
:is(.v1-site,.v2-site,.v3-site) .button{transition:background-color .35s,color .35s,border-color .35s,translate .35s var(--motion-ease),scale .35s var(--motion-ease)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 :is(.service-card,.project-card,.project-tile){transition:translate .4s var(--motion-ease),scale .4s var(--motion-ease),box-shadow .4s,border-color .4s}
 :is(.service-card,.project-card,.project-tile):hover{translate:0 -7px;scale:1.015;box-shadow:0 16px 30px #17253c12}
 :is(.v1-site,.v2-site,.v3-site) .button:hover{translate:0 -2px}
 :is(.v1-site,.v2-site,.v3-site) .button:active{translate:0 0;scale:.98}
}
@media(max-width:768px){
 @keyframes hmb-rise{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:translateY(0)}}
 @keyframes hmb-left{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:translateY(0)}}
 @keyframes hmb-right{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){
 :is(.v1-site,.v2-site,.v3-site) *{animation:none!important;transition:none!important;translate:none!important;scale:none!important}
 :is(.service-card,.project-card,.project-tile,.steps li,.deliverable-grid>div,.footer-grid>div,.contact-form-wrap,.contact-copy>*,.working-copy>*,.about-copy>*,.page-heading>*),:is(.service-catalog article,.about-layout,.detail-layout,.introduction,.contact-band .wrap,.about,.working,.contact-layout)>:is(div,img),.project-detail-image,.working-photo{opacity:1;transform:none}
}

/* Anchor text to its own box: tall adjacent images must not reveal off-screen copy. */
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .service-catalog article>div{animation:none!important;view-timeline-name:--hmb-copy;view-timeline-axis:block}
  .service-catalog article>div>*{animation:hmb-rise auto var(--motion-ease) both;animation-timeline:--hmb-copy;animation-range:entry 0% cover 42%}
  .service-catalog article>div>h2{animation-range:entry 8% cover 46%}
  .service-catalog article>div>p{animation-range:entry 16% cover 50%}
  .service-catalog article>div>a{animation-range:entry 24% cover 54%}
  .service-catalog article>div:focus-within>*{animation:none;opacity:1;transform:none}
 }
}