/* Optical alignment follows the lowercase ink, rather than the font's em box. */
.logo>span:last-child{font-weight:625;padding-bottom:0;translate:0 -.105em}
.footer-word{font-weight:575}

@media(prefers-reduced-motion:no-preference){
  :root{--motion-ease:cubic-bezier(.2,.75,.2,1);--motion-spring:cubic-bezier(.2,.8,.2,1.15)}
  /* Entrances are driven by the observer; content stays visible if JS is unavailable. */
  .motion-enabled .hero-copy,.motion-enabled .hero-art{animation:none}
  .logo .brand-mark{transition:transform .55s var(--motion-spring)}
  .logo:hover .brand-mark,.logo:focus-visible .brand-mark{transform:rotate(-8deg) scale(1.06)}
  .desktop-nav a,.footer-nav a,.text-link,.legal-links button{position:relative;transition:color .25s,background .25s,translate .35s var(--motion-ease)}
  .desktop-nav a::after,.footer-nav a::after,.legal-links button::after{content:"";position:absolute;height:1px;bottom:6px;left:15%;right:15%;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--motion-ease)}
  .footer-nav a::after,.legal-links button::after{bottom:-3px;left:0;right:0}
  :is(.desktop-nav a,.footer-nav a,.legal-links button):is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:left}
  .desktop-nav a:hover,.footer-nav a:hover{translate:0 -2px}
  .text-link>span{transition:translate .4s var(--motion-ease)}
  .text-link:is(:hover,:focus-visible)>span{translate:4px -3px}
  .button{transition:transform .45s var(--motion-spring),box-shadow .35s,background .25s,border-color .25s}
  .button:is(:hover,:focus-visible){transform:translateY(-4px) scale(1.025)}
  .button:active{transform:translateY(-1px) scale(.97);transition-duration:.12s}
  .button .arrow,.back-top .arrow{transition:transform .4s var(--motion-spring)}
  .button:is(:hover,:focus-visible) .arrow{transform:translate(2px,-2px)}
  .back-top:is(:hover,:focus-visible) .arrow{transform:translateY(-5px)}
  .theme-toggle,.menu-toggle{transition:background .25s,border-color .25s,box-shadow .25s,scale .3s var(--motion-spring)}
  .theme-toggle:active,.menu-toggle:active{scale:.9}
  .theme-toggle svg{animation:theme-turn .5s var(--motion-ease) both}
  @keyframes theme-turn{from{opacity:0;transform:rotate(-80deg) scale(.65)}to{opacity:1;transform:rotate(0) scale(1)}}

  .hero-showreel,.showreel-stage,.work-preview{--tilt-x:0deg;--tilt-y:0deg;--tilt-base:0deg;--card-lift:0px;transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(var(--tilt-base)) translateY(var(--card-lift));transition:transform .65s var(--motion-ease),box-shadow .6s,border-color .4s}
  .hero-showreel{--tilt-base:1.5deg}
  .reel-timeline i{transform-origin:50% 100%;animation:timeline-beat 3.2s ease-in-out infinite;animation-play-state:paused}
  .hero-showreel.is-in-view .reel-timeline i{animation-play-state:running}
  .reel-timeline i:nth-child(2){animation-delay:-.6s}.reel-timeline i:nth-child(3){animation-delay:-1.3s}.reel-timeline i:nth-child(4){animation-delay:-2.1s}.reel-timeline i:nth-child(5){animation-delay:-2.7s}
  @keyframes timeline-beat{0%,100%{transform:scaleY(.65)}45%{transform:scaleY(1.45)}70%{transform:scaleY(.9)}}
  .work-preview::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#ffbb7719 46%,#fff2 50%,transparent 70%);transform:translateX(-120%);transition:transform .85s var(--motion-ease)}
  .work-card:focus-within .work-preview::after,.work-card:active .work-preview::after{transform:translateX(120%)}
  .work-info h3,.work-info>span{transition:translate .4s var(--motion-ease),color .4s}
  .work-card:focus-within .work-info h3{color:var(--orange);translate:4px 0}
  .filters button{transition:transform .35s var(--motion-spring),background .25s,color .25s,border-color .25s}
  .filters button:active{transform:scale(.94)}
  .filters button[aria-pressed=true]{animation:filter-select .35s var(--motion-spring)}
  @keyframes filter-select{from{transform:scale(.92)}to{transform:scale(1)}}
  .service summary{transition:background .35s}
  .service-number,.service-tag,.service-name{transition:transform .45s var(--motion-ease),color .3s}
  .service summary:is(:hover,:focus-visible) .service-name{transform:translateX(8px)}
  .service summary:is(:hover,:focus-visible) .service-tag{transform:translateX(-5px)}
  .service-content li,.delivery-formats>span,.comparison-tags>span{transition:transform .35s var(--motion-spring),border-color .3s,background .3s}
  .service-content li:hover,.delivery-formats>span:hover,.comparison-tags>span:hover{transform:translateY(-4px);border-color:var(--orange)}
  .step,.principles-grid article{position:relative}
  .step::before,.principles-grid article::before{content:"";position:absolute;inset:-1px 0 auto;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--motion-ease)}
  .step.is-revealed::before,.principles-grid article.is-revealed::before{animation:rule-draw .9s var(--motion-ease) both}
  @keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(.22)}}
  .step-number,.principle-index,.step h3,.principles-grid h3{transition:translate .45s var(--motion-spring),color .35s}
  .comparison-card,.review-placeholder,.review-card{transition:translate .5s var(--motion-ease),border-color .35s,box-shadow .45s}
  .comparison-card:focus-within,.review-card:focus-within{translate:0 -7px;border-color:var(--orange)}
  .delivery-list li{transition:translate .35s var(--motion-ease)}
  .delivery-list li:hover{translate:5px 0}
  .delivery-list li::before{transition:rotate .4s}
  .delivery-list li:hover::before{rotate:90deg}
  .faq-item summary{transition:color .3s,translate .35s var(--motion-ease)}
  .faq-item summary:active{translate:3px 0}
  .contact-form label{transition:color .3s,translate .35s var(--motion-ease)}
  .contact-form label:focus-within{color:var(--orange);translate:0 -3px}
  .contact-form input,.contact-form textarea{transition:border-color .3s,box-shadow .35s,background .3s}
  .footer-word>.brand-mark{transition:transform .8s var(--motion-ease)}
  .footer-word:hover>.brand-mark{transform:rotate(0) scale(1.04)}
  dialog[open]{animation:dialog-enter .45s var(--motion-ease)}
  dialog[open]::backdrop{animation:backdrop-enter .3s ease-out}
  @keyframes dialog-enter{from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:none}}
  @keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
  .dialog-close{transition:rotate .35s var(--motion-spring),background .25s}
  .dialog-close:is(:hover,:focus-visible){rotate:90deg}
  @media(hover:hover) and (pointer:fine){
    .work-card:hover .work-preview{--card-lift:-8px;border-color:var(--orange);box-shadow:0 25px 55px #0002,0 8px 30px #ff681f0e}
    .work-card:hover .work-preview::after{transform:translateX(120%)}
    .work-card:hover .work-info h3{translate:5px 0;color:var(--orange)}
    .work-card:hover .work-info>span{translate:-3px 0}
    .hero-showreel:hover,.showreel-stage:hover{--card-lift:-5px;box-shadow:0 28px 80px #0003}
    .step:hover::before,.principles-grid article:hover::before{animation:none;transform:scaleX(1)}
    .step:hover .step-number,.principles-grid article:hover .principle-index{translate:0 -4px}
    .step:hover h3,.principles-grid article:hover h3{translate:5px 0;color:var(--orange)}
    .comparison-card:hover,.review-placeholder:hover,.review-card:hover{translate:0 -7px;border-color:var(--orange);box-shadow:0 18px 35px #0000000c}
  }
  @media(max-width:1000px){.hero-showreel{--tilt-base:0deg}}
  @media(hover:none){.work-card:active .work-preview{scale:.985}.comparison-card:active,.review-placeholder:active{translate:0 -3px}}
}
@media(prefers-reduced-motion:reduce){
  .motion-enabled .hero-copy,.motion-enabled .hero-art{animation:none}
  .hero-showreel,.showreel-stage,.work-preview{transform:none!important}
  .step::before,.principles-grid article::before,.work-preview::after{display:none}
}