/* Additions for the self-hosted build: grid placement that Webflow kept in per-page styles,
   and the interaction states that were driven by the Webflow IX2 runtime. */

/* grid placement (was #w-node-… rules) */
.home-3-about-images .grid-image-block.is-tall { grid-row: span 2; }
.footer-2-utility-block.is-full { grid-column: 1 / -1; }
@media screen and (max-width: 991px) { .footer-2-utility-block.is-full { grid-column: 1 / -1; } }

/* easing curves used by the original interactions */
:root {
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- scroll reveals (only when JS is available) --- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 4rem, 0);
  transition: opacity 0.6s var(--ease-out-circ), transform 0.6s var(--ease-out-circ);
}
.js [data-reveal="1"] { transition-delay: 0.2s; }
.js [data-reveal="2"] { transition-delay: 0.3s; }
.js [data-reveal="3"] { transition-delay: 0.4s; }
.js [data-reveal="4"] { transition-delay: 0.5s; }
.js [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }

.js [data-grow] {
  opacity: 0; transform: scale3d(0, 0, 1);
  transition: opacity 1s var(--ease-out-quart) 0.2s, transform 1s var(--ease-out-quart) 0.2s;
}
.js [data-grow].is-revealed { opacity: 1; transform: scale3d(1, 1, 1); }
.js [data-slide] {
  opacity: 0; transform: translate3d(0, 100px, 0);
  transition: opacity 1s var(--ease-out-quart) 0.3s, transform 1s var(--ease-out-quart) 0.3s;
}
.js [data-slide].is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }

/* image reveal: a curtain slides up while the image settles from 1.3x to 1x */
.js .reveal-image-trigger .bg-for-animation { display: block; transform: translate3d(0, 0, 0); transition: transform 1s var(--ease-in-out-circ); }
.js .reveal-image-trigger .cover-image { transform: scale3d(1.3, 1.3, 1); transition: transform 2s var(--ease-out-circ); }
.js .reveal-image-trigger.is-revealed .bg-for-animation { transform: translate3d(0, -101%, 0); }
.js .reveal-image-trigger.is-revealed .cover-image { transform: scale3d(1, 1, 1); }

/* --- fullscreen menu open/close timeline --- */
.fullscreen-menu { display: none; }
.fullscreen-menu .menu-background-color { transform: translate3d(0, -101%, 0); transition: transform 0.6s var(--ease-out-circ) 0.2s; }
.fullscreen-menu .menu-contact-wrapper,
.fullscreen-menu .menu-links-wrapper,
.fullscreen-menu .close-button { opacity: 0; transition: opacity 0.3s ease; }
.fullscreen-menu .menu-cover-image { transform: scale3d(1.2, 1.2, 1); transition: transform 2s var(--ease-out-circ); }
.fullscreen-menu .menu-contact,
.fullscreen-menu .menu-main-links { opacity: 0; transform: translate3d(0, -2em, 0); transition: opacity 0.3s ease, transform 0s linear 0.3s; }

.fullscreen-menu.is-open .menu-background-color { transform: translate3d(0, 0, 0); transition: transform 0.8s var(--ease-in-out-circ); }
.fullscreen-menu.is-open .menu-contact-wrapper { opacity: 1; transition: opacity 0.3s ease 0.6s; }
.fullscreen-menu.is-open .menu-cover-image { transform: scale3d(1, 1, 1); transition: transform 2s var(--ease-out-circ) 0.6s; }
.fullscreen-menu.is-open .menu-links-wrapper { opacity: 1; transition: opacity 0.3s ease 0.8s; }
.fullscreen-menu.is-open .close-button { opacity: 1; transition: opacity 0.3s ease 1s; }
.fullscreen-menu.is-open .menu-contact { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 0.8s var(--ease-out-circ) 1s, transform 0.8s var(--ease-out-circ) 1s; }
.fullscreen-menu.is-open .menu-main-links { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 0.8s var(--ease-out-circ) 1.2s, transform 0.8s var(--ease-out-circ) 1.2s; }
.menu-is-open body { overflow: hidden; }

/* --- hover micro-interactions (icon "flies through", burger lines wipe) --- */
@keyframes icon-fly {
  0%   { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); animation-timing-function: var(--ease-in-out-circ); }
  50%  { transform: translate3d(1em, 0, 0) scale3d(0, 0, 1); }
  50.1%{ transform: translate3d(-1em, 0, 0) scale3d(0, 0, 1); animation-timing-function: var(--ease-out-circ); }
  100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
}
.menu-link:hover .icon.is-menu-link-icon { animation: icon-fly 0.8s both; }
.button:hover .button-icon { animation: icon-fly 1.2s both; }
@keyframes line-wipe {
  0%   { transform: translate3d(0, 0, 0); animation-timing-function: var(--ease-in-out-circ); }
  50%  { transform: translate3d(101%, 0, 0); }
  50.1%{ transform: translate3d(-101%, 0, 0); animation-timing-function: var(--ease-in-out-circ); }
  100% { transform: translate3d(0, 0, 0); }
}
.button-for-open-menu:hover .burger-menu-line.is-1st { animation: line-wipe 1.2s both; }
.button-for-open-menu:hover .burger-menu-line.is-2nd { animation: line-wipe 1.2s both 0.1s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-grow], .js [data-slide],
  .js .reveal-image-trigger .bg-for-animation, .js .reveal-image-trigger .cover-image,
  .fullscreen-menu * { transition-duration: 0.01s !important; transition-delay: 0s !important; animation: none !important; }
}
html { scroll-behavior: smooth; }

/* --- small layout refinements for this site's content --- */
.brand-name { white-space: nowrap; }
@media screen and (max-width: 479px) { .brand-name { font-size: 1.25em; } }
/* with an odd number of service cards, let the last one span the full row on desktop */
@media screen and (min-width: 992px) { .services-3-list .service-3-item:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* the Webflow copy had .footer-2 collapsed to a fixed 40px height with hidden overflow, which hides the
   whole footer; restore the template's natural height so the contact block is visible */
.footer-2 { height: auto; }
