/* Motion layer (ideas from ArcHub / Prague): page transitions, preloader, split-text and mask
   reveals, parallax, marquee, line drawing, magnetic buttons, scroll progress.
   motion.js adds the .m-* classes; without JS or with reduced motion the site stays static. */

/* Page-to-page transitions (View Transitions API, same-origin navigations) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:m-vt-out .35s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:m-vt-in .55s cubic-bezier(.16,1,.3,1) both}
@keyframes m-vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes m-vt-in{from{opacity:0;transform:translateY(22px)}}

/* Preloader: home pages, once per session */
.m-loader{position:fixed;inset:0;z-index:200;background:#f4f1e9;display:grid;place-items:center;pointer-events:none;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.m-loader.is-out{transform:translateY(-100%)}
.m-loader-mark{display:flex;flex-direction:column;align-items:center;gap:14px}
.m-loader-word{display:flex;overflow:hidden;font:900 clamp(34px,6vw,72px)/1 'Arial Black',Arial,sans-serif;letter-spacing:-.04em;color:#272f29}
.m-loader-word span{display:inline-block;transform:translateY(105%);animation:m-rise .7s cubic-bezier(.16,1,.3,1) forwards}
.m-loader-line{width:0;height:2px;background:#c3aa7b;animation:m-grow .9s .25s cubic-bezier(.65,0,.35,1) forwards}
@keyframes m-rise{to{transform:none}}
@keyframes m-grow{to{width:min(220px,40vw)}}

/* Scroll progress */
.m-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:#c3aa7b;transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}

/* Header: glass when scrolled, hides on scroll down */
.m-header{transition:transform .45s cubic-bezier(.16,1,.3,1),background-color .3s,box-shadow .3s,backdrop-filter .3s}
.m-header.is-scrolled{background-color:rgba(244,241,233,.86)!important;-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 1px 0 rgba(39,47,41,.08)}
.m-header.is-hidden{transform:translateY(-110%)}

/* Split text: each word slides up from a mask */
.m-split .m-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.m-split .m-wi{display:inline-block;transform:translateY(105%);transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 55ms)}
.m-split.is-in .m-wi{transform:none}

/* Fade-up reveal with stagger */
.m-up{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0) * 90ms)}
.m-up.is-in{opacity:1;transform:none}

/* Image mask reveal (wipe up + settle) */
.m-mask{overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.2s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--d,0) * 90ms)}
.m-mask img{transform:scale(1.18);transition:transform 1.6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0) * 90ms)}
.m-mask.is-in{clip-path:inset(0 0 0 0)}
.m-mask.is-in img{transform:scale(1)}

/* Hero: slow zoom-out of the photo, staged copy */
.m-hero-photo img{animation:m-kenburns 2.6s cubic-bezier(.16,1,.3,1) both;will-change:transform}
@keyframes m-kenburns{from{transform:scale(1.14)}to{transform:scale(1)}}
.m-parallax{will-change:transform}

/* Line drawing at the top of sections */
.m-line{position:relative}
.m-line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#c3aa7b;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s cubic-bezier(.76,0,.24,1)}
.m-line.is-in::before{transform:scaleX(1)}
/* SVG icons draw their strokes */
.m-draw path{stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--d,0) * 90ms + .2s)}
.m-draw.is-in path{stroke-dashoffset:0}

/* Marquee for the trust line */
.m-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.m-marquee-track{display:flex;width:max-content;animation:m-marquee 38s linear infinite}
.m-marquee:hover .m-marquee-track{animation-play-state:paused}
.m-marquee-track>ul{flex:none;display:flex!important;gap:clamp(28px,4vw,56px);margin:0!important;padding:0 clamp(28px,4vw,56px) 0 0!important;border:0!important;max-width:none!important;width:auto!important}
.m-marquee-track>ul>li{white-space:nowrap}
@keyframes m-marquee{to{transform:translateX(-50%)}}

/* Hover: cards and images */
.rp-card .rp-media img,.m-zoom img{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.rp-card:hover .rp-media img,.m-zoom:hover img{transform:scale(1.06)}
.m-tilt{transition:transform .6s cubic-bezier(.16,1,.3,1);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
/* Tiles stay in place on hover: a lift moved the tile out from under a cursor at its lower edge,
   hover dropped, the tile fell back and the cursor flickered between hand and arrow. */
.service-tile{transition:box-shadow .5s}
.service-tile:hover{box-shadow:0 18px 40px rgba(39,47,41,.12)}
main p a:not(.button),.prose a{background-image:linear-gradient(#c3aa7b,#c3aa7b);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .5s cubic-bezier(.16,1,.3,1)}
main p a:not(.button):hover,.prose a:hover{background-size:100% 1px}

/* Magnetic buttons */
.m-magnet{transition:transform .5s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 .m-loader,.m-progress{display:none!important}
}

/* Liquid buttons (idea from the "Waterline" liquid-glass navbar): colours stay as they are.
   A drop slides between menu items, buttons get a water ripple on press, a sheen that follows
   the cursor, a soft squash and a glass rim. Shapes are rounded rectangles. */
.m-liquid{position:relative;overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .35s ease,filter .35s ease}
.m-liquid.m-press{transform:scale(.97,.93)}
.m-liquid .m-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s ease;
 background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),var(--m-sheen,rgba(255,255,255,.24)),transparent 62%)}
.m-liquid:hover .m-sheen,.m-liquid:focus-visible .m-sheen{opacity:1}
.m-liquid .m-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;transform:translate(-50%,-50%) scale(0);
 background:radial-gradient(circle,var(--m-wave,rgba(255,255,255,.28)) 0 40%,transparent 41% 54%,var(--m-wave,rgba(255,255,255,.28)) 55% 60%,transparent 61%);
 animation:m-ripple .85s cubic-bezier(.16,1,.3,1) forwards}
@keyframes m-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
/* Dark buttons: glass rim and a lift on hover */
.button.m-liquid,.assistant-go.m-liquid,.chat-send-brief.m-liquid,.chat-confirm.m-liquid,.chat-form button.m-liquid{
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.18),0 1px 2px rgba(25,36,30,.12)}
.button.m-liquid:hover,.assistant-go.m-liquid:hover,.chat-send-brief.m-liquid:hover,.chat-confirm.m-liquid:hover,.chat-form button.m-liquid:hover{
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 24px -10px rgba(25,36,30,.45)}
/* Light buttons and chips: golden sheen and wave */
.m-liquid.is-light{--m-sheen:rgba(195,170,123,.28);--m-wave:rgba(39,47,41,.14)}
.m-liquid.is-light:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 20px -12px rgba(25,36,30,.35)}

/* The drop behind menu items (header menu, language switcher) */
.m-drop-host{position:relative;isolation:isolate}
.m-drop-host>a{position:relative;z-index:1}
.m-drop{position:absolute;left:0;top:0;width:0;height:0;border-radius:10px;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s ease;will-change:transform,width,height;
 background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.8),rgba(255,255,255,0) 55%),rgba(195,170,123,.24);
 box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -2px 6px rgba(195,170,123,.3),inset 0 0 0 1px rgba(195,170,123,.45),0 6px 16px -8px rgba(39,47,41,.4)}
.m-drop.is-on{opacity:1}
.m-drop-host[data-padded] >a{padding-left:12px!important;padding-right:12px!important}
@media (prefers-reduced-motion:reduce){.m-liquid,.m-liquid.m-press{transition:none;transform:none}.m-ripple{display:none}}