/* =========================================================================
   Quick Jump Start - page sections (2026 revision)

   Loaded after qjs-2026.css, so the tokens and the .qjs-btn primitives are
   already in scope. One block per section; each section deliberately differs
   from its neighbours in ground, rhythm and shape so the page never reads as
   the same card repeated.
   ====================================================================== */

/* =========================================================================
   1. Brand marquee - light band, continuous right-to-left rail
   ====================================================================== */
.qjs-marq{
  position:relative;overflow:hidden;
  padding:64px 0 56px;
  font-family:var(--font-b);
  background:
    radial-gradient(70% 120% at 50% -20%,rgba(1,89,166,.07) 0%,transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,var(--off) 55%,#EEF3F9 100%);
}
/* Hairline in brand gold across the top edge, separating it from the hero. */
.qjs-marq::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--azure) 50%,var(--gold) 78%,transparent);
  opacity:.55;
}

.qjs-marq__head{max-width:820px;margin:0 auto 36px;padding:0 24px;text-align:center}
.qjs-marq__kicker{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;
  padding:8px 16px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  font-size:12.5px;font-weight:700;color:var(--body);letter-spacing:.02em;
}
.qjs-marq__kicker b{color:var(--navy);font-weight:800}
.qjs-marq__kicker .qjs-i{color:var(--gold-deep);font-size:17px}

.qjs-marq__t{
  font-family:var(--font-d);
  font-size:clamp(1.55rem,1rem + 1.55vw,2.3rem);
  font-weight:800;line-height:1.16;letter-spacing:-.025em;
  color:var(--navy);margin:0;text-wrap:balance;
}
.qjs-marq__hl{
  font-style:normal;color:var(--gold-deep);
  background:linear-gradient(180deg,transparent 62%,rgba(212,165,15,.26) 62%);
}
.qjs-marq__sub{
  margin:14px auto 0;max-width:62ch;
  font-size:15.5px;line-height:1.68;color:var(--body);
}

/* --- the rail --------------------------------------------------------- */
.qjs-marq__rail{
  position:relative;overflow:hidden;
  padding:6px 0;
  /* Feather both ends so logos enter and leave instead of being chopped. */
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.qjs-marq__track{
  display:flex;align-items:center;gap:18px;
  list-style:none;margin:0;padding:0;width:max-content;
  animation:qjs-marq-run 52s linear infinite;
  /* Promote to its own compositor layer. Without this the browser repaints
     58 grayscale-filtered logos every frame and the tab stutters. */
  will-change:transform;
}
/* The track holds the set twice, so -50% lands exactly on the copy and the
   loop restarts with no visible seam. */
@keyframes qjs-marq-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.qjs-marq__rail:hover .qjs-marq__track,
.qjs-marq__rail:focus-within .qjs-marq__track{animation-play-state:paused}

.qjs-marq__item{
  flex:none;display:grid;place-items:center;
  width:154px;height:88px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 3px 12px rgba(2,41,91,.05);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
}
.qjs-marq__item:hover{
  transform:translateY(-4px);
  border-color:rgba(212,165,15,.5);
  box-shadow:0 14px 28px rgba(2,41,91,.12);
}
.qjs-marq__logo{
  display:block;width:auto;max-width:104px;max-height:44px;object-fit:contain;
  /* Desaturated at rest so the rail reads as one calm band; the badge comes
     back to full colour when a visitor points at it. */
  filter:grayscale(1);opacity:.62;
  transition:filter .28s,opacity .28s;
}
.qjs-marq__item:hover .qjs-marq__logo{filter:none;opacity:1}

.qjs-marq__foot{margin:32px 0 0;text-align:center;font-size:14.5px}
.qjs-marq__foot a{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:800;color:var(--azure);text-decoration:none;
}
.qjs-marq__foot a .qjs-i{transition:transform .25s}
.qjs-marq__foot a:hover{color:var(--navy)}
.qjs-marq__foot a:hover .qjs-i{transform:translateX(4px)}

@media (max-width:600px){
  .qjs-marq{padding:46px 0 42px}
  .qjs-marq__head{margin-bottom:26px;padding:0 18px}
  .qjs-marq__item{width:126px;height:74px;border-radius:14px}
  .qjs-marq__logo{max-width:84px;max-height:36px}
  .qjs-marq__track{gap:12px}
}

/* =========================================================================
   2. Team rail - staggered portraits, name and role only
   ====================================================================== */
.qjs-team{
  position:relative;
  padding:80px 0 88px;
  font-family:var(--font-b);
  background:
    radial-gradient(52% 70% at 4% 12%,rgba(1,89,166,.09) 0%,transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,#F7FAFD 100%);
}
.qjs-team__wrap{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,2fr);
  gap:48px;align-items:center;
}

.qjs-team__eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);
}
.qjs-team__eyebrow .qjs-i{font-size:16px}
.qjs-team__t{
  font-family:var(--font-d);
  font-size:clamp(1.6rem,1.05rem + 1.6vw,2.35rem);
  font-weight:800;line-height:1.12;letter-spacing:-.03em;
  color:var(--navy);margin:0;
}
.qjs-team__hl{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold-deep),var(--gold) 55%,var(--gold-hi));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-deep);
}
.qjs-team__sub{margin:14px 0 22px;font-size:15px;line-height:1.7;color:var(--body)}
.qjs-team__cta{padding:14px 24px}

/* --- the rail --------------------------------------------------------- */
.qjs-team__rail{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;list-style:none;margin:0;padding:0;align-items:start;
}
.qjs-team__card{margin:0}
/* The middle portrait drops, which is what turns three equal boxes into a
   composition. */
.qjs-team__card:nth-child(2){margin-top:46px}

.qjs-team__shot{
  position:relative;overflow:hidden;border-radius:18px;
  aspect-ratio:3/4;
  background:var(--azure-soft);
  box-shadow:0 10px 26px rgba(2,41,91,.10);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s;
}
.qjs-team__img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.qjs-team__card:hover .qjs-team__shot{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(2,41,91,.18);
}
.qjs-team__card:hover .qjs-team__img{transform:scale(1.045)}

.qjs-team__meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 4px 0;
}
.qjs-team__name{
  display:block;font-family:var(--font-d);font-size:16.5px;font-weight:800;
  letter-spacing:-.015em;color:var(--navy);line-height:1.25;
}
.qjs-team__role{display:block;margin-top:2px;font-size:13px;color:var(--body)}
.qjs-team__dot{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:15px;
  transition:background .28s,transform .28s;
}
.qjs-team__card:hover .qjs-team__dot{background:var(--gold);color:var(--ink);transform:rotate(45deg)}

@media (max-width:1024px){
  .qjs-team__wrap{grid-template-columns:1fr;gap:34px}
  .qjs-team__card:nth-child(2){margin-top:0}
}
@media (max-width:700px){
  .qjs-team{padding:56px 0 60px}
  .qjs-team__wrap{padding:0 16px}
  .qjs-team__rail{grid-template-columns:1fr 1fr;gap:16px}
  /* Third portrait spans the row rather than sitting alone at half width. */
  .qjs-team__card:nth-child(3){grid-column:1/-1;max-width:60%}
  .qjs-team__name{font-size:15px}
}
@media (max-width:460px){
  .qjs-team__rail{grid-template-columns:1fr}
  .qjs-team__card:nth-child(3){max-width:none}
}

/* =========================================================================
   3. Service-area closing CTA

   Appended beneath the legacy coverage section, which is on navy.
   ====================================================================== */
.qjs-areacta{
  background:linear-gradient(180deg,var(--ink) 0%,#02224A 100%);
  padding:0 24px 56px;
  text-align:center;
  font-family:var(--font-b);
}
.qjs-areacta__t{
  margin:0 auto 18px;max-width:44ch;
  font-family:var(--font-d);font-size:clamp(1.05rem,.9rem + .5vw,1.3rem);
  font-weight:700;letter-spacing:-.015em;color:#fff;
}
.qjs-areacta__ctas{justify-content:center}
.qjs-areacta__ctas .qjs-btn{padding:15px 28px}
@media (max-width:600px){
  .qjs-areacta{padding:0 16px 44px}
  .qjs-areacta__ctas .qjs-btn{flex:1 1 100%}
}

/* =========================================================================
   4. FAQ - photo panel beside a filled-open accordion
   ====================================================================== */
.qjs-faq{
  position:relative;
  padding:78px 0 84px;
  font-family:var(--font-b);
  background:
    radial-gradient(60% 80% at 88% 6%,rgba(212,165,15,.10) 0%,transparent 58%),
    linear-gradient(180deg,#EEF3F9 0%,#FFFFFF 42%);
}
.qjs-faq__wrap{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:52px;align-items:start;
}

/* --- photo panel ------------------------------------------------------- */
.qjs-faq__media{
  position:relative;margin:0;border-radius:22px;overflow:hidden;
  box-shadow:var(--sh);
  /* Locks the panel to the accordion's visual weight regardless of the
     source image's proportions - the old section let a portrait crop run
     past the text and cut the subject in half. */
  aspect-ratio:4/5;
}
.qjs-faq__img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.qjs-faq__card{
  position:absolute;left:16px;right:16px;bottom:16px;
  padding:18px 20px;border-radius:16px;
  background:linear-gradient(180deg,rgba(1,27,62,.82),rgba(1,27,62,.94));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;text-align:left;
}
.qjs-faq__card-t{
  display:block;font-family:var(--font-d);font-size:17px;font-weight:800;
  letter-spacing:-.01em;color:#fff;
}
.qjs-faq__card-s{margin:5px 0 12px;font-size:13px;line-height:1.55;color:#B9CCE4}
.qjs-faq__card-links{display:flex;flex-wrap:wrap;gap:8px}
.qjs-faq__card-links a{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:999px;
  font-size:13px;font-weight:800;text-decoration:none;
  transition:transform .22s,background .22s;
}
.qjs-faq__card-links a:first-child{background:var(--gold);color:var(--ink)}
.qjs-faq__card-links a:last-child{background:var(--wa);color:#fff}
.qjs-faq__card-links a:hover{transform:translateY(-2px)}

/* --- heading ----------------------------------------------------------- */
.qjs-faq__eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);
}
.qjs-faq__eyebrow .qjs-i{font-size:16px}
.qjs-faq__t{
  font-family:var(--font-d);
  font-size:clamp(1.7rem,1.05rem + 1.9vw,2.6rem);
  font-weight:800;line-height:1.1;letter-spacing:-.03em;
  color:var(--navy);margin:0 0 26px;
}
.qjs-faq__hl{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold-deep),var(--gold) 55%,var(--gold-hi));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-deep);
}

/* --- accordion --------------------------------------------------------- */
.qjs-faq__list{display:flex;flex-direction:column;gap:12px}
.qjs-faq__item{
  border-radius:16px;overflow:hidden;
  background:var(--surface);border:1.5px solid var(--line);
  box-shadow:0 3px 12px rgba(2,41,91,.04);
  transition:background .3s,border-color .3s,box-shadow .3s,transform .3s;
}
.qjs-faq__item:hover{border-color:rgba(1,89,166,.32)}
/* The open row fills navy and carries its answer inside the fill. */
.qjs-faq__item.is-open{
  background:linear-gradient(160deg,var(--navy-2) 0%,var(--navy) 55%,var(--ink) 100%);
  border-color:transparent;
  box-shadow:0 18px 40px rgba(2,41,91,.24);
}

.qjs-faq__qh{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.qjs-faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 20px;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-d);font-size:16px;font-weight:700;letter-spacing:-.012em;
  color:var(--navy);
  transition:color .3s;
}
.qjs-faq__q:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;border-radius:16px}
.qjs-faq__item.is-open .qjs-faq__q{color:#fff}

.qjs-faq__ico{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--line);color:var(--navy);font-size:19px;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),background .3s,border-color .3s,color .3s;
}
.qjs-faq__item.is-open .qjs-faq__ico{
  transform:rotate(180deg);
  background:var(--gold);border-color:var(--gold);color:var(--ink);
}

/* Easing to a content-derived height: 0fr to 1fr is the only way CSS can
   animate to "whatever the answer needs". */
.qjs-faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.2,.7,.3,1);
}
.qjs-faq__item.is-open .qjs-faq__a{grid-template-rows:1fr}
.qjs-faq__a > p{
  overflow:hidden;margin:0;
  padding:0 20px;
  font-size:15px;line-height:1.72;color:#BDD0E8;
  transition:padding .34s cubic-bezier(.2,.7,.3,1);
}
.qjs-faq__item.is-open .qjs-faq__a > p{padding:0 20px 20px}
.qjs-faq__a[hidden]{display:none}

@media (max-width:900px){
  .qjs-faq{padding:56px 0 60px}
  .qjs-faq__wrap{grid-template-columns:1fr;gap:32px}
  .qjs-faq__media{aspect-ratio:16/10;max-height:340px}
  .qjs-faq__img{object-position:center 42%}
}
@media (max-width:600px){
  .qjs-faq__wrap{padding:0 16px}
  .qjs-faq__q{padding:16px;font-size:15px;gap:12px}
  .qjs-faq__a > p{padding:0 16px;font-size:14.5px}
  .qjs-faq__item.is-open .qjs-faq__a > p{padding:0 16px 16px}
}

/* -------------------------------------------------------------------------
   Motion preferences
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  /* The rail becomes a plain scrollable row rather than freezing mid-loop
     with half the brands out of view. */
  .qjs-marq__track{animation:none;width:auto;overflow-x:auto;padding-bottom:8px;will-change:auto}
  .qjs-marq__rail{mask-image:none;-webkit-mask-image:none}
  .qjs-faq__a,.qjs-faq__a > p,.qjs-faq__ico,.qjs-faq__item,
  .qjs-marq__item,.qjs-marq__logo,
  .qjs-team__shot,.qjs-team__img,.qjs-team__dot{transition:none}
}