/* ==========================================================================
   Subtle motion pass: smaller distances, shorter durations, no blur/3D/loops
   (loaded last so it overrides earlier animation rules)
   ========================================================================== */

/* scroll reveal: gentle fade + short slide */
.js .reveal[data-anim] { transition: opacity .55s ease var(--d, 0ms), translate .6s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms), scale .6s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms), rotate .6s ease var(--d, 0ms), transform .25s, box-shadow .25s, border-color .25s, background .25s; }
.js .reveal[data-anim="zoom"] { scale: .98; translate: 0 12px; }
.js .reveal[data-anim="rise"] { translate: 0 22px; rotate: none; }
.js .reveal[data-anim="left"] { translate: -22px 0; }
.js .reveal[data-anim="right"] { translate: 22px 0; }
.js .reveal[data-anim="up"] { translate: 0 18px; }
.js .reveal[data-anim="pop"] { scale: .95; translate: 0 8px; }
.js .reveal[data-anim="flip"] { rotate: none; translate: 0 18px; }
.js .reveal { transition-duration: .55s; }
.js .reveal:not([data-anim]) { transform: translateY(14px); }

/* headings: fade + tiny slide, no blur */
.js .sec-head.reveal h2 { opacity: 0; filter: none; transform: translateY(12px); transition: opacity .6s .05s ease, transform .6s .05s ease; }
.js .sec-head.reveal.in h2 { opacity: 1; transform: none; }
.js .sec-head.reveal > p { transform: translateY(8px); transition: opacity .6s .15s, transform .6s .15s; }
.sec-head .eyebrow::after { transition: width .7s .15s ease; }
.js .step.reveal::after { transition: width .6s .3s; }

/* remove looping / attention-grabbing motion */
.stats-band { animation: none; background: linear-gradient(120deg, #5b50f5, #8b3df0 60%, #c95d9e); background-size: 100% 100%; }
.ico-badge.lg { animation: none; }
.cta-box .orb { animation: none; }
.btn-pulse::after { animation: none; display: none; }
.btn-pulse { animation: ringsoft 3.6s ease-in-out infinite; }
@keyframes ringsoft { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 116, 91, 0), 0 10px 24px -8px rgba(91, 80, 245, .55); } 50% { box-shadow: 0 0 0 7px rgba(240, 116, 91, .14), 0 10px 24px -8px rgba(91, 80, 245, .55); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.float, .sc-chip { animation-duration: 7s; }
.node.run { animation-duration: 2.6s; }
.orb { --k: .03; }
.orb.o2 { --k: -.025; }
.orb.o3 { --k: .015; }
.track { animation-duration: 60s; }
.name-marquee .track { animation-duration: 120s; }
.rotator { transition: opacity .4s ease, transform .4s ease; }
.rotator.swap { filter: none; transform: translateY(.15em); }

/* hover movement: smaller lifts */
.card:hover, .pillar:hover { transform: translateY(-3px); }
.js .card.reveal:hover, .js .pillar.reveal:hover { transform: translateY(-3px); }
.js .mini.reveal:hover, .js a.contact-item.reveal:hover { transform: translateX(2px); }
.js .eng.reveal:hover { transform: translateX(3px); }
.js .industry.reveal:hover, .js .ind-tile.reveal:hover { transform: translateY(-3px); }
.js .why-li.reveal:hover, .why-li:hover { transform: translateX(3px); }
.card:hover .ico-badge { transform: none; }
.dev-title:hover .ico-badge { transform: none; }
.work:hover .work-frame { transform: translateY(-4px); }
.mini:hover, .eng:hover, a.contact-item:hover { transform: translateX(2px); }
.industry:hover, .ind-tile:hover { transform: translateY(-3px); }
.dev-chips a:hover { transform: none; }
.chip:hover, .btn-primary:hover, .btn-white:hover { transform: translateY(-1px); }
.btn:hover .ic:last-child { transform: translateX(2px); }
.f-col li a:hover { padding-left: 3px; }

/* project showcase: calmer */
.sc-device { transform: rotateY(var(--ry, -2deg)) rotateX(var(--rx, 1deg)); }
.sc-item.is-active { transform: translateX(5px); }
.sc-screen { transform: scale(1.015); transition: opacity .6s ease, transform .8s ease; }
.sc-screen.is-active img { animation-duration: 14s; }
.wf-shot img { transition-duration: 5s; }
.work:hover .pill-btn { transform: none; }
.pill-btn { transform: translateY(6px); }

/* panels */
.method-tab.is-active, .stepper .method-tab.is-active .st-dot { transform: none; }
.stepper .method-tab.is-active .st-dot { transform: translateY(-2px); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.faq-list.is-active, .method-panel.is-active { animation-duration: .3s; }
.js .faq-a { transition-duration: .25s; }

/* ---- mobile drawer fixes ---- */
@media (max-width: 1099px) {
	/* backdrop-filter turns the header into the containing block of the fixed drawer; remove it here */
	.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
	/* overlay must sit below the header's stacking context (z-index 100) so the drawer stays clickable */
	.nav-overlay { z-index: 99; }
	.main-nav { height: 100vh; height: 100dvh; }
}

/* ==========================================================================
   Uniform boxes: methodology, numbers, projects and CTA share one width,
   radius and alignment (the content column), numbers attach to projects.
   ========================================================================== */
:root { --box-w: 1172px; --box-r: 32px; --gut: 24px; }
.method, .showcase, .stats-band { width: min(var(--box-w), calc(100% - 2 * var(--gut))); margin-left: auto; margin-right: auto; border-radius: var(--box-r); }
.method, .showcase { margin-top: 28px; margin-bottom: 28px; }
.method .container, .showcase .container { max-width: none; --pad: clamp(22px, 3.5vw, 44px); padding-left: var(--pad); padding-right: var(--pad); }
.name-marquee { margin-left: calc(var(--pad, 44px) * -1); margin-right: calc(var(--pad, 44px) * -1); }
.cta-box { border-radius: var(--box-r); }
.stats-band { margin-top: 0; margin-bottom: 0; }

/* numbers + projects = one continuous panel */
.stats-band.attached { margin-top: 28px; margin-bottom: 0; border-radius: var(--box-r) var(--box-r) 0 0; padding: 48px 0 44px; background: linear-gradient(120deg, #5b50f5, #8b3df0 60%, #c95d9e); position: relative; z-index: 2; }
.stats-band.attached + .showcase { margin-top: 0; border-radius: 0 0 var(--box-r) var(--box-r); border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 88px; }
.stats-band.attached .stats { max-width: none; padding: 0 clamp(22px, 3.5vw, 44px); }
.stats-band.attached .stat + .stat { position: relative; }
.stats-band.attached .stat + .stat::before { content: ""; position: absolute; left: -12px; top: 12%; bottom: 12%; width: 1px; background: rgba(255, 255, 255, .28); }
.stats-band .container { max-width: none; }

@media (max-width: 680px) {
	:root { --box-r: 24px; --gut: 18px; }
	.stats-band.attached { padding: 36px 0 32px; }
	.stats-band.attached + .showcase { padding-top: 64px; }
	.stats-band.attached .stat + .stat::before { display: none; }
}

/* "From first idea to measurable impact": full-width band, content kept in the standard column */
.method { width: 100%; max-width: none; margin: 0; border-radius: 0; padding: 112px 0; }
.method .container { max-width: 1220px; padding-left: 24px; padding-right: 24px; }
@media (max-width: 1099px) { .method { padding: 84px 0; } }
@media (max-width: 680px) { .method { padding: 64px 0; } .method .container { padding-left: 18px; padding-right: 18px; } }

/* Projects showcase (and the numbers strip attached to it): full-width band, content in the standard column */
.showcase, .stats-band.attached { width: 100%; max-width: none; margin-left: 0; margin-right: 0; border-radius: 0; }
.showcase { margin-top: 0; margin-bottom: 0; padding: 112px 0 96px; }
.stats-band.attached { margin-top: 0; padding: 56px 0; }
.stats-band.attached + .showcase { margin-top: 0; border-radius: 0; border-top: 0; padding-top: 104px; }
.showcase .container, .stats-band.attached .container { max-width: 1220px; padding-left: 24px; padding-right: 24px; --pad: 24px; }
.stats-band.attached .stats { padding: 0; }
.name-marquee { margin-left: -24px; margin-right: -24px; }
@media (max-width: 1099px) { .showcase { padding: 84px 0 72px; } .stats-band.attached + .showcase { padding-top: 84px; } }
@media (max-width: 680px) { .showcase { padding: 64px 0 56px; } .stats-band.attached + .showcase { padding-top: 64px; } .showcase .container, .stats-band.attached .container { padding-left: 18px; padding-right: 18px; --pad: 18px; } .name-marquee { margin-left: -18px; margin-right: -18px; } }

/* ==========================================================================
   Smooth mega menu: links fill the header height (no dead gap), panels cross-fade
   ========================================================================== */
@media (min-width: 1100px) {
	.hdr, .main-nav, .nav { align-items: stretch; }
	.main-nav { display: flex; }
	.nav > .mi { display: flex; align-items: stretch; }
	.top-link { position: relative; height: var(--header-h); padding: 0 14px; background: none !important; border-radius: 0; align-items: center; }
	.top-link::before { content: ""; position: absolute; left: 2px; right: 2px; top: 19px; bottom: 19px; border-radius: 999px; background: var(--grad-soft); opacity: 0; transform: scale(.92); transition: opacity .2s ease, transform .2s ease; z-index: -1; }
	.top-link > * { position: relative; }
	.top-link:hover::before, .mi.open > .top-link::before, .mi.is-active > .top-link::before { opacity: 1; transform: none; }
	.hdr-cta { align-self: center; }
	/* the gap-bridge is no longer needed and used to swallow hovers on neighbouring links */
	.sub::before, .is-drop > .sub::before { display: none; }

	/* panels: only the open one can receive the pointer; the newest sits on top */
	.sub { pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; z-index: 5; }
	.mi.open > .sub { pointer-events: auto; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; z-index: 6; }
	/* switching between menus: pure cross-fade */
	.nav.armed .sub { transform: none; transition: opacity .16s ease, visibility 0s linear .16s; }
	.nav.armed .mi.open > .sub { transition: opacity .16s ease, visibility 0s; }
	.is-drop > .sub { padding-top: 0; }
	.is-drop .sub-in { margin-top: 0; }
	.is-mega .sub-in { animation: none; }
}
.top-link { isolation: isolate; }

/* header row: logo, menu and Contact Us button share one vertical centre line */
.hdr { align-items: center; min-height: var(--header-h); }
.brand { display: flex; align-items: center; align-self: center; height: var(--header-h); }
.brand img { display: block; }
.burger { align-self: center; }
@media (min-width: 1100px) {
	.main-nav { align-self: stretch; align-items: center; }
	.nav { align-items: stretch; height: 100%; }
	.hdr-cta { align-self: center; margin-top: 0; margin-bottom: 0; }
}

/* ==========================================================================
   Layered sections: each section casts a soft shadow onto the one above it,
   so sections read as separate but connected layers.
   ========================================================================== */
main > section { position: relative; }
main > section + section,
.site-footer {
	position: relative;
	box-shadow: 0 -18px 34px -22px rgba(11, 16, 48, .28), 0 -2px 6px -2px rgba(11, 16, 48, .06);
}
/* dark sections need a slightly stronger, bluer shadow to show on light neighbours */
main > section.method, main > section.showcase, main > section.stats-band.attached {
	box-shadow: 0 -22px 40px -22px rgba(28, 24, 100, .45), 0 -2px 6px -2px rgba(11, 16, 48, .12);
}
/* floating boxed bands keep their own shadow and should not draw a full-width line */
main > section.stats-sec, main > section.cta-band { box-shadow: none; }
@media (max-width: 680px) {
	main > section + section, .site-footer { box-shadow: 0 -12px 24px -18px rgba(11, 16, 48, .26); }
}