:root {
  --icon-color: #0B2641;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.name {
  line-height: 120%;
  padding: 4px 0px;
  color: #15151f;
}

/* ------------------ Header nav links ------------------ */
/* The top-level menu items used to be dropdown toggles - plain <div>s that
   inherited the body colour. They are links now, so restore that colour and
   reuse the dropdown-link hover/current treatment. */
.nav-link {
  color: var(--color--body-text-color);
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.w--current {
  color: var(--color--black);
}

/* ------------------ Footer logo ------------------ */
/* The logo is an inline <svg> now (so the wordmark can be live text) where the
   template had an <img>. An inline SVG sits on the text baseline by default,
   which leaves a few px of descender space under it. The template's <img>
   carried vertical-align: middle from the Webflow reset - match it. */
.logo-icon-footer svg {
  vertical-align: middle;
}

/* The template padded this by 138px to stretch the left column down to the
   height of the link columns beside it, which left the tagline stranded at the
   bottom of an empty block. The tagline sits directly under the logo instead.
   The column is a grid cell, so the row still lines up with its neighbours. */
.logo-icon-footer {
  padding-bottom: 12px;
}

/* ------------------ Hero / next-section spacing ------------------ */
/* .home-three-simple-payment carries a negative top margin (-20% to -45%
   depending on breakpoint) so it rides up over the hero it was designed
   against. This page now uses the taller home-one hero, where that pull-up
   swallows the logo marquee and butts the dark panel straight against the
   phone.

   Scoped to the adjacent-sibling pair, so only this arrangement is affected -
   any other page still gets the template's overlap. */
.home-one-hero + .home-three-simple-payment {
  margin-top: 120px;
}

@media screen and (max-width: 991px) {
  .home-one-hero + .home-three-simple-payment {
    margin-top: 80px;
  }
}

@media screen and (max-width: 479px) {
  .home-one-hero + .home-three-simple-payment {
    margin-top: 56px;
  }
}

/* ------------------ Scrollbar ------------------ */
/* Thin, square-cornered, in the theme's black. Firefox gets the two-keyword
   standard property; Chrome/Safari/Edge need the -webkit- pseudo-elements,
   which override `scrollbar-width` where both are understood. No border-radius
   anywhere, so the thumb keeps hard corners. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color--black, #000) #ededed;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #ededed;
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: var(--color--black, #000);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: #2a2a2a;
}

/* Where the vertical and horizontal bars meet. */
::-webkit-scrollbar-corner {
  background: #ededed;
}