/* Motion enhances the existing design. All animated properties are transform/opacity. */
:root { --motion-ease: var(--ease); --motion-duration: .65s; }
.motion-intro { position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:var(--navy); pointer-events:none; opacity:0; }
.motion-intro img { width:82px; height:82px; object-fit:contain; opacity:0; }
.intro-running .motion-intro { opacity:1; }
.intro-running .motion-intro img { animation:intro-logo .48s var(--motion-ease) .06s both; }
.motion-intro.is-leaving { animation:intro-dismiss .35s ease-out both; }
.intro-running body > .header, .intro-running body > main, .intro-running body > .utility, .intro-running body > .conversation, .intro-running body > footer { opacity:0; }
.motion-page-arrival { animation:page-arrive .55s var(--motion-ease) both; }
@keyframes intro-logo { from { opacity:0; transform:translate3d(0,8px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes intro-dismiss { from { opacity:1; } to { opacity:0; } }
@keyframes page-arrive { from { opacity:0; transform:translate3d(0,12px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
.hero-motion #hero-image { animation:hero-settle .95s var(--motion-ease) both; }
.hero-motion .hero-content h1 { animation:hero-arrive .65s var(--motion-ease) .12s both; }
.hero-motion .hero-content p { animation:hero-arrive .65s var(--motion-ease) .22s both; }
.hero-motion .hero-content .button { animation:hero-arrive .65s var(--motion-ease) .32s both; }
@keyframes hero-settle { from { transform:scale(1.05); } to { transform:scale(1); } }
@keyframes hero-arrive { from { opacity:0; transform:translate3d(0,24px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
.motion-ready .motion-reveal { --reveal-y:32px; opacity:0; transform:translate3d(0,calc(var(--reveal-y) + var(--lift-y,0px)),0); transition:transform var(--motion-duration) var(--motion-ease),opacity var(--motion-duration) var(--motion-ease); transition-delay:var(--reveal-delay,0ms); }
.motion-ready .motion-reveal.is-visible { --reveal-y:0px; opacity:1; }
.motion-card.is-animating { will-change:transform,opacity; }
.motion-ready .motion-reveal.is-visible:not(.is-animating):not(.motion-card) { transform:none; }
.motion-ready .motion-reveal.is-visible:not(.is-animating) { transition-delay:0ms; }
/* Isolate card hover from the reveal: both share one composed transform. */
.motion-card { position:relative; isolation:isolate; --lift-y:0px; transform:translate3d(0,var(--lift-y),0); transition:transform .5s var(--motion-ease),opacity .5s var(--motion-ease); }
.motion-card::after { content:''; position:absolute; inset:-9px; z-index:-1; pointer-events:none; box-shadow:0 12px 28px var(--tone-042b3d18); opacity:0; transition:opacity .5s var(--motion-ease); }
.motion-card .card-image img,.motion-card .project-photo img,.gallery-item > img,.split-copy > img,.team-grid article > img { transition:transform .5s var(--motion-ease),opacity .5s var(--motion-ease); }
.gallery-item { overflow:clip; }
/* A fixed shadow/background layer fades, without interpolating a shadow or colour. */
.header { isolation:isolate; }
.header::after { content:''; position:absolute; inset:0; z-index:-1; background:var(--navy); box-shadow:0 5px 20px var(--tone-021c2980); opacity:0; pointer-events:none; transition:opacity .45s ease-out; }
.header.is-scrolled::after { opacity:1; }
.nav-group[open] .mega { animation:menu-arrive .35s var(--motion-ease) both; }
.nav-open .header nav { animation:menu-arrive var(--duration) var(--motion-ease) both; }
@keyframes menu-arrive { from { opacity:0; transform:translate3d(0,-10px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
.nav-contact,.mega-links a,.nav-group summary,.footer-grid a:not(.brand),.footer-bottom a { position:relative; }
.nav-contact::after,.mega-links a::after,.nav-group summary::after,.footer-grid a:not(.brand)::after,.footer-bottom a::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; opacity:.65; transition:transform var(--duration) var(--motion-ease),opacity var(--duration) ease-out; }
.nav-group summary::after { bottom:23px; }
/* Override the old background transition: brand colours still change immediately. */
.button { transition:transform .45s var(--motion-ease),opacity .45s ease-out; }
.text-link svg,.contact-line svg,.principles svg,.service-card h3 svg,.project-card h3 svg { transition:transform var(--duration) var(--motion-ease); }
.motion-shape-host { position:relative; isolation:isolate; }
.floating-shapes { position:absolute; inset:0; overflow:clip; pointer-events:none; z-index:-1; }
.floating-shape { position:absolute; display:block; pointer-events:none; opacity:.065; transform:translate3d(0,0,0); }
.floating-shape.shape-circle { width:190px; height:190px; border:1px solid var(--tone-c1d6df); border-radius:50%; right:-45px; top:20%; }
.floating-shape.shape-arc { width:230px; height:230px; border:1px solid var(--tone-dd4454); border-bottom-color:transparent; border-left-color:transparent; border-radius:50%; left:-90px; top:30%; }
.floating-shape.shape-small { width:75px; height:75px; border:1px solid var(--tone-dd4454); border-radius:50%; right:8%; top:12%; }
.floating-shape.shape-wide { width:300px; height:300px; border:1px solid var(--tone-c1d6df); border-radius:50%; left:-120px; bottom:8%; }
.high-legibility .floating-shapes { display:none; }
.legibility-toggle { font:inherit; color:inherit; min-height:44px; display:inline-flex; align-items:center; gap:7px; padding:0; }
.legibility-toggle::before { content:''; width:12px; height:12px; border:1px solid currentColor; border-radius:50%; }
.legibility-toggle[aria-pressed=true]::before { background:currentColor; box-shadow:inset 0 0 0 3px var(--tone-042b3d); }
.motion-count-value { display:inline-block; text-align:right; font-variant-numeric:tabular-nums; }
@media (hover:hover) and (pointer:fine) {
  .motion-card:hover { --lift-y:-4px; }
  .motion-card:hover::after { opacity:1; }
  .service-card:hover .card-image img,.project-photo:hover img,.gallery-item:hover > img,.team-grid article:hover > img { transform:scale(1.06); }
  .button:hover { transform:translate3d(0,-2px,0); }
  .text-link:hover svg,.contact-line:hover svg,.principles a:hover svg,.service-card:hover h3 svg,.project-card h3 a:hover svg { transform:translate3d(4px,0,0); }
  .nav-contact:hover::after,.mega-links a:hover::after,.nav-group summary:hover::after,.footer-grid a:not(.brand):hover::after,.footer-bottom a:hover::after { transform:scaleX(1); }
}
@media(max-width:740px) {
  .floating-shape { opacity:.045; }
  .floating-shape.shape-circle { width:120px; height:120px; right:-35px; }
  .floating-shape.shape-arc { width:160px; height:160px; left:-80px; }
  .floating-shape.shape-wide { width:200px; height:200px; left:-110px; }
  .nav-group summary::after { bottom:11px; }
  .motion-card::after { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .intro-running body > .header,.intro-running body > main,.intro-running body > .utility,.intro-running body > .conversation,.intro-running body > footer { opacity:1!important; }
  .motion-intro,.floating-shapes { display:none!important; }
  .motion-ready .motion-reveal { opacity:1!important; transform:none!important; }
  .hero-motion #hero-image,.motion-card,.button,.nav-open .header nav,.nav-group[open] .mega { transform:none!important; }
}
@media print {
  .motion-intro,.floating-shapes,.legibility-toggle { display:none!important; }
  body > main { opacity:1!important; animation:none!important; }
  .motion-ready .motion-reveal { opacity:1!important; transform:none!important; }
}