/* ------------------------------------------------------------------
   site.css — styles that used to be produced at runtime by Webflow's
   JS (interactions, nav states, sliders, tabs). Loaded after webflow.css.
   ------------------------------------------------------------------ */

/* ---- Scroll / load reveal (replaces Webflow "Fade-in Element" interactions) */
.w-mod-js .reveal:not(.is-visible) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .w-mod-js .reveal:not(.is-visible) { opacity: 1; }
}

/* ---- Navigation bar colour states (replaces "Nav BG Change" page-scroll interactions) */
.nav {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}
.nav .main-nav-link { transition: color .5s ease, background-color .3s ease; }

/* logo wordmark uses currentColor; Webflow set this inline via its interaction */
.nav .nav-logo_img { color: var(--colours--primary-light, #f6f7fc); transition: color .5s ease; }
.nav.is-light .nav-logo_img,
.nav[data-nav-mode="light"] .nav-logo_img,
.nav[data-nav-mode="clear"] .nav-logo_img { color: var(--colours--primary-dark, #000); }

/* the interaction's inline colour also meant nav links never changed colour on hover,
   only their background — keep that behaviour */
.nav .main-nav-link:hover { color: var(--colours--primary-light, #f6f7fc); }
.nav.is-light .main-nav-link:hover,
.nav[data-nav-mode="light"] .main-nav-link:hover,
.nav[data-nav-mode="clear"] .main-nav-link:hover { color: #000; }

/* values Webflow's interaction applied at scroll position 0 */
.nav { background-color: rgba(0, 0, 0, .8); }
.nav .main-nav-link { color: #fff; }

/* default (dark) nav becomes light after scrolling ~30% down the page */
.nav.is-light {
  background-color: rgba(255, 255, 255, .8);
  color: var(--colours--primary-dark, #000);
  border-bottom-color: #ececec;
}
.nav.is-light .main-nav-link { color: #000; }

/* pages that start with a white nav (terms, privacy, suppliers) */
.nav[data-nav-mode="light"] {
  background-color: #fff;
  color: #000;
  border-bottom-color: rgba(110, 110, 110, .11);
}
.nav[data-nav-mode="light"] .main-nav-link { color: #000; }

/* pages that start with a transparent nav on a light background */
.nav[data-nav-mode="clear"] {
  background-color: transparent;
  color: #000;
  border-bottom-color: rgba(110, 110, 110, .17);
}
.nav[data-nav-mode="clear"] .main-nav-link { color: #000; }
.nav[data-nav-mode="clear"].is-light {
  background-color: rgba(255, 255, 255, .8);
  border-bottom-color: rgba(139, 139, 139, .19);
}

/* mega-menu dropdown: fade/slide in when opened */
.nav-dropdown_content.w--open { animation: dropdown-in .3s ease-out; }
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.w-nav-button { outline: none; }
.w-nav-button:focus-visible { outline: 2px solid var(--colours--secondary-light-blue, #2f54eb); border-radius: 6px; }

/* ---- Slider (Webflow slider component, driven by site.js) */
.w-slider-mask { overflow: hidden; }
.w-slide {
  transition-property: transform;
  transition-timing-function: ease;
  will-change: transform;
}
.w-slider.is-dragging .w-slide { transition: none; }
.w-slider-nav.w-round .w-slider-dot { border-radius: 100%; }
.w-slider-dot { cursor: pointer; }
.w-slider-arrow-left, .w-slider-arrow-right { cursor: pointer; }

/* ---- Tabs */
.w-tab-link { cursor: pointer; }
.w-tab-pane { display: none; }
.w-tab-pane.w--tab-active { display: block; animation: tab-in .3s ease; }
@keyframes tab-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Rotating hero word (replaces SplitType + GSAP "statement carousel") */
.heading-wrap .word, .heading-wrap .char {
  display: inline-block;
  position: relative;
  will-change: transform;
}
.heading-wrap .word { white-space: nowrap; }

/* ---- Secondary CTA arrow swap on hover (replaces "hover arrow change" interaction) */
.cta-secondary.is--white .cta-secondary__arrow { transition: opacity .2s ease; }
.cta-secondary.is--white:hover .cta-secondary__arrow:not(.color-swap) { opacity: 0; }
.cta-secondary.is--white:hover .cta-secondary__arrow.color-swap { opacity: 1; }

/* ---- Form honeypot: an input only bots fill in (the API drops those submissions) */
.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}