/* =====================================================================
   Beyond Journey - site footer
   ---------------------------------------------------------------------
   WHAT WAS THERE, AND WHY IT HAD TO GO

   The template footer carried five things this company cannot do:

     - Mastercard, PayPal, Stripe, Visa and Discover logos. No payment is
       ever taken on this website; the whole site says so. A row of card
       marks in the footer is the single loudest way to contradict that.
     - a language selector offering Chinese, Russian, Japanese and Korean
     - a currency selector offering USD, AUD, JPY and NPR
     - a newsletter form posting to "#"
     - four social icons linking to "#"

   None of them worked. All of them promised something. They are gone,
   and what replaces them is the three channels that genuinely answer:
   phone, WhatsApp and email.

   The social icons can come back the day there are real URLs to put in
   them - the markup slot is commented in the HTML.

   SIZE

   It was 723px tall with 160px of top padding and 16px type throughout,
   on a site whose body copy is 13.5px. It is roughly half that now, and
   the type steps 12 / 12.5 / 13px the way the rest of the pages do.
   ===================================================================== */
.bjft {
  --bjft-navy: #17233e;
  --bjft-orange: #f5761a;
  --bjft-line: rgba(255, 255, 255, .12);
  --bjft-dim: rgba(255, 255, 255, .66);
  --bjft-faint: rgba(255, 255, 255, .45);
  --bjft-ease: cubic-bezier(.4, 0, .2, 1);

  position: relative;
  padding: 46px 0 0;
  background: var(--bjft-navy);
  color: #fff;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}
.bjft::before {
  /* a single warm wash in the corner, in place of the tiled pattern that
     fought with everything laid over it */
  content: "";
  position: absolute; right: -120px; top: -120px;
  width: 340px; height: 340px; border-radius: 50%;
  background: rgba(245, 118, 26, .1);
  pointer-events: none;
}
.bjft > * { position: relative; z-index: 1; }

.bjft__grid {
  display: grid; gap: 28px 32px;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  padding-bottom: 30px;
}

/* ---- brand column ---- */
.bjft__logo { display: inline-block; margin-bottom: 12px; }
.bjft__logo img { height: 34px; width: auto; display: block; filter: brightness(0) invert(1); }
.bjft__blurb {
  margin: 0 0 16px; max-width: 40ch;
  font-size: 12.5px; line-height: 1.7; color: var(--bjft-dim);
}

/* the three that actually answer */
.bjft__reach { display: flex; flex-direction: column; gap: 8px; }
.bjft__reach a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: #fff;
  transition: color .18s var(--bjft-ease);
}
.bjft__reach a:hover { color: var(--bjft-orange) !important; }   /* beats footer a:hover { ...!important } */
/* :not() would be needed if this were a bare `span` rule - the medallion
   is a span and an unqualified rule would knock out its display:grid */
.bjft__reach .bjft__ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: var(--bjft-orange);
  font-size: 12px;
  transition: background .18s var(--bjft-ease);
}
.bjft__reach a:hover .bjft__ico { background: rgba(245, 118, 26, .22); }
.bjft__reach .bjft__ico svg { width: 13px; height: 13px; fill: currentColor; }

/* ---- link columns ---- */
.bjft__h {
  margin: 0 0 13px;
  font-family: 'Inter', 'Poppins', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--bjft-orange);
}
.bjft__list { list-style: none; margin: 0; padding: 0; }
/* style.css:191 sets `ul li { display: inline-block }` globally, which
   ran "About us Contact us FAQ" onto one line */
.bjft__list li { display: block; margin-bottom: 8px; }
.bjft__list li:last-child { margin-bottom: 0; }
.bjft__list a {
  font-size: 13px; color: var(--bjft-dim);
  transition: color .18s var(--bjft-ease), padding-left .18s var(--bjft-ease);
}
.bjft__list a:hover { color: #fff; padding-left: 3px; }

/* ---- offices ---- */
.bjft__office { margin: 0 0 14px; font-size: 12.5px; line-height: 1.65; color: var(--bjft-dim); }
.bjft__office:last-child { margin-bottom: 0; }
.bjft__office b {
  display: block; margin-bottom: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
}

/* ---- the bar ---- */
.bjft__bar {
  border-top: 1px solid var(--bjft-line);
  padding: 14px 0 16px;
}
.bjft__bar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 20px; flex-wrap: wrap;
}
.bjft__copy { margin: 0; font-size: 12px; color: var(--bjft-faint); }
/* the line the card logos used to contradict */
.bjft__note {
  margin: 0; font-size: 12px; color: var(--bjft-dim);
}
.bjft__note i, .bjft__note svg {
  color: var(--bjft-orange); fill: currentColor;
  width: 11px; height: 11px; margin-right: 7px; font-size: 11px;
  vertical-align: -1px;
}

@media (max-width: 991px) {
  .bjft { padding-top: 36px; }
  .bjft__grid { grid-template-columns: 1fr 1fr; gap: 26px 24px; }
}
/* Phones: the brand blurb and the two address blocks want the full width,
   but "Company" and "Explore" are six short links each - stacked one under
   the other they ran the footer to about 930px, most of a phone screen of
   nothing but link text. Side by side they cost half that, and six items a
   column is still a comfortable thumb target list. */
@media (max-width: 575px) {
  .bjft__grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .bjft__grid > .bjft__brand,
  .bjft__grid > :last-child { grid-column: 1 / -1; }
  .bjft__bar .container { justify-content: center; text-align: center; }
}

/* the template's particle canvas is a direct child of <footer>, so the
   `.bjft > *` stacking rule above lifted its dots on top of the address
   block. It belongs behind everything. */
.bjft > #particles-js {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}