/* =====================================================================
   Beyond Journey - Contact page (bjct-)
   ---------------------------------------------------------------------
   Scoped to .bjct so nothing here reaches the header, footer or the
   template. Same language as the About page (bj-about.css): navy
   #17233e, orange #f5761a, Poppins, 18px card radii, pill buttons.
   Section rhythm is set here, not by style.css's `section` rule, which
   .bjct zeroes below.

   Icons: Font Awesome's script swaps every <i class="fa"> for an <svg>
   whose own .fa-w-N width rule beats descendant selectors, so every disc
   is drawn on a wrapper span and the glyph inside is sized in em.

   Scroll reveal: js/about.js adds body.bj-js and toggles .in-view on
   every .reveal as it enters the viewport; without JS the page is simply
   visible.
   ===================================================================== */

.bjct {
  --bjct-navy: #17233e;
  --bjct-navy-2: #22315a;
  --bjct-orange: #f5761a;
  --bjct-orange-600: #dd660f;
  --bjct-orange-50: #fff3e8;
  --bjct-green: #1faa59;
  --bjct-green-50: #e8f8ee;
  --bjct-indigo: #4f46b8;
  --bjct-indigo-50: #eeedfb;
  --bjct-ink: #17233e;
  --bjct-body: #4a5470;
  --bjct-faint: #7b8395;
  --bjct-line: #e7e6e1;
  --bjct-field: #dcdde3;
  --bjct-canvas: #f7f6f2;
  --bjct-surface: #ffffff;
  --bjct-danger: #c2352b;
  --bjct-r: 18px;
  --bjct-r-sm: 12px;
  --bjct-shadow: 0 10px 30px rgba(23, 35, 62, .08);
  --bjct-shadow-lg: 0 24px 60px rgba(23, 35, 62, .16);
  --bjct-ease: cubic-bezier(.4, 0, .2, 1);

  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--bjct-body);
  overflow-x: clip;
}

.bjct *, .bjct *::before, .bjct *::after { box-sizing: border-box; }
/* :where() keeps these at class specificity. Family, weight and case are
   left to style.css, so these headings match the rest of the site. */
.bjct :where(h1, h2, h3, h4) { color: var(--bjct-ink); margin: 0; }
.bjct :where(p, ul, ol) { margin: 0; }
.bjct a { text-decoration: none; }

.bjct section { padding: 0; margin: 0; position: relative; }
.bjct .bjct-sec { padding: 56px 0; }
.bjct .bjct-sec--canvas { background: var(--bjct-canvas); }

/* ------------------------------------------------------------------
   Kicker, heads, buttons
   ------------------------------------------------------------------ */
.bjct-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bjct-orange);
}
.bjct-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.bjct-kicker--light { color: #ffb27a; }

.bjct-head { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.bjct-head .bjct-kicker::before { display: none; }
.bjct-head--left { max-width: none; margin: 0 0 22px; text-align: left; }
.bjct-head--left .bjct-kicker::before { display: block; }
.bjct-head h2 { font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 8px; }
.bjct-head p { font-size: 13.5px; line-height: 1.7; color: var(--bjct-body); }

.bjct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .2s var(--bjct-ease), box-shadow .2s var(--bjct-ease),
              background-color .2s var(--bjct-ease), border-color .2s var(--bjct-ease), color .2s, opacity .2s;
}
.bjct-btn svg, .bjct-btn i { font-size: 13px; }
.bjct-btn--primary { background: var(--bjct-orange); color: #fff; box-shadow: 0 10px 24px rgba(245, 118, 26, .28); }
.bjct-btn--primary:hover { background: var(--bjct-orange-600); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(245, 118, 26, .34); }
.bjct-btn--primary:disabled { opacity: .7; cursor: progress; transform: none; }
.bjct-btn--ghost { background: transparent; color: var(--bjct-navy); border-color: var(--bjct-field); }
.bjct-btn--ghost:hover { border-color: var(--bjct-navy); }
.bjct-btn:focus-visible, .bjct-link:focus-visible, .bjct-way:focus-visible, .bjct-faq summary:focus-visible, .bjct-faq__all:focus-visible {
  outline: 3px solid rgba(245, 118, 26, .45); outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
/* The banner is drawn rather than photographed (2026-09-26, the owner asked
   for a better one than the stock contact-us-banner.jpg): deep navy, an orange
   glow behind the art, a violet one under the text, a dot grid that fades out
   towards the text, and a dashed flight path ending in a paper plane. */
.bjct .bjct-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 56px 0 128px;
  background:
    radial-gradient(620px 460px at 80% 38%, rgba(245, 118, 26, .26), rgba(245, 118, 26, 0) 70%),
    radial-gradient(640px 520px at -4% 104%, rgba(108, 92, 231, .34), rgba(108, 92, 231, 0) 70%),
    radial-gradient(420px 320px at 38% -10%, rgba(64, 132, 214, .22), rgba(64, 132, 214, 0) 70%),
    linear-gradient(125deg, #0f1930 0%, #17233e 48%, #243463 100%);
  color: #fff;
}
.bjct .bjct-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 62%);
  mask-image: linear-gradient(100deg, transparent 18%, #000 62%);
}
/* a soft curved horizon behind the reach cards */
.bjct .bjct-hero::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 90px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 1px solid rgba(255, 255, 255, .08);
}
.bjct-hero__path {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.6; stroke-dasharray: 2 9; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: bjct-dash 30s linear infinite;
}
.bjct-hero__plane {
  position: absolute; left: 90.3%; top: 16%; z-index: 0; width: 22px; height: 22px; pointer-events: none;
  fill: #ffb27a; transform: rotate(8deg); filter: drop-shadow(0 4px 10px rgba(245, 118, 26, .5));
}
@keyframes bjct-dash { to { stroke-dashoffset: -220; } }

.bjct-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: center; }
@media (min-width: 1200px) { .bjct .bjct-hero__trust { flex-wrap: nowrap; } }   /* (0,2,0): the base rule below is later in the file */
.bjct-hero__text { min-width: 0; }

/* the art: a ringed photo with the three channels orbiting it */
.bjct-hero__art { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; justify-self: end; margin-right: 10px; }
.bjct-orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.bjct-orbit--outer { inset: 0; border: 1px dashed rgba(255, 255, 255, .22); animation: bjct-spin 60s linear infinite; }
.bjct-orbit--inner { inset: 9%; border: 1px solid rgba(255, 255, 255, .12); background: radial-gradient(circle, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 70%); }
.bjct-hero__photo {
  position: absolute; inset: 17%; border-radius: 50%; overflow: hidden;
  border: 5px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 10px rgba(245, 118, 26, .16), 0 30px 60px rgba(5, 10, 25, .5);
}
/* img/contact/travel-expert.jpg is already cropped square around the face */
.bjct-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bjct-bubble {
  position: absolute; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; color: #fff;
  box-shadow: 0 14px 30px rgba(5, 10, 25, .35), inset 0 0 0 3px rgba(255, 255, 255, .25);
  animation: bjct-float 6s ease-in-out infinite;
}
.bjct-bubble > svg, .bjct-bubble > i { width: 1em; height: 1em; font-size: inherit; fill: currentColor; }
.bjct-bubble--call { left: 2%; top: 22%; background: var(--bjct-orange); }
.bjct-bubble--wa { right: -2%; top: 30%; background: #25b561; animation-delay: -2s; }
.bjct-bubble--mail { right: 12%; bottom: 3%; background: var(--bjct-indigo); animation-delay: -4s; }
.bjct-hero__card {
  position: absolute; left: -2%; bottom: 10%;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border-radius: 16px;
  background: rgba(255, 255, 255, .96); color: var(--bjct-ink);
  box-shadow: 0 18px 40px rgba(5, 10, 25, .35);
  animation: bjct-float 7s ease-in-out infinite; animation-delay: -1s;
}
.bjct-hero__card-ico {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 16px;
  background: var(--bjct-orange-50); color: var(--bjct-orange);
}
.bjct-hero__card-ico > svg, .bjct-hero__card-ico > i { width: 1em; height: 1em; }
.bjct-hero__card strong { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.bjct-hero__card div > span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--bjct-orange-600); }
@keyframes bjct-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bjct-spin { to { transform: rotate(360deg); } }
.bjct-hero__crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
.bjct-hero__crumbs a { color: rgba(255, 255, 255, .85); }
.bjct-hero__crumbs a:hover { color: #fff; }
.bjct-hero__crumbs span::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .4); }
.bjct-hero__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bjct-hero__kicker svg, .bjct-hero__kicker i { color: var(--bjct-orange); font-size: 12px; }
.bjct .bjct-hero h1 {
  color: #fff; font-size: 40px; line-height: 1.14; font-weight: 700; letter-spacing: -.02em;
  max-width: 620px; margin: 18px 0 14px;
}
.bjct .bjct-hero h1 em { font-style: normal; color: var(--bjct-orange); }
.bjct-hero__lead { max-width: 540px; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .86); }
/* three promises as see-through pills, the tick in its own small disc; on one
   line from 1200px up (the owner asked for a single row), wrapping below that */
.bjct-hero__trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.bjct-hero__trust li {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 5px 13px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 12.5px; font-weight: 500; line-height: 1.2; color: #fff;
  transition: background-color .25s var(--bjct-ease), border-color .25s var(--bjct-ease);
}
.bjct-hero__trust li:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
.bjct-hero__tick {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px;
  background: rgba(245, 118, 26, .22); border: 1px solid rgba(245, 118, 26, .55); color: #ffb27a;
}
.bjct-hero__tick > svg, .bjct-hero__tick > i { width: 1em; height: 1em; font-size: inherit; }

/* ------------------------------------------------------------------
   Four ways to reach us - lifted over the hero's bottom edge
   ------------------------------------------------------------------ */
.bjct .bjct-reach { margin-top: -84px; }
.bjct-reach__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bjct-reach__grid > li { display: flex; }
.bjct-way {
  position: relative; flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 22px 20px 20px; border-radius: var(--bjct-r);
  background: var(--bjct-surface); border: 1px solid var(--bjct-line); box-shadow: var(--bjct-shadow);
  font: inherit; text-align: left; color: inherit; cursor: pointer;
  transition: transform .25s var(--bjct-ease), box-shadow .25s var(--bjct-ease), border-color .25s;
}
.bjct-way:hover { transform: translateY(-5px); box-shadow: var(--bjct-shadow-lg); border-color: transparent; }
.bjct-way__ico {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; font-size: 18px;
  background: var(--bjct-orange-50); color: var(--bjct-orange);
  transition: background-color .25s var(--bjct-ease), color .25s var(--bjct-ease);
}
.bjct-way__ico > svg, .bjct-way__ico > i { width: 1em; height: 1em; font-size: inherit; fill: currentColor; }
.bjct-way--wa .bjct-way__ico { background: var(--bjct-green-50); color: var(--bjct-green); }
.bjct-way--mail .bjct-way__ico { background: var(--bjct-indigo-50); color: var(--bjct-indigo); }
.bjct-way--callback .bjct-way__ico { background: var(--bjct-navy); color: #fff; }
.bjct-way:hover .bjct-way__ico { background: var(--bjct-orange); color: #fff; }
.bjct-way--wa:hover .bjct-way__ico { background: var(--bjct-green); }
.bjct-way--mail:hover .bjct-way__ico { background: var(--bjct-indigo); }
.bjct-way__text { display: flex; flex-direction: column; min-width: 0; }
.bjct-way__title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bjct-faint); }
.bjct-way__value { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--bjct-ink); letter-spacing: -.01em; overflow-wrap: anywhere; }
.bjct-way__sub { margin-top: 3px; font-size: 12.5px; color: var(--bjct-body); }
.bjct-way__go {
  position: absolute; right: 18px; top: 22px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px;
  background: var(--bjct-canvas); color: var(--bjct-navy);
  transition: transform .25s var(--bjct-ease), background-color .25s var(--bjct-ease), color .25s;
}
.bjct-way__go > svg, .bjct-way__go > i { width: 1em; height: 1em; }
.bjct-way:hover .bjct-way__go { transform: translateX(3px); background: var(--bjct-navy); color: #fff; }

/* ------------------------------------------------------------------
   Form and aside
   ------------------------------------------------------------------ */
.bjct-main { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.bjct-card { border-radius: var(--bjct-r); background: var(--bjct-surface); border: 1px solid var(--bjct-line); }
.bjct-form-card { padding: 34px 34px 30px; box-shadow: var(--bjct-shadow); }

.bjct form { margin: 0; }
.bjct-topics { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.bjct .bjct-label {
  display: block; margin: 0 0 8px; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--bjct-ink); line-height: 1.3;
}
.bjct .bjct-label b { color: var(--bjct-orange); font-weight: 700; }
.bjct legend.bjct-label { float: none; width: auto; margin-bottom: 10px; }
.bjct-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bjct-count { font-size: 11.5px; color: var(--bjct-faint); font-variant-numeric: tabular-nums; }
.bjct-count.is-near { color: var(--bjct-orange-600); font-weight: 600; }

.bjct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bjct-chip { position: relative; margin: 0; cursor: pointer; }
.bjct-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bjct-chip span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1.5px solid var(--bjct-field); background: var(--bjct-surface);
  font-size: 13px; font-weight: 500; color: var(--bjct-body); line-height: 1.2;
  transition: border-color .2s var(--bjct-ease), background-color .2s var(--bjct-ease), color .2s;
}
.bjct-chip span svg, .bjct-chip span i { font-size: 12px; color: var(--bjct-faint); transition: color .2s; }
.bjct-chip:hover span { border-color: var(--bjct-navy); color: var(--bjct-ink); }
.bjct-chip input:checked + span { border-color: var(--bjct-orange); background: var(--bjct-orange-50); color: var(--bjct-ink); font-weight: 600; }
.bjct-chip input:checked + span svg, .bjct-chip input:checked + span i { color: var(--bjct-orange); }
.bjct-chip input:focus-visible + span { outline: 3px solid rgba(245, 118, 26, .45); outline-offset: 2px; }

.bjct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.bjct-field { margin-bottom: 16px; min-width: 0; }

/* style.css styles every text input (0,1,1) and its :focus (0,2,1) - thin
   grey type, a near-invisible border, no focus ring. These win on
   specificity, not !important. */
.bjct .bjct-input {
  display: block; width: 100%; height: 50px; margin: 0;
  padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--bjct-field); background: #fff; box-shadow: none;
  font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--bjct-ink);
  transition: border-color .2s var(--bjct-ease), box-shadow .2s var(--bjct-ease);
}
.bjct .bjct-input--area { height: auto; min-height: 140px; line-height: 1.6; resize: vertical; }
.bjct .bjct-input::placeholder { color: #a3a8b5 !important; font-weight: 400; }
.bjct .bjct-input:hover { border-color: #c3c6d0; }
.bjct .bjct-input:focus { outline: none; border-color: var(--bjct-orange); box-shadow: 0 0 0 4px rgba(245, 118, 26, .14); }
.bjct .bjct-input[aria-invalid="true"] { border-color: var(--bjct-danger); }
.bjct .bjct-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(194, 53, 43, .12); }
.bjct-err { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--bjct-danger); }
.bjct-err:empty { display: none; }

.bjct-captcha { margin: 2px 0 18px; }
.bjct-captcha:empty { display: none; }

.bjct-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 6px; }
/* one run of text, so on a phone it wraps like a sentence, not as three flex items */
.bjct-privacy { font-size: 12.5px; line-height: 1.6; color: var(--bjct-faint); }
.bjct-privacy svg, .bjct-privacy i { font-size: 11px; margin-right: 5px; color: var(--bjct-green); }
.bjct-privacy a { color: var(--bjct-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* the server's answer (and a summary when the form does not validate) */
.bjct-alert {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px; padding: 12px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.55; font-weight: 500;
}
.bjct-alert--err { background: #fdecea; color: #8f231b; border: 1px solid #f6c7c2; }
.bjct-alert--ok { background: var(--bjct-green-50); color: #14693a; border: 1px solid #bfe8cf; }

/* the thank-you panel that replaces the form once it is sent */
.bjct-sent { padding: 26px 6px 10px; text-align: center; }
.bjct-sent[hidden] { display: none; }
.bjct-sent__ico {
  width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px;
  background: var(--bjct-green-50); color: var(--bjct-green);
  box-shadow: 0 0 0 10px rgba(31, 170, 89, .07);
}
.bjct-sent__ico > svg, .bjct-sent__ico > i { width: 1em; height: 1em; }
.bjct .bjct-sent h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; outline: none; }
.bjct-sent p { max-width: 420px; margin: 0 auto; font-size: 14px; line-height: 1.7; }
.bjct-sent .bjct-sent__more { margin-top: 8px; font-size: 13px; color: var(--bjct-faint); }
.bjct-sent__more a { color: var(--bjct-ink); font-weight: 700; }
.bjct-sent .bjct-btn { margin-top: 22px; }

/* aside: what happens next, on navy */
.bjct-aside { display: grid; gap: 18px; }
.bjct-next {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 28px 26px 24px; border: 0;
  background: linear-gradient(140deg, var(--bjct-navy) 0%, var(--bjct-navy-2) 100%); color: rgba(255, 255, 255, .8);
}
.bjct-next::after {
  content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(245, 118, 26, .34), rgba(245, 118, 26, 0) 70%);
}
.bjct .bjct-next h3 { color: #fff; font-size: 19px; font-weight: 600; line-height: 1.3; margin: 10px 0 20px; }
.bjct-steps { list-style: none; padding: 0; display: grid; gap: 0; }
.bjct-steps li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.bjct-steps li:last-child { padding-bottom: 0; }
.bjct-steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px;
  background: linear-gradient(180deg, rgba(245, 118, 26, .7), rgba(255, 255, 255, .12));
}
.bjct-steps__n {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bjct-orange); color: #fff; font-size: 13px; font-weight: 700;
}
.bjct-steps strong { display: block; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; padding-top: 5px; }
.bjct-steps p { margin-top: 3px; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* aside: quick answers */
.bjct-faq { padding: 24px 24px 20px; }
.bjct .bjct-faq h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.bjct-faq h3 svg, .bjct-faq h3 i { color: var(--bjct-orange); font-size: 16px; }
.bjct-faq details { border-bottom: 1px solid var(--bjct-line); }
.bjct-faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 13px 30px 13px 0; font-size: 13.5px; font-weight: 600; color: var(--bjct-ink); line-height: 1.45;
}
.bjct-faq summary::-webkit-details-marker { display: none; }
.bjct-faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--bjct-faint); border-bottom: 2px solid var(--bjct-faint);
  transform: rotate(45deg); transition: transform .25s var(--bjct-ease), margin .25s;
}
.bjct-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--bjct-orange); }
.bjct-faq summary:hover { color: var(--bjct-orange-600); }
.bjct-faq details p { padding: 0 6px 14px 0; font-size: 13px; line-height: 1.7; }
.bjct-faq__all {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bjct-orange);
  transition: gap .2s var(--bjct-ease);
}
.bjct-faq__all:hover { gap: 12px; color: var(--bjct-orange-600); }

/* ------------------------------------------------------------------
   Offices and the map
   ------------------------------------------------------------------ */
.bjct-offices { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: stretch; }
.bjct-office-list { display: grid; gap: 16px; align-content: start; }
.bjct-office {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 22px 18px; border-radius: var(--bjct-r);
  background: var(--bjct-surface); border: 1.5px solid var(--bjct-line);
  transition: border-color .25s var(--bjct-ease), box-shadow .25s var(--bjct-ease);
}
.bjct-office:hover { box-shadow: var(--bjct-shadow); }
.bjct-office.is-active { border-color: var(--bjct-orange); box-shadow: var(--bjct-shadow); }
.bjct-office__ico {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; font-size: 17px;
  background: var(--bjct-orange-50); color: var(--bjct-orange);
}
.bjct-office__ico > svg, .bjct-office__ico > i { width: 1em; height: 1em; }
.bjct-office.is-active .bjct-office__ico { background: var(--bjct-orange); color: #fff; }
.bjct-office__body { min-width: 0; }
.bjct-office__tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bjct-orange); }
.bjct .bjct-office h3 { font-size: 18px; font-weight: 600; margin: 4px 0 6px; }
.bjct-office p { font-size: 13px; line-height: 1.7; }
.bjct-office__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bjct-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--bjct-field); background: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--bjct-ink); cursor: pointer;
  transition: border-color .2s var(--bjct-ease), background-color .2s var(--bjct-ease), color .2s;
}
.bjct-link svg, .bjct-link i { font-size: 11px; color: var(--bjct-orange); }
.bjct-link:hover { border-color: var(--bjct-navy); color: var(--bjct-ink); }
.bjct-link[aria-pressed="true"] { background: var(--bjct-navy); border-color: var(--bjct-navy); color: #fff; }
.bjct-link[aria-pressed="true"] svg, .bjct-link[aria-pressed="true"] i { color: #ffb27a; }

.bjct-map {
  position: relative; min-height: 380px; overflow: hidden;
  border-radius: var(--bjct-r); background: #e9e7e1; box-shadow: var(--bjct-shadow);
}
.bjct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.bjct-map__tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--bjct-navy); color: #fff; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 8px 20px rgba(23, 35, 62, .25); pointer-events: none;
}
.bjct-map__tag svg, .bjct-map__tag i { color: var(--bjct-orange); font-size: 12px; }

/* ------------------------------------------------------------------
   Scroll reveal (paired with js/about.js)
   ------------------------------------------------------------------ */
body.bj-js .bjct .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--bjct-ease), transform .6s var(--bjct-ease);
  transition-delay: var(--d, 0ms);
}
body.bj-js .bjct .reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.bj-js .bjct .reveal { opacity: 1; transform: none; transition: none; }
  .bjct-way, .bjct-way__go, .bjct-btn, .bjct-office, .bjct-faq summary::after { transition: none; }
  .bjct-hero__path, .bjct-orbit--outer, .bjct-bubble, .bjct-hero__card { animation: none; }
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1199px) {
  .bjct-hero__card { left: -3%; }   /* keeps clear of the promise pills on a narrow laptop */
  .bjct-reach__grid { grid-template-columns: repeat(2, 1fr); }
  .bjct-way { flex-direction: row; align-items: center; padding: 18px 56px 18px 18px; }
  .bjct-way__go { top: 50%; margin-top: -15px; }
}

@media (max-width: 991px) {
  .bjct .bjct-hero { padding: 56px 0 120px; }
  .bjct .bjct-hero h1 { font-size: 34px; }
  /* the text alone carries the banner here; the path and dots stay */
  .bjct-hero__grid { grid-template-columns: 1fr; }
  .bjct-hero__art { display: none; }
  .bjct-hero__plane { left: auto; right: 7%; top: 13%; }
  .bjct-main { grid-template-columns: 1fr; }
  .bjct-aside { grid-template-columns: 1fr 1fr; align-items: start; }
  .bjct-offices { grid-template-columns: 1fr; }
  .bjct-office-list { grid-template-columns: 1fr 1fr; }
  .bjct-map { min-height: 340px; }
}

@media (max-width: 767px) {
  .bjct .bjct-sec { padding: 40px 0; }
  .bjct .bjct-hero { padding: 44px 0 100px; }
  .bjct .bjct-hero::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%); }
  .bjct-hero__plane { width: 18px; height: 18px; top: 7%; }
  .bjct .bjct-hero h1 { font-size: 28px; margin-top: 16px; }
  .bjct-hero__lead { font-size: 14px; }
  .bjct-hero__trust { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bjct .bjct-reach { margin-top: -64px; }
  .bjct-reach__grid { grid-template-columns: 1fr; gap: 10px; }
  .bjct-way { gap: 14px; padding: 14px 52px 14px 14px; border-radius: 16px; }
  .bjct-way__ico { flex-basis: 44px; width: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
  .bjct-way__value { margin-top: 2px; font-size: 15px; }
  .bjct-way__sub { display: none; }
  .bjct-way__go { right: 14px; }
  .bjct-head { margin-bottom: 26px; }
  .bjct-head h2 { font-size: 23px; }
  .bjct-form-card { padding: 24px 18px 22px; border-radius: 16px; }
  .bjct-row { grid-template-columns: 1fr; }
  .bjct-aside { grid-template-columns: 1fr; }
  .bjct-office-list { grid-template-columns: 1fr; }
  .bjct-office { padding: 18px 16px 16px; gap: 14px; }
  .bjct-map { min-height: 300px; }
  /* phone buttons are as wide as their label (the owner's rule, 2026-09-26) */
  .bjct-submit { flex-direction: column; align-items: flex-start; }
}

/* iOS Safari zooms the page when a focused field's type is under 16px */
@media (max-width: 575px) {
  .bjct .bjct-input { font-size: 16px; }
  .bjct-chip span { padding: 8px 12px; font-size: 12.5px; }
}