/* site.css: everything the static site adds on top of webflow.css (the old site's compiled stylesheet,
   loaded first and left untouched). New rules and overrides go HERE. Bump ?v=N in templates/shell.html
   when this file changes, then re-render. */

/* ---- Fonts (docs/decisions.md D8). The brand body font is Segoe UI (Branding July 2025). Windows
   visitors get their installed Segoe UI; everyone else gets Selawik, Microsoft's open-licence (OFL)
   metric-compatible stand-in. The family name matches what webflow.css asks for ("Segoe Ui"). We never
   serve Segoe UI files ourselves: they are not licensed for web use. */
@font-face {
  font-family: "Segoe Ui";
  src: local("Segoe UI"), local("SegoeUI"), url("/assets/fonts/selawik-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Segoe Ui";
  src: local("Segoe UI Bold"), local("SegoeUI-Bold"), url("/assets/fonts/selawik-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* italics: the installed face where there is one; elsewhere the browser slants the upright face */
@font-face {
  font-family: "Segoe Ui";
  src: local("Segoe UI Italic"), local("SegoeUI-Italic");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Segoe Ui";
  src: local("Segoe UI Bold Italic"), local("SegoeUI-BoldItalic");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---- Scroll reveal (replaces Webflow IX2 fadeIn / slideInBottom / popIn; site.js adds .is-in).
   Hidden only when JS is running (html.js), so a page without JS shows everything. */
html.js [data-reveal] {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.165, .84, .44, 1), transform 1s cubic-bezier(.165, .84, .44, 1);
}
html.js [data-reveal="slide"] { transform: translate3d(0, 100px, 0); }
html.js [data-reveal="pop"] {
  transform: scale(.75);
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Page-load rise (replaces Webflow IX3 "load" timeline: H1 at 0 s, intro text at .5 s, buttons at 1 s) */
@keyframes ms-rise-30 { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }
@keyframes ms-rise-10 { from { opacity: 0; transform: translateY(10%); } to { opacity: 1; transform: none; } }
.heading-style-h1 { animation: ms-rise-30 1s cubic-bezier(.165, .84, .44, 1) both; }
.text-size-medium { animation: ms-rise-10 1s cubic-bezier(.165, .84, .44, 1) .5s both; }
.hero_service-button { animation: ms-rise-30 1s cubic-bezier(.165, .84, .44, 1) 1s both; }

/* ---- Service-page gallery: one slow 30 s slide to the left (replaces IX2 "Gallery animation") */
@keyframes ms-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100vw, 0, 0); } }
[data-marquee] { animation: ms-marquee 30s linear forwards; }
[data-marquee]:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .heading-style-h1, .text-size-medium, .hero_service-button, [data-marquee] { animation: none; }
}

/* ---- Mobile menu: the hamburger is a real <button>; site.js opens the menu in .w-nav-overlay, which
   webflow.css already styles (data-collapse="medium" = below 992px). */
button.w-nav-button {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: 0;
}
.w-nav-button .nav-icon { display: block; }

/* ---- Gallery lightbox (replaces w-lightbox) */
.ms-lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .9);
}
.ms-lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.ms-lightbox img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: calc(100vw - 7rem);
  max-height: calc(100vh - 4rem);
  object-fit: contain;
}
.ms-lightbox button {
  position: absolute;
  background: transparent;
  border: 0;
  color: #fff;
  font: 2.5rem/1 sans-serif;
  padding: 1rem;
  cursor: pointer;
  opacity: .8;
}
.ms-lightbox button:hover, .ms-lightbox button:focus-visible { opacity: 1; }
.ms-lightbox .ms-close { top: 0; right: 0; }
.ms-lightbox .ms-prev { left: 0; top: 50%; transform: translateY(-50%); }
.ms-lightbox .ms-next { right: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 479px) {
  .ms-lightbox img { max-width: 100vw; }
  .ms-lightbox .ms-prev, .ms-lightbox .ms-next { top: auto; bottom: 0; transform: none; }
}

/* ---- Quote form (replaces Webflow's form runtime; webflow.css styles the fields) */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field__error { display: block; color: #ff8a80; font-size: .875rem; margin-top: .25rem; }
.field__error:empty { display: none; }
.form_input.is-invalid { border-color: #ff8a80; }
.cf-turnstile { margin: 1rem 0 .5rem; min-height: 65px; }
.form__status { margin: .5rem 0 1rem; }
.form__status:empty { display: none; }
.form__status.is-err { color: #ff8a80; }
.contact2_form button[type="submit"] { cursor: pointer; }
.contact2_form button[disabled] { opacity: .6; cursor: progress; }

/* ---- /services page (new, 2026-11-10): five service cards, 3 + 2 centred (the home row is a 4-column grid) */
.services-page_cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.services-page_cards > .equipment-services_card { flex: 0 0 calc((100% - 64px) / 3); }
@media screen and (max-width: 991px) {
  .services-page_cards > .equipment-services_card { flex-basis: calc((100% - 32px) / 2); }
}
@media screen and (max-width: 767px) {
  .services-page_cards > .equipment-services_card { flex-basis: 100%; }
}
.equipment-services_header-right .text-size-medium a { color: inherit; text-decoration: underline; }

/* ---- Mobile menu slides in from the right, as Webflow's "over-right" did (400 ms ease) */
@keyframes ms-nav-in { from { transform: translateX(100%); } to { transform: none; } }
.w-nav-overlay [data-nav-menu-open] { animation: ms-nav-in .4s ease; }
@media (prefers-reduced-motion: reduce) { .w-nav-overlay [data-nav-menu-open] { animation: none; } }