/* =====================================================================
   Beyond Journey - the arrival invitation
   ---------------------------------------------------------------------
   A single panel, two seconds after the first scroll, offering the thing
   this site is for: a person who will plan the trip.

   A photograph across the top, then a heading, two short paragraphs,
   two buttons and one quiet way out. The picture is full width so it
   reads as a photograph; the first draft ran it 232px down one edge,
   where it looked like decoration.

   ON COLOUR. Navy for the ink, one orange for the single action worth
   taking, white behind both. No second accent, no gold, no green: the
   panel wants exactly one thing pressed, and colour is how it says so.
   The photograph is the only other colour, and it is held to its band.
   ===================================================================== */

.bjp {
  position: fixed; inset: 0; z-index: 1400;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.bjp.is-open { display: flex; }

.bjp__scrim {
  position: absolute; inset: 0;
  background: rgba(15, 22, 40, .58);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: bjp-fade .28s ease both;
}

.bjp__card {
  position: relative;
  width: 100%; max-width: 470px;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(15, 22, 40, .5);
  animation: bjp-rise .34s cubic-bezier(.16, .84, .44, 1) both;
}

/* 16:9 or thereabouts, so the band is a picture rather than a stripe.
   The fade at its foot stops the join reading as a hard seam. */
.bjp__art {
  position: relative; height: 200px;
  background-size: cover; background-position: center 38%;
  background-color: #eceae4;
}
.bjp__art::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
}
.bjp__seal {
  position: absolute; left: 16px; top: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(15, 22, 40, .42);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.bjp__seal i, .bjp__seal svg { font-size: 11px; opacity: .9; }

.bjp__body { padding: 2px 30px 22px; }

/* the small line over the heading names the desk; the heading asks */
.bjp__kicker {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #f5761a;
}
.bjp__kicker i, .bjp__kicker svg { font-size: 11px; }

.bjp__body h2 {
  margin: 0 0 10px;
  font-size: 23px; line-height: 1.22; font-weight: 800; letter-spacing: -.3px;
  color: #17233e; text-transform: none;
}
.bjp__body > p {
  margin: 0 0 12px;
  font-size: 14px; line-height: 1.62; color: #56607a;
}

/* the promise line: the same three short sentences, set apart so they
   read as a promise rather than as a third paragraph */
.bjp__promise {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px; padding: 11px 14px;
  border-radius: 10px; border: 1px solid #f7d9bf; background: #fdf1e6;
  font-size: 13.5px; line-height: 1.5; font-weight: 600; color: #17233e;
}
.bjp__promise i, .bjp__promise svg { flex: none; margin-top: 3px; font-size: 13px; color: #f5761a; }

.bjp__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bjp__go, .bjp__alt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bjp__go {
  flex: 1 1 auto;
  border: 0; background: linear-gradient(90deg, #f5761a 0%, #dd660f 100%); color: #fff;
  box-shadow: 0 12px 26px -10px rgba(245, 118, 26, .85);
}
.bjp__go:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(245, 118, 26, .95); }
.bjp__alt {
  flex: 1 1 auto;
  border: 1.5px solid #dfe6e1; background: #fff; color: #17233e;
}
.bjp__alt i, .bjp__alt svg { color: #25d366; font-size: 16px; }
.bjp__alt:hover { border-color: #25d366; color: #17233e; transform: translateY(-1px); }
/* the panel moves focus to the first button when it opens; the default
   black ring on an orange pill looked like an error state */
.bjp__go:focus, .bjp__alt:focus, .bjp__no:focus, .bjp__x:focus { outline: none; }
.bjp__go:focus-visible, .bjp__alt:focus-visible, .bjp__no:focus-visible, .bjp__x:focus-visible {
  box-shadow: 0 0 0 4px rgba(245, 118, 26, .35);
}

/* the way out: a full-width line under a hairline, with a link out to
   the packages rather than a bare "no" */
.bjp__no {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  margin: 16px -30px 0; padding: 13px 30px 0;
  border: 0; border-top: 1px solid #f1efe9; background: none; font-family: inherit;
  font-size: 12.5px; color: #8b93a5; cursor: pointer; text-decoration: none; text-align: center;
}
.bjp__no b { color: #17233e; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.bjp__no i, .bjp__no svg { font-size: 10px; color: #17233e; transition: transform .2s ease; }
.bjp__no:hover { color: #56607a; }
.bjp__no:hover b { color: #f5761a; }
.bjp__no:hover i, .bjp__no:hover svg { transform: translateX(3px); color: #f5761a; }

.bjp__x {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgba(15, 22, 40, .42); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .26);
  font-size: 13px; cursor: pointer;
  display: grid; place-items: center;
  transition: background .18s ease;
}
.bjp__x:hover { background: rgba(15, 22, 40, .62); color: #fff; }


@keyframes bjp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bjp-rise {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 719px) {
  .bjp { padding: 14px; align-items: flex-end; }
  .bjp__art { height: 150px; }
  .bjp__body { padding: 0 20px 16px; }
  .bjp__body h2 { font-size: 20px; }
  .bjp__body > p { font-size: 13.5px; margin-bottom: 10px; }
  .bjp__promise { font-size: 13px; padding: 10px 12px; margin-bottom: 14px; }
  .bjp__acts { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .bjp__go, .bjp__alt { width: 100%; }
  .bjp__no { margin: 14px -20px 0; padding: 12px 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bjp__scrim, .bjp__card { animation: none; }
  .bjp__go:hover, .bjp__alt:hover { transform: none; }
  .bjp__no:hover i, .bjp__no:hover svg { transform: none; }
}