/* ============================================================================
   Jos Finserv — 2026 design system
   Single stylesheet. Loaded after the legacy Bootstrap so it wins on specificity
   where it needs to. Everything is namespaced under .jf where there's any risk
   of collision.
   ============================================================================ */

/* ---------------------------------------------------------------- tokens --- */
/* Palette taken directly from the Jos Finserv logo:
   navy #22205F (mark + wordmark) and amber #F09623 (inner triangle + tagline).
   Navy carries the brand; amber is used sparingly for calls to action.        */
:root{
  --jf-ink:        #14132E;
  --jf-ink-2:      #3A3960;
  --jf-mute:       #6B6E86;
  --jf-line:       #E4E5EE;
  --jf-line-2:     #F1F2F7;
  --jf-bg:         #FFFFFF;
  --jf-bg-soft:    #F6F7FB;

  --jf-navy:       #22205F;   /* primary brand */
  --jf-navy-dk:    #171545;
  --jf-navy-lo:    #EEEEF6;

  --jf-accent:     #F09623;   /* brand amber, used sparingly */
  --jf-accent-dk:  #D67F12;
  --jf-accent-lo:  #FEF4E7;

  --jf-r-sm: 10px;
  --jf-r:    16px;
  --jf-r-lg: 24px;

  --jf-max: 1180px;

  --jf-shadow:    0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.05);
  --jf-shadow-lg: 0 2px 4px rgba(10,10,10,.04), 0 20px 48px rgba(10,10,10,.10);

  --jf-ease: cubic-bezier(.2,.7,.3,1);
}

/* ------------------------------------------------------------------ base --- */
.jf, .jf *{ box-sizing:border-box; }

.jf{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--jf-ink);
  background:var(--jf-bg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv11','ss01';
}

.jf img{ max-width:100%; height:auto; display:block; }
.jf a{ color:inherit; }

.jf-wrap{ max-width:var(--jf-max); margin:0 auto; padding:0 24px; }
.jf-wrap--narrow{ max-width:760px; }

.jf-sec{ padding:96px 0; }
.jf-sec--tight{ padding:64px 0; }
.jf-sec--soft{ background:var(--jf-bg-soft); }
.jf-sec--dark{ background:var(--jf-navy); color:#fff; }
.jf-sec--dark .jf-eyebrow{ color:rgba(255,255,255,.55); }
.jf-sec--dark .jf-lede{ color:rgba(255,255,255,.72); }

/* ------------------------------------------------------------------ type --- */
.jf h1,.jf h2,.jf h3,.jf h4{
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.032em;
  line-height:1.06;
  color:inherit;
}
.jf h1{ font-size:clamp(2.5rem, 5.6vw, 4.25rem); }
.jf h2{ font-size:clamp(1.9rem, 3.6vw, 2.85rem); letter-spacing:-.028em; }
.jf h3{ font-size:1.2rem; letter-spacing:-.018em; line-height:1.3; }
.jf p{ margin:0 0 1.1em; }
.jf p:last-child{ margin-bottom:0; }

.jf-eyebrow{
  display:inline-block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--jf-mute);
  margin-bottom:18px;
}
.jf-lede{
  font-size:clamp(1.05rem,1.7vw,1.28rem);
  color:var(--jf-mute);
  line-height:1.55;
  max-width:62ch;
}
.jf-center{ text-align:center; }
.jf-center .jf-lede{ margin-left:auto; margin-right:auto; }

/* --------------------------------------------------------------- buttons --- */
.jf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px;
  border:1.5px solid transparent;
  border-radius:999px;
  font-size:1rem; font-weight:650; letter-spacing:-.011em;
  text-decoration:none; cursor:pointer;
  transition:transform .18s var(--jf-ease), background .18s var(--jf-ease),
             box-shadow .18s var(--jf-ease), border-color .18s var(--jf-ease);
  white-space:nowrap;
}
.jf-btn:hover{ transform:translateY(-1.5px); text-decoration:none; }
.jf-btn:active{ transform:translateY(0); }

/* NOTE: these carry an extra .jf so they beat `.jf a{color:inherit}` and the
   legacy Bootstrap link colours. Without it the button text goes invisible. */
.jf a.jf-btn--primary,.jf .jf-btn--primary{ background:var(--jf-navy); color:#fff; }
.jf a.jf-btn--primary:hover,.jf .jf-btn--primary:hover{ background:var(--jf-navy-dk); color:#fff; box-shadow:var(--jf-shadow-lg); }

.jf a.jf-btn--accent,.jf .jf-btn--accent{ background:var(--jf-accent); color:#3A2405; }
.jf a.jf-btn--accent:hover,.jf .jf-btn--accent:hover{ background:var(--jf-accent-dk); color:#fff; box-shadow:0 10px 24px rgba(240,150,35,.32); }

.jf a.jf-btn--ghost,.jf .jf-btn--ghost{ background:transparent; color:var(--jf-navy); border-color:var(--jf-line); }
.jf a.jf-btn--ghost:hover,.jf .jf-btn--ghost:hover{ border-color:var(--jf-navy); background:transparent; color:var(--jf-navy); }

.jf .jf-sec--dark .jf-btn--ghost,.jf-sec--dark a.jf-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.jf .jf-sec--dark .jf-btn--ghost:hover,.jf-sec--dark a.jf-btn--ghost:hover{ border-color:#fff; color:#fff; }

/* Legacy pages animate in with AOS. If anything stops AOS initialising the
   body goes blank, so never let opacity:0 persist once the doc is loaded. */
.jf [data-aos]{ opacity:1; }
.jf [data-aos].aos-init:not(.aos-animate){ opacity:0; }

.jf-btn--lg{ padding:18px 38px; font-size:1.05rem; }
.jf-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.jf-center .jf-btns{ justify-content:center; }

/* ------------------------------------------------------------------ hero --- */
.jf-hero{
  padding:104px 0 88px;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(34,32,95,.09), transparent 62%),
    radial-gradient(760px 420px at 8% 8%, rgba(240,150,35,.08), transparent 60%);
  border-bottom:1px solid var(--jf-line);
}
.jf-hero h1{ max-width:16ch; margin-bottom:24px; }
.jf-hero .jf-lede{ margin-bottom:36px; }

.jf-hero-grid{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:64px; align-items:center;
}

.jf-pill{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--jf-navy-lo); color:var(--jf-navy);
  border:1px solid rgba(34,32,95,.16);
  padding:7px 15px; border-radius:999px;
  font-size:.83rem; font-weight:600; margin-bottom:26px;
}
.jf-pill .dot{
  width:6px; height:6px; border-radius:50%; background:var(--jf-accent);
  box-shadow:0 0 0 3px rgba(240,150,35,.25);
}

/* -------------------------------------------------------- stat / numbers --- */
.jf-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--jf-line);
  border:1px solid var(--jf-line); border-radius:var(--jf-r);
  overflow:hidden; margin-top:44px;
}
.jf-stat{ background:#fff; padding:26px 22px; }
.jf-stat .n{
  font-size:2.1rem; font-weight:700; letter-spacing:-.035em;
  line-height:1; margin:0 0 7px;
}
.jf-stat .l{ font-size:.84rem; color:var(--jf-mute); margin:0; line-height:1.4; }

/* ----------------------------------------------------------------- cards --- */
.jf-grid{ display:grid; gap:22px; }
.jf-grid--2{ grid-template-columns:repeat(2,1fr); }
.jf-grid--3{ grid-template-columns:repeat(3,1fr); }
.jf-grid--4{ grid-template-columns:repeat(4,1fr); }

.jf-card{
  background:#fff;
  border:1px solid var(--jf-line);
  border-radius:var(--jf-r-lg);
  padding:32px;
  display:flex; flex-direction:column;
  transition:border-color .2s var(--jf-ease), box-shadow .2s var(--jf-ease),
             transform .2s var(--jf-ease);
}
.jf-card--link:hover{
  border-color:transparent;
  box-shadow:var(--jf-shadow-lg);
  transform:translateY(-3px);
}
.jf-card h3{ margin-bottom:10px; color:var(--jf-navy); }
.jf-card p{ color:var(--jf-mute); font-size:.97rem; }
.jf-card .jf-card-foot{ margin-top:auto; padding-top:22px; }

.jf-card--feature{
  border:1.5px solid var(--jf-navy);
  position:relative;
}
.jf-tag{
  position:absolute; top:-11px; left:32px;
  background:var(--jf-navy); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 13px; border-radius:999px;
}

.jf-price{
  color:var(--jf-navy);
  font-size:2.6rem; font-weight:700; letter-spacing:-.04em; line-height:1;
  margin:6px 0 4px;
}
.jf-price small{ font-size:.82rem; font-weight:500; color:var(--jf-mute); letter-spacing:0; }
.jf-rate{
  display:inline-block;
  background:var(--jf-bg-soft); border:1px solid var(--jf-line);
  border-radius:999px; padding:6px 14px;
  font-size:.87rem; font-weight:600; margin:14px 0 20px;
}
.jf-rate span{ font-weight:400; color:var(--jf-mute); }

.jf-list{ list-style:none; padding:0; margin:0 0 4px; font-size:.95rem; }
.jf-list li{
  padding:7px 0 7px 27px; position:relative; color:var(--jf-ink-2);
}
.jf-list li:before{
  content:''; position:absolute; left:0; top:15px;
  width:15px; height:15px; border-radius:50%;
  background:var(--jf-navy-lo);
  box-shadow:inset 0 0 0 1px rgba(34,32,95,.22);
}
.jf-list li:after{
  content:''; position:absolute; left:5px; top:19px;
  width:4.5px; height:2.5px;
  border-left:1.6px solid var(--jf-navy);
  border-bottom:1.6px solid var(--jf-navy);
  transform:rotate(-45deg);
}

/* ------------------------------------------------------------ split rows --- */
.jf-split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:center;
}
.jf-split--wide{ grid-template-columns:1.15fr .85fr; }

/* ----------------------------------------------------------------- table --- */
.jf-tablewrap{
  border:1px solid var(--jf-line); border-radius:var(--jf-r);
  overflow:hidden; background:#fff;
}
.jf-table{ width:100%; border-collapse:collapse; font-size:.96rem; }
.jf-table th,.jf-table td{
  padding:16px 20px; text-align:left;
  border-bottom:1px solid var(--jf-line-2);
}
.jf-table thead th{
  background:var(--jf-bg-soft);
  font-size:.73rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--jf-mute); font-weight:650;
}
.jf-table tbody tr:last-child td{ border-bottom:none; }
.jf-table td:first-child{ font-weight:600; }
.jf-table .hl{ background:var(--jf-navy-lo); }
.jf-table .num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------- faq --- */
.jf-faq details{
  border-bottom:1px solid var(--jf-line);
  padding:22px 0;
}
.jf-faq details:first-of-type{ border-top:1px solid var(--jf-line); }
.jf-faq summary{
  color:var(--jf-navy);
  cursor:pointer; list-style:none;
  font-size:1.12rem; font-weight:640; letter-spacing:-.016em;
  position:relative; padding-right:40px;
}
.jf-faq summary::-webkit-details-marker{ display:none; }
.jf-faq summary:after{
  content:''; position:absolute; right:6px; top:8px;
  width:9px; height:9px;
  border-right:2px solid var(--jf-mute); border-bottom:2px solid var(--jf-mute);
  transform:rotate(45deg); transition:transform .2s var(--jf-ease);
}
.jf-faq details[open] summary:after{ transform:rotate(-135deg); top:12px; }
.jf-faq .a{ margin-top:14px; color:var(--jf-mute); max-width:70ch; }

/* ----------------------------------------------------------------- steps --- */
.jf-steps{ counter-reset:s; display:grid; gap:2px; }
.jf-step{
  counter-increment:s;
  display:grid; grid-template-columns:52px 1fr; gap:20px;
  padding:26px 0; border-bottom:1px solid var(--jf-line);
}
.jf-step:last-child{ border-bottom:none; }
.jf-step:before{
  content:counter(s,decimal-leading-zero);
  font-size:.85rem; font-weight:700; color:var(--jf-accent-dk);
  letter-spacing:.04em; padding-top:3px;
}
.jf-step h3{ margin-bottom:6px; color:var(--jf-navy); }
.jf-step p{ color:var(--jf-mute); font-size:.97rem; margin:0; }

/* ------------------------------------------------------------------- nav --- */
.jf-nav{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--jf-line);
}
.jf-nav-in{
  max-width:var(--jf-max); margin:0 auto; padding:0 24px;
  height:84px; display:flex; align-items:center; gap:32px;
}
.jf-logo{ display:flex; align-items:center; flex-shrink:0; }
.jf-logo img{ height:52px; width:auto; max-width:none; }
.jf-navlinks{
  display:flex; align-items:center; gap:30px;
  list-style:none; margin:0; padding:0; flex-grow:1;
}
.jf-navlinks a{
  text-decoration:none; font-size:.95rem; font-weight:550;
  color:var(--jf-ink-2); transition:color .15s;
}
.jf-navlinks a:hover,.jf-navlinks a[aria-current="page"]{ color:var(--jf-ink); }
.jf-navcta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.jf-navcta .jf-btn{ padding:11px 21px; font-size:.92rem; }

.jf-burger{
  display:none; background:none; border:0; padding:8px; cursor:pointer;
  margin-left:auto;
}
.jf-burger span{
  display:block; width:22px; height:2px; background:var(--jf-ink);
  border-radius:2px; margin:4.5px 0; transition:.22s var(--jf-ease);
}
.jf-nav.open .jf-burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.jf-nav.open .jf-burger span:nth-child(2){ opacity:0; }
.jf-nav.open .jf-burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------------------------------------------------------------- footer --- */
.jf-foot{
  background:var(--jf-navy); color:rgba(255,255,255,.72);
  padding:72px 0 34px; font-size:.93rem;
}
.jf-foot a{ color:rgba(255,255,255,.7); text-decoration:none; }
.jf-foot a:hover{ color:#fff; }
.jf-foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:44px; padding-bottom:48px;
}
.jf-foot h4{
  color:#fff; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:650; margin:0 0 18px;
}
.jf-foot ul{ list-style:none; padding:0; margin:0; }
.jf-foot li{ margin-bottom:11px; }
.jf-foot-logo img{ height:52px; width:auto; margin-bottom:20px; }
.jf-foot-bot{
  border-top:1px solid rgba(255,255,255,.11);
  padding-top:26px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:.83rem; color:rgba(255,255,255,.45);
}
.jf-social{ display:flex; gap:14px; }
.jf-social a{ font-size:.83rem; }

/* ---------------------------------------------------------- trustpilot ----- */
.trustpilot-btn{
  position:fixed; right:18px; bottom:82px; z-index:880;
  width:46px; height:46px; border-radius:50%;
  background:#fff; border:1px solid var(--jf-line);
  box-shadow:var(--jf-shadow);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s var(--jf-ease), transform .25s var(--jf-ease), visibility .25s;
}
.trustpilot-btn.active{ opacity:1; visibility:visible; transform:translateY(0); }
.trustpilot-btn img{ width:26px; height:26px; }

.scroll-top{
  position:fixed; right:18px; bottom:24px; z-index:880;
  width:46px; height:46px; border-radius:50%;
  background:var(--jf-navy); color:#fff; text-decoration:none;
  box-shadow:var(--jf-shadow);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s var(--jf-ease), transform .25s var(--jf-ease), visibility .25s;
}
.scroll-top.active{ opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top:hover{ background:var(--jf-navy-dk); color:#fff; }

.jf-trustbox{ margin:0 auto; max-width:100%; }
.jf-trust-strip{
  border-top:1px solid var(--jf-line); border-bottom:1px solid var(--jf-line);
  background:var(--jf-bg-soft); padding:28px 0;
}
.jf-trust-strip .jf-wrap{
  display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap; text-align:center;
}
.jf-trust-strip img{ height:26px; width:auto; }
.jf-trust-strip p{ margin:0; color:var(--jf-mute); font-size:.95rem; }

/* ---------------------------------------------------------- providers ------ */
.jf-provider-logo{
  height:34px; width:auto; margin-bottom:16px;
  filter:grayscale(1); opacity:.8;
}
.jf-panel-note{
  border-left:3px solid var(--jf-accent);
  padding:4px 0 4px 18px; margin-top:26px;
  color:var(--jf-mute); font-size:.93rem; max-width:70ch;
}

/* ------------------------------------------------------------- sharing ----- */
.jf-share{
  margin-top:20px; padding-top:18px;
  border-top:1px solid var(--jf-line-2);
}
.jf-share-label{
  display:block; font-size:.78rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--jf-mute); margin-bottom:10px;
}
.jf-share-row{ display:flex; gap:8px; flex-wrap:wrap; }
.jf-share-btn{
  appearance:none; cursor:pointer;
  font-family:inherit; font-size:.82rem; font-weight:600;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--jf-line); background:#fff;
  color:var(--jf-navy); text-decoration:none;
  transition:border-color .15s var(--jf-ease), background .15s var(--jf-ease);
}
.jf-share-btn:hover{
  border-color:var(--jf-navy); background:var(--jf-navy-lo);
  color:var(--jf-navy); text-decoration:none;
}

/* -------------------------------------------------------------- utilities -- */
.jf-fine{ font-size:.8rem; color:var(--jf-mute); line-height:1.65; }
.jf-hr{ height:1px; background:var(--jf-line); border:0; margin:0; }
.jf-mt0{ margin-top:0 } .jf-mb0{ margin-bottom:0 }
.jf-breadcrumb{
  font-size:.83rem; color:var(--jf-mute); padding:22px 0 0;
}
.jf-breadcrumb a{ text-decoration:none; }
.jf-breadcrumb a:hover{ color:var(--jf-ink); }

/* ------------------------------------------------------------ responsive --- */
@media (max-width:980px){
  .jf-hero-grid,.jf-split,.jf-split--wide{ grid-template-columns:1fr; gap:44px; }
  .jf-grid--4{ grid-template-columns:repeat(2,1fr); }
  .jf-grid--3{ grid-template-columns:repeat(2,1fr); }
  .jf-stats{ grid-template-columns:repeat(2,1fr); }
  .jf-foot-grid{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:760px){
  .jf{ font-size:16px; }
  .jf-sec{ padding:64px 0; }
  .jf-hero{ padding:64px 0 56px; }
  .jf-grid--2,.jf-grid--3,.jf-grid--4{ grid-template-columns:1fr; }
  .jf-wrap{ padding:0 20px; }
  .jf-card{ padding:26px; }
  .jf-btns .jf-btn{ width:100%; }

  .jf-burger{ display:block; }
  .jf-navlinks,.jf-navcta{
    display:none; position:absolute; left:0; right:0; top:84px;
    background:#fff; border-bottom:1px solid var(--jf-line);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 20px;
  }
  .jf-nav.open .jf-navlinks,.jf-nav.open .jf-navcta{ display:flex; }
  .jf-navlinks li{ border-bottom:1px solid var(--jf-line-2); }
  .jf-navlinks a{ display:block; padding:15px 0; font-size:1rem; }
  .jf-navcta{ top:auto; position:static; border:0; padding:16px 20px 22px; }
  .jf-navcta .jf-btn{ width:100%; padding:14px 20px; }
  .jf-foot-grid{ grid-template-columns:1fr; gap:30px; }
}

@media (prefers-reduced-motion:reduce){
  .jf *{ transition:none !important; animation:none !important; }
}

/* ============================================================================
   JFX — HOMEPAGE INTERFACE LAYER
   Dark aurora hero, glass wizard card, scroll reveal, hover lift.
   Scoped with the jfx- prefix so nothing here can reach the rest of the site.
   Motion is suppressed by the prefers-reduced-motion block at the foot of this
   stylesheet, which already targets .jf *.
   ========================================================================== */

.jfx-hero,.jfx-sec,.jfx-callback,.jfx-close{ position:relative; }
.jfx-hero *,.jfx-sec *,.jfx-callback *,.jfx-close *,.jfx-sticky *{ box-sizing:border-box; }

/* ------------------------------------------------------------------ hero --- */
.jfx-hero{
  background:#0E0D28;
  color:#fff;
  padding:76px 0 108px;
  overflow:hidden;
  isolation:isolate;
}
.jfx-hero-inner{ position:relative; z-index:2; }

.jfx-aurora{ position:absolute; inset:-20% -10%; z-index:0; filter:blur(70px); opacity:.85; }
.jfx-blob{ position:absolute; display:block; border-radius:50%; }
.jfx-blob--1{
  width:640px; height:640px; left:-8%; top:-24%;
  background:radial-gradient(circle at 30% 30%, #3C39B8 0%, rgba(60,57,184,0) 68%);
  animation:jfxDrift1 22s ease-in-out infinite;
}
.jfx-blob--2{
  width:560px; height:560px; right:-6%; top:-10%;
  background:radial-gradient(circle at 60% 40%, #F09623 0%, rgba(240,150,35,0) 66%);
  opacity:.5;
  animation:jfxDrift2 26s ease-in-out infinite;
}
.jfx-blob--3{
  width:720px; height:720px; left:24%; bottom:-46%;
  background:radial-gradient(circle at 50% 50%, #2C6BE0 0%, rgba(44,107,224,0) 66%);
  opacity:.55;
  animation:jfxDrift3 30s ease-in-out infinite;
}
@keyframes jfxDrift1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(70px,50px,0) scale(1.12)} }
@keyframes jfxDrift2{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-60px,60px,0) scale(1.16)} }
@keyframes jfxDrift3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(50px,-40px,0) scale(.9)} }

/* Faint grid, the thing that reads as "fintech" rather than "blog". */
.jfx-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 78%);
}
.jfx-fade{
  position:absolute; left:0; right:0; bottom:0; height:120px; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(14,13,40,0), #fff);
}

.jfx-hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start;
}

.jfx-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:999px; padding:7px 15px 7px 12px;
  font-size:.79rem; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.88); margin-bottom:26px;
}
.jfx-dot{
  width:7px; height:7px; border-radius:50%; background:#4ADE80; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);
  animation:jfxPulse 2.4s ease-out infinite;
}
@keyframes jfxPulse{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55) }
  70%{ box-shadow:0 0 0 9px rgba(74,222,128,0) }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0) }
}

.jfx-hero-copy h1{
  font-size:clamp(2.3rem, 4.6vw, 3.55rem);
  line-height:1.06; letter-spacing:-.028em; font-weight:700;
  margin:0 0 20px; color:#fff;
}
.jfx-shine{
  display:inline-block;
  background:linear-gradient(100deg,#F5B75C 0%,#F09623 28%,#FFE0AE 50%,#F09623 72%,#F5B75C 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:jfxShine 7s linear infinite;
}
@keyframes jfxShine{ from{background-position:220% 0} to{background-position:-20% 0} }

.jfx-lede{
  font-size:1.1rem; line-height:1.62; color:rgba(255,255,255,.76);
  margin:0 0 26px; max-width:44ch;
}

.jfx-ticks{ list-style:none; margin:0 0 32px; padding:0; display:grid; gap:12px; }
.jfx-ticks li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.97rem; color:rgba(255,255,255,.86);
}
.jfx-tick{
  flex:0 0 auto; width:21px; height:21px; margin-top:2px; border-radius:50%;
  background:rgba(74,222,128,.15); border:1px solid rgba(74,222,128,.4);
  position:relative;
}
.jfx-tick::after{
  content:''; position:absolute; left:6px; top:5px;
  width:5px; height:9px; border:solid #4ADE80; border-width:0 2px 2px 0;
  transform:rotate(43deg);
}

/* --------------------------------------------------------------- buttons --- */
.jfx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:650; font-size:.98rem;
  padding:14px 26px; border-radius:12px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--jf-ease), box-shadow .18s var(--jf-ease),
             background .18s var(--jf-ease), border-color .18s var(--jf-ease);
  position:relative; overflow:hidden;
}
.jfx-btn:hover{ transform:translateY(-2px); }
.jfx-btn:active{ transform:translateY(0); }
.jfx-btn:focus-visible{ outline:3px solid rgba(240,150,35,.55); outline-offset:2px; }

.jfx-btn--gold{
  background:linear-gradient(180deg,#F5A939,#E8891A);
  color:#1A1200; border-color:#D67F12;
  box-shadow:0 6px 20px rgba(240,150,35,.32);
}
.jfx-btn--gold:hover{ box-shadow:0 12px 30px rgba(240,150,35,.42); }
/* Sweep of light across the primary action on hover. */
.jfx-btn--gold::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); transition:left .55s var(--jf-ease);
}
.jfx-btn--gold:hover::after{ left:135%; }

.jfx-btn--glass{
  background:rgba(255,255,255,.08); color:#fff;
  border-color:rgba(255,255,255,.24);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.jfx-btn--glass:hover{ background:rgba(255,255,255,.15); }

.jfx-btn--outline{
  background:transparent; color:var(--jf-navy); border-color:#D3D5E2;
}
.jfx-btn--outline:hover{ border-color:var(--jf-navy); background:var(--jf-navy-lo); }

.jfx-btn--ghost{
  background:transparent; color:var(--jf-mute); border-color:#E1E3EE;
  padding:14px 20px;
}
.jfx-btn--ghost:hover{ color:var(--jf-ink); border-color:#C9CBDB; }

.jfx-grow{ flex:1; }
.jfx-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; }
.jfx-cta-row--mid{ justify-content:center; margin-bottom:0; }

.jfx-trustrow{ display:flex; gap:14px; flex-wrap:wrap; }
.jfx-trust{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:11px; padding:11px 15px; flex:1 1 190px;
}
.jfx-trust strong{ display:block; font-size:.86rem; color:#fff; font-weight:650; }
.jfx-trust span{ font-size:.76rem; color:rgba(255,255,255,.55); }

/* ------------------------------------------------------- eligibility card --- */
.jfx-card{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.55);
  border-radius:20px;
  padding:30px 30px 26px;
  box-shadow:0 30px 70px rgba(6,5,24,.45), 0 2px 0 rgba(255,255,255,.5) inset;
  color:var(--jf-ink);
  position:relative;
  animation:jfxRise .7s var(--jf-ease) both;
}
@keyframes jfxRise{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }

.jfx-card-head h2{
  font-size:1.32rem; letter-spacing:-.015em; margin:0 0 5px; font-weight:700; color:var(--jf-ink);
}
.jfx-card-head p{ font-size:.9rem; color:var(--jf-mute); margin:0 0 18px; }
.jfx-card-head p strong{ color:#1E6B34; }

.jfx-progress{
  height:5px; background:#EDEEF5; border-radius:999px; overflow:hidden; margin-bottom:8px;
}
.jfx-progress span{
  display:block; height:100%; width:33.33%; border-radius:999px;
  background:linear-gradient(90deg,var(--jf-navy),#4B48C9);
  transition:width .42s var(--jf-ease);
}
.jfx-steplabel{
  font-size:.74rem; font-weight:650; letter-spacing:.05em; text-transform:uppercase;
  color:var(--jf-mute); margin-bottom:20px;
}

.jfx-step{ border:0; margin:0; padding:0; display:none; }
.jfx-step.is-on{ display:block; animation:jfxSlide .34s var(--jf-ease) both; }
@keyframes jfxSlide{ from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none} }
.jfx-step legend{
  font-size:.98rem; font-weight:650; color:var(--jf-ink); padding:0; margin-bottom:14px;
}

.jfx-choices{ display:grid; gap:8px; margin-bottom:6px; }
.jfx-choices label{
  display:block; position:relative; cursor:pointer;
}
.jfx-choices input{ position:absolute; opacity:0; width:0; height:0; }
.jfx-choices span{
  display:block; padding:13px 16px; border:1.5px solid #E4E5EE; border-radius:11px;
  font-size:.95rem; font-weight:500; background:#fff;
  transition:border-color .16s var(--jf-ease), background .16s var(--jf-ease),
             transform .16s var(--jf-ease);
}
.jfx-choices label:hover span{ border-color:#BFC1D6; transform:translateX(3px); }
.jfx-choices input:checked + span{
  border-color:var(--jf-navy); background:var(--jf-navy-lo); font-weight:650;
  box-shadow:0 0 0 3px rgba(34,32,95,.09);
}
.jfx-choices input:focus-visible + span{ outline:3px solid rgba(34,32,95,.35); outline-offset:2px; }

.jfx-field{ display:block; margin-bottom:14px; }
.jfx-field span{
  display:block; font-size:.79rem; font-weight:650; color:var(--jf-mute); margin-bottom:6px;
}
.jfx-field input{
  width:100%; font:inherit; font-size:.97rem; padding:13px 15px;
  border:1.5px solid #E4E5EE; border-radius:11px; background:#fff; color:var(--jf-ink);
  transition:border-color .16s var(--jf-ease), box-shadow .16s var(--jf-ease);
}
.jfx-field input:focus{
  outline:0; border-color:var(--jf-navy); box-shadow:0 0 0 3px rgba(34,32,95,.12);
}
.jfx-fine{ font-size:.79rem; color:var(--jf-mute); margin:12px 0 0; line-height:1.5; }

.jfx-nav{ display:flex; gap:9px; margin-top:20px; }

.jfx-alert{
  background:#FDECEC; border:1px solid #F3C2C2; color:#B3261E;
  border-radius:11px; padding:11px 14px; font-size:.88rem; margin-bottom:16px;
}

.jfx-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Honeypot must not be reachable by keyboard either. */
.jfx-hp input{ pointer-events:none; }

.jfx-done{ text-align:center; padding:14px 4px 8px; }
.jfx-done h2{ font-size:1.3rem; margin:0 0 8px; letter-spacing:-.015em; }
.jfx-done p{ font-size:.94rem; color:var(--jf-mute); margin:0; line-height:1.6; }
.jfx-done a{ color:var(--jf-navy); font-weight:650; }
.jfx-done-mark{
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
  background:#E6F4EA; border:1px solid #B7DFC4; position:relative;
  animation:jfxPop .45s var(--jf-ease) both;
}
.jfx-done-mark::after{
  content:''; position:absolute; left:21px; top:16px;
  width:11px; height:20px; border:solid #1E6B34; border-width:0 3px 3px 0;
  transform:rotate(43deg);
}
@keyframes jfxPop{ from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1} }
.jfx-done--light h2{ color:#fff; }
.jfx-done--light p{ color:rgba(255,255,255,.75); }
.jfx-done--light a{ color:#F5B75C; }

/* --------------------------------------------------------------- sections --- */
.jfx-sec{ padding:88px 0; background:#fff; }
.jfx-sec--tint{ background:var(--jf-bg-soft); }

.jfx-head{ max-width:660px; margin:0 0 44px; }
.jfx-head h2{
  font-size:clamp(1.65rem,2.7vw,2.15rem); line-height:1.15; letter-spacing:-.022em;
  margin:0 0 12px; font-weight:700;
}
.jfx-head p{ color:var(--jf-mute); font-size:1.02rem; margin:0; }
.jfx-eyebrow{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--jf-accent-dk); margin-bottom:12px;
}

/* ----------------------------------------------------------- service duo --- */
.jfx-duo{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.jfx-svc{
  display:block; text-decoration:none; color:inherit; position:relative;
  background:#fff; border:1px solid var(--jf-line); border-radius:20px;
  padding:34px 32px 30px; overflow:hidden;
  transition:transform .28s var(--jf-ease), box-shadow .28s var(--jf-ease),
             border-color .28s var(--jf-ease);
}
.jfx-svc::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--jf-navy),var(--jf-accent));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--jf-ease);
}
.jfx-svc:hover{
  transform:translateY(-5px);
  box-shadow:var(--jf-shadow-lg); border-color:#D6D8E6;
}
.jfx-svc:hover::before{ transform:scaleX(1); }
.jfx-svc-num{
  position:absolute; right:26px; top:24px;
  font-size:2.6rem; font-weight:800; letter-spacing:-.04em;
  color:var(--jf-line-2); line-height:1;
  transition:color .28s var(--jf-ease);
}
.jfx-svc:hover .jfx-svc-num{ color:var(--jf-accent-lo); }
.jfx-svc h2{ font-size:1.32rem; letter-spacing:-.018em; margin:0 0 10px; font-weight:700; }
.jfx-svc > p{ color:var(--jf-mute); font-size:.97rem; margin:0 0 18px; max-width:38ch; }
.jfx-svc ul{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:8px; }
.jfx-svc li{
  font-size:.92rem; color:var(--jf-ink-2); padding-left:20px; position:relative;
}
.jfx-svc li::before{
  content:''; position:absolute; left:2px; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--jf-accent);
}
.jfx-go{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.93rem; font-weight:650; color:var(--jf-navy);
}
.jfx-go i{
  width:16px; height:2px; background:currentColor; position:relative; display:inline-block;
  transition:width .22s var(--jf-ease);
}
.jfx-go i::after{
  content:''; position:absolute; right:0; top:-3px;
  width:8px; height:8px; border:solid currentColor; border-width:2px 2px 0 0;
  transform:rotate(45deg);
}
.jfx-svc:hover .jfx-go i{ width:26px; }

/* ------------------------------------------------------------ sector tiles --- */
.jfx-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.jfx-tile{
  background:#fff; border:1px solid var(--jf-line); border-radius:18px;
  padding:26px 24px 24px;
  transition:transform .28s var(--jf-ease), box-shadow .28s var(--jf-ease);
}
.jfx-tile:hover{ transform:translateY(-4px); box-shadow:var(--jf-shadow-lg); }
.jfx-tile h3{ font-size:1rem; font-weight:700; letter-spacing:-.01em; margin:0 0 8px; }
.jfx-tile p{ font-size:.89rem; color:var(--jf-mute); margin:0; line-height:1.6; }
.jfx-tile-ico{
  width:44px; height:44px; border-radius:13px; margin-bottom:16px;
  background:linear-gradient(145deg,var(--jf-navy-lo),#fff);
  border:1px solid var(--jf-line); position:relative;
  transition:transform .28s var(--jf-ease);
}
.jfx-tile:hover .jfx-tile-ico{ transform:rotate(-6deg) scale(1.06); }
/* Simple geometry rather than an icon font, so there is nothing extra to load. */
.jfx-tile-ico::before,.jfx-tile-ico::after{ content:''; position:absolute; }
.jfx-tile-ico[data-ico=shop]::before{
  left:12px; top:16px; width:20px; height:14px;
  border:2px solid var(--jf-navy); border-radius:2px;
}
.jfx-tile-ico[data-ico=shop]::after{
  left:10px; top:11px; width:24px; height:6px;
  background:var(--jf-accent); border-radius:3px 3px 0 0;
}
.jfx-tile-ico[data-ico=food]::before{
  left:13px; top:13px; width:18px; height:9px;
  border:2px solid var(--jf-navy); border-bottom:0; border-radius:9px 9px 0 0;
}
.jfx-tile-ico[data-ico=food]::after{
  left:11px; top:24px; width:22px; height:4px;
  background:var(--jf-accent); border-radius:2px;
}
.jfx-tile-ico[data-ico=cut]::before{
  left:15px; top:12px; width:2px; height:20px;
  background:var(--jf-navy); transform:rotate(20deg);
}
.jfx-tile-ico[data-ico=cut]::after{
  left:26px; top:12px; width:2px; height:20px;
  background:var(--jf-accent); transform:rotate(-20deg);
}
.jfx-tile-ico[data-ico=tools]::before{
  left:12px; top:20px; width:20px; height:3px;
  background:var(--jf-navy); border-radius:2px; transform:rotate(-35deg);
}
.jfx-tile-ico[data-ico=tools]::after{
  left:19px; top:13px; width:8px; height:8px; border-radius:50%;
  border:2px solid var(--jf-accent);
}

/* ------------------------------------------------------------------ rail --- */
.jfx-rail{ list-style:none; padding:0; margin:0; position:relative; }
.jfx-rail::before{
  content:''; position:absolute; left:19px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(to bottom,var(--jf-navy),rgba(34,32,95,.08));
}
.jfx-rail li{ position:relative; padding:0 0 30px 60px; }
.jfx-rail li:last-child{ padding-bottom:0; }
.jfx-rail b{
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  background:#fff; border:2px solid var(--jf-navy); color:var(--jf-navy);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; z-index:1;
}
.jfx-rail h3{ font-size:1.05rem; font-weight:700; margin:8px 0 6px; letter-spacing:-.012em; }
.jfx-rail p{ color:var(--jf-mute); font-size:.95rem; margin:0; }

/* -------------------------------------------------------------- callback --- */
.jfx-callback{
  background:#141235; color:#fff; padding:76px 0; overflow:hidden; isolation:isolate;
}
.jfx-aurora--soft{ opacity:.45; }
.jfx-callback-in{ position:relative; z-index:2; text-align:center; }
.jfx-callback h2{
  font-size:clamp(1.6rem,2.6vw,2.1rem); letter-spacing:-.022em; margin:0 0 12px;
  color:#fff; font-weight:700;
}
.jfx-callback .jfx-lede{ margin:0 auto 26px; max-width:52ch; }
.jfx-cbform{
  display:flex; gap:10px; max-width:560px; margin:0 auto; flex-wrap:wrap;
}
.jfx-cbform input{
  flex:1 1 170px; font:inherit; font-size:.97rem; padding:14px 16px;
  border:1px solid rgba(255,255,255,.2); border-radius:12px;
  background:rgba(255,255,255,.07); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .16s var(--jf-ease), background .16s var(--jf-ease);
}
.jfx-cbform input::placeholder{ color:rgba(255,255,255,.5); }
.jfx-cbform input:focus{
  outline:0; border-color:rgba(240,150,35,.7); background:rgba(255,255,255,.12);
}

/* ----------------------------------------------------------------- faqs --- */
.jfx-faq{
  background:#fff; border:1px solid var(--jf-line); border-radius:14px;
  margin-bottom:10px; overflow:hidden;
  transition:border-color .2s var(--jf-ease), box-shadow .2s var(--jf-ease);
}
.jfx-faq[open]{ border-color:#D2D4E4; box-shadow:var(--jf-shadow); }
.jfx-faq summary{
  cursor:pointer; list-style:none; padding:18px 54px 18px 22px;
  font-weight:650; font-size:1rem; position:relative;
}
.jfx-faq summary::-webkit-details-marker{ display:none; }
.jfx-faq summary:hover{ color:var(--jf-navy); }
.jfx-faq summary::before,.jfx-faq summary::after{
  content:''; position:absolute; right:23px; top:50%; background:var(--jf-navy);
  transition:transform .25s var(--jf-ease), opacity .25s var(--jf-ease);
}
.jfx-faq summary::before{ width:13px; height:2px; margin-top:-1px; }
.jfx-faq summary::after{ width:2px; height:13px; margin-top:-6.5px; margin-right:5.5px; }
.jfx-faq[open] summary::after{ transform:rotate(90deg); opacity:0; }
.jfx-faq p{
  margin:0; padding:0 22px 20px; color:var(--jf-mute); font-size:.95rem; line-height:1.65;
}

/* ---------------------------------------------------------------- close --- */
.jfx-close{ padding:84px 0 96px; text-align:center; background:#fff; }
.jfx-close h2{
  font-size:clamp(1.7rem,2.8vw,2.2rem); letter-spacing:-.022em; margin:0 0 12px; font-weight:700;
}
.jfx-close p{ color:var(--jf-mute); font-size:1.03rem; margin:0 auto 26px; max-width:50ch; }

/* --------------------------------------------------------------- reveal --- */
/* Gated on .jfx-anim, which only the script adds. If the script never runs,
   or IntersectionObserver misbehaves, nothing is hidden in the first place. */
.jfx-anim .jfx-reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--jf-ease), transform .6s var(--jf-ease);
  transition-delay:var(--d,0s);
}
.jfx-anim .jfx-reveal.is-in{ opacity:1; transform:none; }

/* -------------------------------------------------------------- sticky --- */
.jfx-sticky{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  gap:9px; padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--jf-line);
  box-shadow:0 -6px 24px rgba(10,10,10,.07);
}
.jfx-sticky .jfx-btn{ flex:1; padding:13px 10px; font-size:.93rem; }

/* ------------------------------------------------------------ responsive --- */
@media (max-width:1000px){
  .jfx-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .jfx-card{ max-width:520px; }
  .jfx-tiles{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .jfx-hero{ padding:52px 0 84px; }
  .jfx-sec{ padding:62px 0; }
  .jfx-close{ padding:60px 0 100px; }
  .jfx-duo{ grid-template-columns:1fr; }
  .jfx-tiles{ grid-template-columns:1fr; }
  .jfx-card{ padding:24px 22px 22px; max-width:none; }
  .jfx-cta-row .jfx-btn{ width:100%; }
  .jfx-cta-row--mid .jfx-btn{ width:100%; }
  .jfx-cbform{ flex-direction:column; }
  .jfx-cbform .jfx-btn{ width:100%; }
  .jfx-sticky{ display:flex; }
  .jfx-trustrow{ flex-direction:column; }
  .jfx-svc-num{ font-size:2rem; right:20px; top:20px; }
}

/* Blurred layers are expensive on low-power devices, and the drifting blobs
   are decoration. Anyone who has asked for less motion gets a flat gradient. */
@media (prefers-reduced-motion:reduce){
  .jfx-aurora{ filter:blur(60px); }
  .jfx-blob{ animation:none !important; }
  .jfx-reveal{ opacity:1 !important; transform:none !important; }
  .jfx-card{ animation:none !important; }
}

/* ============================================================================
   JFH — STICKY UTILITY HEADER
   Logo, grouped dropdown nav, opening hours and phone, one solid action.
   Replaces the old .jf-nav markup. Old .jf-nav rules are left in place so any
   page still emitting that markup is unaffected.
   ========================================================================== */
.jfh{
  position:sticky; top:0; z-index:80;
  background:#fff; border-bottom:1px solid var(--jf-line);
  transition:box-shadow .2s var(--jf-ease);
}
.jfh.is-stuck{ box-shadow:0 4px 20px rgba(10,10,10,.07); }
.jfh-in{
  max-width:var(--jf-max); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:28px; min-height:78px;
}
.jfh-logo{ flex:0 0 auto; display:block; line-height:0; }
.jfh-logo img{ width:auto; height:46px; }

.jfh-nav{ flex:1 1 auto; }
.jfh-menu{ list-style:none; margin:0; padding:0; display:flex; gap:4px; }
.jfh-has-sub{ position:relative; }
.jfh-top{
  font:inherit; font-size:.95rem; font-weight:600; color:var(--jf-ink);
  background:none; border:0; cursor:pointer; padding:10px 14px; border-radius:9px;
  display:inline-flex; align-items:center; gap:7px;
  transition:background .16s var(--jf-ease), color .16s var(--jf-ease);
}
.jfh-top:hover{ background:var(--jf-bg-soft); }
.jfh-top[data-open-section]{ color:var(--jf-navy); }
.jfh-top:focus-visible{ outline:3px solid rgba(34,32,95,.35); outline-offset:2px; }
.jfh-chev{
  width:7px; height:7px; border:solid currentColor; border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg) translate(-2px,-2px); opacity:.55;
  transition:transform .22s var(--jf-ease);
}
.jfh-top[aria-expanded=true] .jfh-chev{ transform:rotate(-135deg) translate(-3px,-3px); }

.jfh-sub{
  position:absolute; left:0; top:100%; min-width:330px; padding-top:10px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  /* visibility is discrete, so it is switched instantly on open and held
     until the fade has finished on close, rather than interpolated. */
  transition:opacity .18s var(--jf-ease), transform .18s var(--jf-ease),
             visibility 0s linear .18s;
}
.jfh-top[aria-expanded=true] + .jfh-sub{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.jfh-sub-in{
  background:#fff; border:1px solid var(--jf-line); border-radius:14px;
  box-shadow:var(--jf-shadow-lg); padding:8px; display:grid; gap:2px;
}
.jfh-sub-in a{
  display:block; padding:11px 13px; border-radius:10px; text-decoration:none;
  transition:background .14s var(--jf-ease);
}
.jfh-sub-in a:hover{ background:var(--jf-bg-soft); }
.jfh-sub-in a[aria-current]{ background:var(--jf-navy-lo); }
.jfh-sub-in strong{ display:block; font-size:.93rem; font-weight:650; color:var(--jf-ink); }
.jfh-sub-in span{ display:block; font-size:.8rem; color:var(--jf-mute); margin-top:2px; }

.jfh-right{ flex:0 0 auto; display:flex; align-items:center; gap:18px; }
.jfh-phone{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--jf-ink);
}
.jfh-phone-ico{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto; position:relative;
  background:var(--jf-accent-lo); border:1px solid #F6DCB8;
}
.jfh-phone-ico::after{
  content:''; position:absolute; left:9px; top:8px; width:11px; height:13px;
  border:2px solid var(--jf-accent-dk); border-radius:3px 8px 8px 3px;
  border-left-width:3px;
}
.jfh-phone-txt{ display:block; line-height:1.25; }
.jfh-hours{ display:block; font-size:.7rem; color:var(--jf-mute); font-weight:500; }
.jfh-phone strong{ font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }
.jfh-phone:hover strong{ color:var(--jf-navy); }

.jfh-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--jf-navy); color:#fff; text-decoration:none;
  font-size:.92rem; font-weight:650; padding:12px 20px; border-radius:11px;
  white-space:nowrap;
  transition:background .16s var(--jf-ease), transform .16s var(--jf-ease),
             box-shadow .16s var(--jf-ease);
}
.jfh-cta:hover{
  background:var(--jf-navy-dk); transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(34,32,95,.24);
}
.jfh-cta--block{ width:100%; padding:14px 20px; }

.jfh-burger{
  display:none; background:none; border:0; cursor:pointer; padding:8px;
  flex:0 0 auto; margin-left:auto;
}
.jfh-burger span{
  display:block; width:22px; height:2px; background:var(--jf-ink); border-radius:2px;
  transition:transform .22s var(--jf-ease), opacity .22s var(--jf-ease);
}
.jfh-burger span + span{ margin-top:5px; }
.jfh-burger[aria-expanded=true] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.jfh-burger[aria-expanded=true] span:nth-child(2){ opacity:0; }
.jfh-burger[aria-expanded=true] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.jfh-panel{ border-top:1px solid var(--jf-line); background:#fff; }
.jfh-panel-in{ padding:18px 20px 26px; display:grid; gap:20px; }
.jfh-group h2{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--jf-mute); font-weight:700; margin:0 0 6px;
}
.jfh-group a{
  display:block; padding:11px 0; font-size:1rem; font-weight:500;
  color:var(--jf-ink); text-decoration:none; border-bottom:1px solid var(--jf-line-2);
}
.jfh-panel-call{
  display:block; text-decoration:none; color:var(--jf-ink);
  font-size:1.2rem; font-weight:700; letter-spacing:-.01em;
}
.jfh-panel-call span{
  display:block; font-size:.78rem; font-weight:500; color:var(--jf-mute);
  letter-spacing:0;
}

@media (max-width:980px){
  .jfh-nav,.jfh-right{ display:none; }
  .jfh-burger{ display:block; }
  .jfh-in{ min-height:66px; gap:0; }
  .jfh-logo img{ height:40px; }
}
@media (min-width:981px){
  .jfh-panel{ display:none !important; }
}

/* ============================================================================
   JFX SLIDER CALCULATOR
   ========================================================================== */
.jfx-vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.jfx-readout{
  background:linear-gradient(160deg,var(--jf-navy) 0%,#33307F 100%);
  border-radius:15px; padding:20px 20px 16px; margin-bottom:22px; color:#fff;
  position:relative; overflow:hidden;
}
.jfx-readout::after{
  content:''; position:absolute; right:-40px; top:-50px; width:170px; height:170px;
  border-radius:50%; background:radial-gradient(circle,rgba(240,150,35,.32),transparent 68%);
}
.jfx-big{ position:relative; text-align:center; }
.jfx-big span{
  display:block; font-size:.79rem; color:rgba(255,255,255,.68); font-weight:500;
}
.jfx-big b{
  display:block; font-size:2.5rem; line-height:1.06; font-weight:800;
  letter-spacing:-.03em; margin:4px 0 3px;
  font-variant-numeric:tabular-nums;
}
.jfx-mini{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:15px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14);
}
.jfx-mini div{ text-align:center; }
.jfx-mini span{ display:block; font-size:.72rem; color:rgba(255,255,255,.6); }
.jfx-mini b{
  display:block; font-size:1.02rem; font-weight:700; margin-top:2px;
  font-variant-numeric:tabular-nums;
}

.jfx-slider{ margin-bottom:20px; }
.jfx-slider-top{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px;
}
.jfx-slider-top label{ font-size:.86rem; font-weight:600; color:var(--jf-ink-2); }
.jfx-slider-top output{
  font-size:1rem; font-weight:750; color:var(--jf-navy);
  font-variant-numeric:tabular-nums;
}
.jfx-slider-foot{
  display:flex; justify-content:space-between; margin-top:6px;
  font-size:.72rem; color:var(--jf-mute);
}

/* Range styling has to be duplicated for WebKit and Firefox, they do not
   accept a combined selector list. */
.jfx-range{
  -webkit-appearance:none; appearance:none; width:100%; height:7px;
  border-radius:999px; outline:0; cursor:pointer; margin:0;
  background:linear-gradient(90deg,var(--jfx-fill,var(--jf-navy)) 0 var(--pct,50%),
             #E9EAF2 var(--pct,50%) 100%);
}
.jfx-range--navy{ --jfx-fill:var(--jf-navy); }
.jfx-range--gold{ --jfx-fill:var(--jf-accent); }
.jfx-range:focus-visible{ outline:3px solid rgba(34,32,95,.3); outline-offset:5px; }
.jfx-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:#fff; border:3px solid var(--jfx-fill,var(--jf-navy)); cursor:grab;
  box-shadow:0 2px 8px rgba(10,10,10,.22);
  transition:transform .14s var(--jf-ease), box-shadow .14s var(--jf-ease);
}
.jfx-range::-webkit-slider-thumb:hover{ transform:scale(1.12); }
.jfx-range:active::-webkit-slider-thumb{ cursor:grabbing; transform:scale(1.18); }
.jfx-range::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:#fff;
  border:3px solid var(--jfx-fill,var(--jf-navy)); cursor:grab;
  box-shadow:0 2px 8px rgba(10,10,10,.22);
}
.jfx-range::-moz-range-track{ height:7px; border-radius:999px; background:transparent; }

.jfx-recap{
  background:var(--jf-accent-lo); border:1px solid #F6DCB8; border-radius:11px;
  padding:12px 14px; font-size:.87rem; color:var(--jf-ink-2); line-height:1.55;
  margin-bottom:18px;
}
.jfx-recap b{ color:var(--jf-ink); }

.jfx-select{
  width:100%; font:inherit; font-size:.97rem; padding:13px 15px;
  border:1.5px solid #E4E5EE; border-radius:11px; background:#fff; color:var(--jf-ink);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--jf-mute) 50%),
                   linear-gradient(135deg,var(--jf-mute) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.jfx-select:focus{
  outline:0; border-color:var(--jf-navy); box-shadow:0 0 0 3px rgba(34,32,95,.12);
}

@media (max-width:760px){
  .jfx-big b{ font-size:2.1rem; }
}

/* ============================================================================
   QA FIXES
   The base sheet carries `.jf a{ color:inherit }` at specificity (0,1,1), which
   silently beat every single class button rule below it. That left the header
   action navy on navy and the gold button white on amber. These selectors carry
   enough weight to win, rather than reaching for !important.
   ========================================================================== */
.jf a.jfh-cta, .jf a.jfh-cta:hover{ color:#fff; }
.jf a.jfx-btn--gold, .jf a.jfx-btn--gold:hover{ color:#1A1200; }
.jf a.jfx-btn--glass, .jf a.jfx-btn--glass:hover{ color:#fff; }
.jf a.jfx-btn--outline, .jf a.jfx-btn--outline:hover{ color:var(--jf-navy); }
.jf a.jfx-go{ color:var(--jf-navy); }
.jf a.jfh-phone{ color:var(--jf-ink); }

/* 2.84:1 was below the 4.5:1 needed at this size. This shade reads 5.11:1 on
   the soft background and 5.47:1 on white, and stays in the brand amber family. */
.jfx-eyebrow{ color:#9A5A0C; }

/* Footer links were 18px tall, under the 24px minimum target size. */
.jf-foot a{ display:inline-block; padding:4px 0; }

/* Keyboard users need to see where they are on every interactive element. */
.jf a:focus-visible, .jf button:focus-visible, .jf input:focus-visible,
.jf select:focus-visible, .jf summary:focus-visible{
  outline:3px solid rgba(240,150,35,.7); outline-offset:2px; border-radius:4px;
}
/* Off screen until focused, so keyboard users can jump the nav. */
.jfh-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--jf-navy); color:#fff; padding:12px 20px;
  border-radius:0 0 10px 0; font-weight:650; text-decoration:none;
}
.jfh-skip:focus{ left:0; }

/* ============================================================================
   UX FIXES, found by walking the live site at 1440px and 400px
   ========================================================================== */

/* 1. THE BIG ONE. `.jfx-btn{display:inline-flex}` is an author rule, so it beat
      the user agent's `[hidden]{display:none}`. Every wizard button rendered at
      once: Back, Continue and Submit all visible on step one. */
.jfx-btn[hidden], .jfh-cta[hidden], [hidden]{ display:none !important; }

/* 2. The back to top button called for a Bootstrap Icons glyph, but that font
      is not loaded anywhere on this site, so it rendered as an empty navy
      circle. Drawn here instead, with no font dependency. */
.scroll-top{
  width:46px; height:46px; border-radius:50%;
  background:var(--jf-navy); border:0;
  position:fixed; right:20px; bottom:20px; z-index:55;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s var(--jf-ease), transform .25s var(--jf-ease),
             visibility 0s linear .25s, background .18s var(--jf-ease);
  box-shadow:0 6px 20px rgba(10,10,10,.22);
}
.scroll-top.active{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.scroll-top:hover{ background:var(--jf-navy-dk); }
.scroll-top i{ display:none; }
.scroll-top::after{
  content:''; position:absolute; left:50%; top:52%;
  width:11px; height:11px; margin:-3px 0 0 -6px;
  border:solid #fff; border-width:2.5px 0 0 2.5px;
  transform:rotate(45deg);
}

/* 3. The header phone icon was two CSS borders with an asymmetric radius, which
      rendered as a letter D rather than a handset. Real glyph, drawn as SVG. */
.jfh-phone-ico::after{ content:none; }
.jfh-phone-ico{
  background:var(--jf-accent-lo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8700F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/17px 17px no-repeat;
}

/* 4. The sector tiles used abstract CSS rectangles and slashes that read as
      rendering artefacts rather than icons. Replaced with real pictograms. */
.jfx-tile-ico::before, .jfx-tile-ico::after{ content:none !important; }
.jfx-tile-ico{
  background-color:var(--jf-navy-lo);
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px 22px;
}
.jfx-tile-ico[data-ico=shop]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322205F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1 11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1L3 9z'/%3E%3Cpath d='M3 9l2-5h14l2 5' stroke='%23D67F12'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
}
.jfx-tile-ico[data-ico=food]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322205F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a8 8 0 0 1 16 0z'/%3E%3Cpath d='M2 15h20' stroke='%23D67F12'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
}
.jfx-tile-ico[data-ico=cut]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322205F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='18' r='3' stroke='%23D67F12'/%3E%3Cpath d='M8.1 15.9 20 4M15.9 15.9 4 4'/%3E%3C/svg%3E");
}
.jfx-tile-ico[data-ico=tools]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322205F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5l-7.4 7.4a2.1 2.1 0 0 1-3-3z' stroke='%23D67F12'/%3E%3Cpath d='M18 2l4 4-2.5 1.5L17 5z'/%3E%3C/svg%3E");
}

/* 5. The hero copy column ran 177px shorter than the calculator card, leaving a
      slab of empty navy on the left. Centring the column closes the gap without
      stretching the type. */
@media (min-width:1001px){
  .jfx-hero-grid{ align-items:center; }
}

/* 6. On the callback strip the button wrapped onto its own line and sat hard
      left under two centred inputs. Explicit widths keep the row intact, and it
      stacks cleanly rather than wrapping raggedly. */
.jfx-cbform{ justify-content:center; align-items:stretch; }
.jfx-cbform input{ flex:1 1 190px; min-width:0; }
.jfx-cbform .jfx-btn{ flex:0 0 auto; }

/* 7. The mobile action bar sat above the page but below the open menu, so a
      slice of orange showed through the panel. */
.jfh-burger[aria-expanded=true] ~ .jfx-sticky,
body.jf-menu-open .jfx-sticky{ display:none !important; }

/* 8. The same bar covered the last of the page content, so nothing could be
      read or tapped underneath it. */
@media (max-width:760px){
  .jf-foot{ padding-bottom:88px; }
  .scroll-top{ bottom:84px; }
}

/* 9. The readout announced a figure before the visitor had touched anything,
      which read as a claim about them rather than a starting point. */
.jfx-readout.is-example .jfx-big b{ opacity:.82; }
.jfx-example-note{
  display:block; font-size:.72rem; color:rgba(255,255,255,.6);
  text-align:center; margin-top:9px; font-style:normal;
}
.jfx-readout:not(.is-example) .jfx-example-note{ visibility:hidden; }
/* 10. Every in page anchor landed underneath the sticky header, so the top of
       the target was hidden. After submitting the form the success tick was
       cut in half. This offsets any anchor jump by the header height. */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
[id]{ scroll-margin-top:96px; }
@media (max-width:980px){ [id]{ scroll-margin-top:80px; } }
/* 11. Inner page hero headings were capped at 16ch, which is a sensible measure
       for body copy but far too tight for 68px display type. It forced
       "Compare payment providers, not just terminals" into four ragged lines.
       A wider cap plus balanced wrapping gives two or three even lines. */
.jf-hero h1{ max-width:20ch; text-wrap:balance; }
.jfx-hero-copy h1, .jfx-head h2, .jfx-close h2, .jfx-callback h2{ text-wrap:balance; }
@media (max-width:760px){ .jf-hero h1{ max-width:none; } }

/* ============================================================================
   JFC — CARD COST CALCULATOR
   Used inline by card-fee-calculator.php and card-machines.php. It previously
   lived in an unstyled HTML file loaded through an iframe, which rendered as a
   grey box the moment the frame-src policy tightened.
   ========================================================================== */
.jfc{ --jfc-r:18px; }
.jfc *{ box-sizing:border-box; }

.jfc-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:#fff; border:1px solid var(--jf-line); border-radius:22px;
  overflow:hidden; box-shadow:var(--jf-shadow);
}

.jfc-h{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.09em;
  font-weight:700; color:var(--jf-mute); margin:0 0 18px;
}

/* ------------------------------------------------------------------ inputs */
.jfc-inputs{ padding:30px 30px 26px; }
.jfc-field{ display:block; margin-bottom:22px; }
.jfc-label{
  display:block; font-size:.92rem; font-weight:650; color:var(--jf-ink); margin-bottom:8px;
}
.jfc-input{
  display:flex; align-items:center; gap:0;
  border:1.5px solid #E4E5EE; border-radius:12px; background:#fff;
  transition:border-color .16s var(--jf-ease), box-shadow .16s var(--jf-ease);
  overflow:hidden;
}
.jfc-input:focus-within{
  border-color:var(--jf-navy); box-shadow:0 0 0 3px rgba(34,32,95,.12);
}
.jfc-input i{
  font-style:normal; font-weight:650; color:var(--jf-mute);
  padding:0 4px 0 15px; font-size:1.15rem; flex:0 0 auto;
}
.jfc-input--suffix i{ padding:0 15px 0 4px; }
.jfc-input input{
  flex:1 1 auto; width:100%; min-width:0; border:0; outline:0; background:none;
  font:inherit; font-size:1.35rem; font-weight:700; letter-spacing:-.02em;
  color:var(--jf-ink); padding:13px 8px; font-variant-numeric:tabular-nums;
}
.jfc-input--suffix input{ padding-left:15px; }
.jfc-field small{
  display:block; font-size:.78rem; color:var(--jf-mute); margin-top:7px; line-height:1.5;
}

.jfc-presets{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:20px; }
.jfc-presets-label{
  font-size:.75rem; color:var(--jf-mute); font-weight:600; margin-right:2px;
}
.jfc-presets button{
  font:inherit; font-size:.82rem; font-weight:650; cursor:pointer;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--jf-line); background:#fff; color:var(--jf-ink-2);
  transition:border-color .14s var(--jf-ease), background .14s var(--jf-ease),
             color .14s var(--jf-ease);
}
.jfc-presets button:hover{
  border-color:var(--jf-navy); background:var(--jf-navy-lo); color:var(--jf-navy);
}
.jfc-note{
  font-size:.79rem; color:var(--jf-mute); line-height:1.55; margin:0;
  padding-top:16px; border-top:1px solid var(--jf-line-2);
}

/* ----------------------------------------------------------------- results */
.jfc-out{
  padding:30px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--jf-navy) 0%,#312E7C 100%);
  display:flex; flex-direction:column;
}
.jfc-out::after{
  content:''; position:absolute; right:-60px; top:-70px; width:230px; height:230px;
  border-radius:50%; background:radial-gradient(circle,rgba(240,150,35,.3),transparent 68%);
  pointer-events:none;
}
.jfc-headline{ position:relative; text-align:center; margin-bottom:22px; }
.jfc-cap{
  display:block; font-size:.8rem; color:rgba(255,255,255,.66); font-weight:500;
}
.jfc-headline b{
  display:block; font-size:clamp(2.4rem,5vw,3.2rem); line-height:1.04;
  font-weight:800; letter-spacing:-.035em; margin:6px 0 4px;
  font-variant-numeric:tabular-nums;
}
.jfc-stats{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  padding:16px 0; margin-bottom:16px;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.jfc-stats div{ text-align:center; }
.jfc-stats span{ display:block; font-size:.72rem; color:rgba(255,255,255,.6); }
.jfc-stats b{
  display:block; font-size:1.08rem; font-weight:700; margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.jfc-turnrow{
  position:relative; display:flex; justify-content:space-between; align-items:baseline;
  font-size:.85rem; color:rgba(255,255,255,.7); margin-bottom:auto; padding-bottom:22px;
}
.jfc-turnrow b{ color:#fff; font-size:1rem; font-variant-numeric:tabular-nums; }

.jfc-cta{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(180deg,#F5A939,#E8891A); color:#1A1200 !important;
  border:1px solid #D67F12; border-radius:12px;
  padding:14px 22px; font-weight:700; font-size:.97rem; text-decoration:none;
  box-shadow:0 6px 20px rgba(240,150,35,.3);
  transition:transform .16s var(--jf-ease), box-shadow .16s var(--jf-ease);
}
.jfc-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(240,150,35,.4); }
.jfc-cta-sub{
  position:relative; text-align:center; font-size:.76rem;
  color:rgba(255,255,255,.6); margin:10px 0 0;
}

/* ------------------------------------------------------------- rate table */
.jfc-table-wrap{ margin-top:34px; }
.jfc-sub{
  font-size:.92rem; color:var(--jf-mute); line-height:1.6; max-width:70ch; margin:0 0 20px;
}
.jfc-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.jfc-table{
  width:100%; border-collapse:collapse; min-width:520px;
  background:#fff; border:1px solid var(--jf-line); border-radius:14px; overflow:hidden;
}
.jfc-table th, .jfc-table td{
  padding:13px 16px; text-align:right; font-size:.93rem;
  border-bottom:1px solid var(--jf-line-2); font-variant-numeric:tabular-nums;
}
.jfc-table thead th{
  text-align:right; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--jf-mute); font-weight:700; background:var(--jf-bg-soft);
}
.jfc-table thead th:first-child, .jfc-table tbody th{ text-align:left; }
.jfc-table tbody th{ font-weight:700; color:var(--jf-ink); }
.jfc-table tbody tr:last-child th, .jfc-table tbody tr:last-child td{ border-bottom:0; }
.jfc-table tr.is-mine{ background:var(--jf-accent-lo); }
.jfc-table tr.is-mine th, .jfc-table tr.is-mine td{ font-weight:700; color:var(--jf-ink); }
.jfc-mine{
  display:inline-block; font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:#8A510B; background:#FBE7C8;
  padding:3px 9px; border-radius:999px;
}
.jfc-down{ color:#1E6B34; font-weight:650; }
.jfc-up{ color:#8A2B22; font-weight:650; }

.jfc-vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* --------------------------------------------------------------- fact grid */
.jfc-facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
.jfc-facts div{
  background:#fff; border:1px solid var(--jf-line); border-radius:14px; padding:18px 20px;
}
.jfc-facts b{ display:block; font-size:.96rem; margin-bottom:6px; color:var(--jf-ink); }
.jfc-facts span{ display:block; font-size:.87rem; color:var(--jf-mute); line-height:1.6; }

/* ------------------------------------------------------------- responsive */
@media (max-width:900px){
  .jfc-grid{ grid-template-columns:1fr; }
  .jfc-facts{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .jfc-inputs, .jfc-out{ padding:24px 20px; }
  .jfc-stats{ grid-template-columns:1fr; gap:12px; }
  .jfc-stats div{ display:flex; justify-content:space-between; align-items:baseline; }
  .jfc-stats b{ margin-top:0; }
}

/* ============================================================================
   JFJ — ROLE FACTS PANEL
   The scannable header and details block on a vacancy card, modelled on the
   job board layout candidates already recognise.
   ========================================================================== */
.jfj{ margin:0 0 26px; }

/* ------------------------------------------------------------------ header */
.jfj-head{ padding-bottom:20px; border-bottom:1px solid var(--jf-line); margin-bottom:20px; }
.jfj-org{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:5px; }
.jfj-co{
  font-size:.97rem; font-weight:650; color:var(--jf-navy);
  text-decoration:underline; text-underline-offset:3px;
}
.jfj-co:hover{ color:var(--jf-navy-dk); }
.jfj-reg{
  font-size:.74rem; font-weight:600; color:var(--jf-mute);
  background:var(--jf-bg-soft); border:1px solid var(--jf-line);
  padding:3px 9px; border-radius:999px;
}
.jfj-where{ font-size:.95rem; color:var(--jf-ink-2); margin:0 0 5px; }
.jfj-line{ font-size:.95rem; color:var(--jf-ink-2); margin:0 0 18px; }
.jfj-line strong{ color:var(--jf-ink); font-weight:700; }
.jfj-line span{ color:var(--jf-mute); margin:0 5px; }

.jfj-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.jfj-apply{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--jf-navy); color:#fff !important;
  font-size:.97rem; font-weight:700; letter-spacing:-.005em;
  padding:13px 30px; border-radius:10px; text-decoration:none;
  transition:background .16s var(--jf-ease), transform .16s var(--jf-ease),
             box-shadow .16s var(--jf-ease);
}
.jfj-apply:hover{
  background:var(--jf-navy-dk); transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(34,32,95,.25);
}
.jfj-second{
  font-size:.9rem; font-weight:600; color:var(--jf-navy);
  text-decoration:underline; text-underline-offset:3px;
}

/* ----------------------------------------------------------------- details */
.jfj-h{
  font-size:1.05rem; font-weight:700; letter-spacing:-.012em;
  margin:0 0 16px; color:var(--jf-ink);
}
.jfj-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.jfj-row:last-child{ margin-bottom:0; }
.jfj-ico{
  flex:0 0 auto; width:34px; height:34px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--jf-navy-lo); color:var(--jf-navy);
}
.jfj-body{ flex:1 1 auto; min-width:0; }
.jfj-lbl{
  display:block; font-size:.86rem; font-weight:700; color:var(--jf-ink);
  margin-bottom:7px;
}
.jfj-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.jfj-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#E9F5EC; border:1px solid #BFE0C8; color:#1E6B34;
  font-size:.85rem; font-weight:600;
  padding:6px 13px 6px 10px; border-radius:8px;
}
/* Tick drawn in CSS so no icon font is needed. */
.jfj-chip::before{
  content:''; width:5px; height:9px; flex:0 0 auto;
  border:solid currentColor; border-width:0 2px 2px 0;
  transform:rotate(43deg); margin-top:-2px;
}
.jfj-chip--plain{
  background:var(--jf-bg-soft); border-color:var(--jf-line); color:var(--jf-ink-2);
}
.jfj-chip--plain::before{ content:none; }
.jfj-note{
  display:block; font-size:.83rem; color:var(--jf-mute);
  line-height:1.55; margin-top:8px; max-width:62ch;
}

@media (max-width:560px){
  .jfj-actions{ flex-direction:column; align-items:stretch; }
  .jfj-apply{ width:100%; padding:14px 20px; }
  .jfj-second{ text-align:center; }
  .jfj-row{ gap:11px; }
  .jfj-ico{ width:30px; height:30px; }
}

/* ===========================================================================
   JFR - COMPACT ROLE CARDS

   Someone scanning for work wants to know what is open, where, and on what
   basis. The rest is detail they only want once a role interests them, so the
   role facts, the description and the requirement lists all sit behind one
   toggle. career.php prints the description after the details component, so
   the card itself is queried with :has to reach it. One summary, whole card.
   =========================================================================== */

.jf-grid:has(> .jf-role){
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:18px;
  align-items:start;
}

.jf-card.jf-role{ padding:20px 20px 16px; }

.jf-role h3{
  font-size:1.16rem;
  line-height:1.28;
  margin:2px 0 12px;
  text-wrap:balance;
}

.jf-role .jf-rate{
  display:block;
  font-size:.85rem;
  line-height:1.45;
  padding:9px 13px;
  margin:0 0 12px;
}

/* The facts component carries its own spacing for the full width layout.
   Inside a compact card it should sit flush, and the employer and area lines
   only repeat what the eyebrow and the pay line already said. */
.jf-role .jfj{ margin:0; }
.jf-role .jfj-head{ border:0; padding:0; margin:0; }
.jf-role .jfj-org,
.jf-role .jfj-where,
.jf-role .jfj-line{ display:none; }
.jf-role .jfj-actions{ margin:0; gap:16px; flex-wrap:wrap; }

/* ------------------------------------------------------------------ toggle */
.jfr-fold{ border-top:1px solid #E6E9F0; margin-top:14px; }

.jfr-sum{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; list-style:none;
  padding:11px 0 2px;
  font-size:.87rem; font-weight:650;
  color:#16204A;
}
.jfr-sum::-webkit-details-marker{ display:none; }
.jfr-sum::marker{ content:""; }
.jfr-sum:hover{ text-decoration:underline; text-underline-offset:3px; }
.jfr-sum:focus-visible{ outline:2px solid #16204A; outline-offset:3px; border-radius:6px; }

.jfr-chev{ flex:none; transition:transform .18s ease; }
.jfr-fold[open] .jfr-chev{ transform:rotate(180deg); }
.jfr-fold[open]{ padding-bottom:2px; }

/* Closed: hide the description and the requirement lists career.php prints
   after this component, so only the scannable head remains. */
.jf-role:has(.jfr-fold:not([open])) > p,
.jf-role:has(.jfr-fold:not([open])) > ul{ display:none; }

/* No :has support: leave everything visible rather than trap the content. */
@supports not selector(:has(*)){
  .jfr-fold{ border-top:0; }
  .jfr-sum{ display:none; }
  .jfr-fold > .jfj-details{ display:block; }
}

@media (max-width:640px){
  .jf-grid:has(> .jf-role){ grid-template-columns:1fr; }
  .jf-card.jf-role{ padding:18px 16px 14px; }
  .jf-role h3{ font-size:1.08rem; }
}
/* The card foot already carries a full width Apply, so the pair inside the
   facts header is a duplicate while the card is closed. The share row stays,
   shrunk right down, because a referral is worth more than the space. */
.jf-role:has(.jfr-fold:not([open])) .jfj-actions{ display:none; }

.jf-role .jf-card-foot{ margin-top:14px; padding-top:0; border-top:0; }
.jf-role .jf-share{ margin-top:14px; }

/* ===========================================================================
   JFCK - COOKIE NOTICE
   A solid navy panel across the foot of the page so it is plainly a notice
   rather than page furniture. Both buttons are the same shape, size and
   colour on purpose: refusing has to be exactly as easy as agreeing, and any
   styling that makes one of them the obvious path defeats that.
   =========================================================================== */

.jfck{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:#16204A; color:#FFFFFF;
  box-shadow:0 -10px 34px rgba(10,16,44,.32);
  padding:26px 22px calc(26px + env(safe-area-inset-bottom));
}
.jfck[hidden]{ display:none; }

.jfck-in{
  max-width:1080px; margin:0 auto;
  display:flex; flex-direction:column; gap:20px;
}

.jfck-h{
  font-size:1.35rem; font-weight:700; color:#FFFFFF;
  margin:0 0 10px; letter-spacing:-.01em;
}
.jfck-p{
  font-size:.92rem; line-height:1.65; margin:0;
  color:rgba(255,255,255,.88); max-width:74ch;
}
body[class] .jfck-p a{
  color:#FFFFFF; text-decoration:underline; text-underline-offset:3px;
  font-weight:600;
}
body[class] .jfck-p a:hover{ text-decoration-thickness:2px; }

.jfck-btns{ display:flex; gap:16px; flex-wrap:wrap; }

.jfck-btn{
  font:inherit; font-size:.92rem; font-weight:600;
  padding:13px 34px; min-width:236px;
  background:#FFFFFF; color:#16204A;
  border:1px solid #FFFFFF; border-radius:999px;
  cursor:pointer; text-align:center;
  transition:background .16s, color .16s;
}
.jfck-btn:hover{ background:#E8ECF7; }
.jfck-btn:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }

@media (max-width:640px){
  .jfck{ padding:20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .jfck-in{ gap:16px; }
  .jfck-h{ font-size:1.15rem; }
  .jfck-p{ font-size:.87rem; }
  .jfck-btns{ flex-direction:column; gap:10px; }
  .jfck-btn{ width:100%; min-width:0; padding:13px 12px; }
}

/* ===========================================================================
   JFP - MARKET CATEGORIES
   The section that stands in for a wall of provider logos. Plain cards, no
   imagery, because the value is in what it says rather than how it looks.
   =========================================================================== */

.jfp{ padding:64px 0; background:#F7F8FC; border-top:1px solid #E9ECF4; }
.jfp-h{ font-size:1.85rem; margin:6px 0 12px; letter-spacing:-.01em; }
.jfp-lede{ color:#4A5473; font-size:1rem; line-height:1.7; max-width:60ch; margin:0 0 34px; }
.jfp-sub{ font-size:1.02rem; color:#16204A; margin:30px 0 14px;
  padding-bottom:8px; border-bottom:1px solid #E1E5F0; }
.jfp-sub:first-of-type{ margin-top:0; }
.jfp-grid{ display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.jfp-card{ background:#fff; border:1px solid #E6E9F0; border-radius:12px; padding:18px 20px; }
.jfp-card b{ display:block; font-size:.98rem; color:#16204A; margin-bottom:6px; }
.jfp-card p{ margin:0; font-size:.89rem; line-height:1.65; color:#4A5473; }
.jfp-foot{ margin:30px 0 0; font-size:.85rem; line-height:1.7; color:#5A6480;
  max-width:70ch; padding-top:18px; border-top:1px solid #E1E5F0; }

@media (max-width:640px){
  .jfp{ padding:44px 0; }
  .jfp-h{ font-size:1.45rem; }
  .jfp-grid{ grid-template-columns:1fr; }
}

/* ===========================================================================
   JFS - COMPACT SHARE ROW
   Referrals are worth having on a collapsed card, so the share row stays
   visible. It is shrunk hard so it reads as a quiet footnote under the Apply
   button rather than competing with it: smaller type, tighter pills, muted
   until hover. Visible, but never the loudest thing on the card.
   =========================================================================== */

.jf-role .jf-share{
  margin-top:12px; padding-top:12px;
  border-top:1px solid #EEF0F6;
}
.jf-role .jf-share-label{
  display:block; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:#8A93AC; margin-bottom:8px; font-weight:600;
}
.jf-role .jf-share-row{
  display:flex; flex-wrap:wrap; gap:6px;
}
body[class] .jf-role .jf-share-btn{
  font-size:.76rem; font-weight:500; line-height:1;
  padding:7px 11px; border-radius:99px;
  border:1px solid #E2E6F0; background:#fff; color:#5A6480;
  text-decoration:none; transition:border-color .15s, color .15s, background .15s;
}
body[class] .jf-role .jf-share-btn:hover{
  border-color:#16204A; color:#16204A; background:#F6F7FB;
}

@media (max-width:640px){
  .jf-role .jf-share-row{ gap:5px; }
  body[class] .jf-role .jf-share-btn{ font-size:.73rem; padding:6px 9px; }
}

/* ===========================================================================
   JFED - EDITORIAL
   The reading experience for Insights and article pages. Everything here
   serves legibility: a measure of roughly 68 characters, generous leading, and
   space around headings so a long piece can be scanned as well as read.
   =========================================================================== */

/* ------------------------------------------------------------- the listing */
.jfi-hero{ padding:70px 0 42px; background:
  radial-gradient(1100px 380px at 15% -20%, rgba(232,137,26,.10), transparent 60%),
  linear-gradient(180deg,#FBFCFE 0%,#F5F7FC 100%);
  border-bottom:1px solid #E9ECF4; }
.jfi-hero h1{ font-size:clamp(2rem,4.4vw,3rem); line-height:1.1; margin:8px 0 14px;
  letter-spacing:-.02em; text-wrap:balance; max-width:20ch; }
.jfi-hero p{ font-size:1.06rem; line-height:1.7; color:#4A5473; max-width:56ch; margin:0; }

.jfi-wrap{ padding:52px 0 76px; }
.jfi-grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); }

.jfi-card{ display:flex; flex-direction:column; background:#fff;
  border:1px solid #E6E9F0; border-radius:16px; padding:26px 26px 22px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.jfi-card:hover{ transform:translateY(-3px); border-color:#D3DAEA;
  box-shadow:0 14px 34px rgba(16,24,64,.09); }

.jfi-date{ font-size:.76rem; letter-spacing:.07em; text-transform:uppercase;
  color:#8A93AC; font-weight:600; display:block; margin-bottom:10px; }
.jfi-t{ font-size:1.22rem; line-height:1.32; margin:0 0 10px; letter-spacing:-.01em; }
body[class] .jfi-t a{ color:#16204A; text-decoration:none; }
body[class] .jfi-card:hover .jfi-t a{ text-decoration:underline; text-underline-offset:3px; }
.jfi-s{ font-size:.93rem; line-height:1.66; color:#4A5473; margin:0 0 18px; flex:1; }
body[class] .jfi-more{ font-size:.86rem; font-weight:650; color:#16204A;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
body[class] .jfi-more:hover{ gap:10px; }
.jfi-more svg{ transition:transform .18s ease; }
.jfi-card:hover .jfi-more svg{ transform:translateX(3px); }

/* the first piece gets the room it deserves */
.jfi-grid > .jfi-card:first-child{ grid-column:1 / -1; padding:34px 34px 30px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%); }
.jfi-grid > .jfi-card:first-child .jfi-t{ font-size:1.7rem; max-width:24ch; }
.jfi-grid > .jfi-card:first-child .jfi-s{ font-size:1.02rem; max-width:62ch; }

.jfi-empty{ text-align:center; padding:70px 24px; border:1px dashed #D9DEEA;
  border-radius:16px; background:#FBFCFE; }
.jfi-empty h2{ font-size:1.3rem; margin:0 0 10px; }
.jfi-empty p{ color:#5A6480; line-height:1.7; max-width:52ch; margin:0 auto; }
/* -------------------------------------------------------- the article page */
.jfa{ padding:0 0 80px; }
.jfa-wrap{ max-width:none; }
.jfa-wrap > *{ max-width:720px; margin-left:auto; margin-right:auto; }

.jfa-crumb{ padding:26px 0 0; font-size:.83rem; color:#8A93AC;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
body[class] .jfa-crumb a{ color:#5A6480; text-decoration:none; }
body[class] .jfa-crumb a:hover{ color:#16204A; text-decoration:underline; }
.jfa-crumb span[aria-hidden]{ color:#C9D0E4; }

.jfa-h1{ font-size:clamp(2rem,4.6vw,2.9rem); line-height:1.13; letter-spacing:-.022em;
  margin:26px 0 16px; text-wrap:balance; }

.jfa-meta{ font-size:.83rem; color:#78829E; letter-spacing:.02em;
  padding-bottom:22px; border-bottom:1px solid #EDEFF6; margin:0 0 30px;
  display:flex; gap:9px; flex-wrap:wrap; align-items:center; }

.jfa-lede{ font-size:1.22rem; line-height:1.62; color:#39415C; font-weight:400;
  margin:0 0 34px; letter-spacing:-.005em; }

/* the body: the part that has to be a pleasure to read */
.jfa-body{ font-size:1.075rem; line-height:1.82; color:#2C3450; }
.jfa-body p{ margin:0 0 24px; }
.jfa-body h2{ font-size:1.52rem; line-height:1.26; letter-spacing:-.015em;
  margin:48px 0 16px; color:#111A3D; text-wrap:balance; }
.jfa-body h3{ font-size:1.18rem; line-height:1.35; margin:36px 0 12px; color:#16204A; }
.jfa-body ul, .jfa-body ol{ margin:0 0 24px; padding-left:24px; }
.jfa-body li{ margin-bottom:11px; padding-left:4px; }
.jfa-body li::marker{ color:#B98A3E; }
body[class] .jfa-body a{ color:#16204A; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px; }
body[class] .jfa-body a:hover{ text-decoration-thickness:2px; }
.jfa-body strong{ color:#111A3D; font-weight:650; }
.jfa-body img{ width:100%; height:auto; border-radius:14px; margin:14px 0 28px;
  border:1px solid #EDEFF6; }
.jfa-body hr{ border:0; border-top:1px solid #E6E9F0; margin:42px 0; }
.jfa-body blockquote{ margin:32px 0; padding:4px 0 4px 26px;
  border-left:3px solid #E8891A; }
.jfa-body blockquote p{ font-size:1.16rem; line-height:1.65; color:#39415C;
  font-style:italic; margin:0; }

/* first paragraph sits closer to the lede */
.jfa-body > p:first-child{ margin-top:0; }
/* ------------------------------------------- share, related, next and CTA */
.jfa-share{ display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin:40px 0 0; padding-top:24px; border-top:1px solid #EDEFF6; }
.jfa-share-l{ font-size:.74rem; letter-spacing:.07em; text-transform:uppercase;
  color:#8A93AC; font-weight:600; margin-right:4px; }
body[class] .jfa-share-b{ font-size:.8rem; font-weight:500; padding:8px 14px;
  border:1px solid #E2E6F0; border-radius:99px; color:#5A6480; text-decoration:none;
  transition:border-color .15s, color .15s, background .15s; }
body[class] .jfa-share-b:hover{ border-color:#16204A; color:#16204A; background:#F6F7FB; }

.jfa-cta{ margin:48px auto; padding:32px 34px; border-radius:16px;
  background:linear-gradient(180deg,#F7F8FC 0%,#F1F4FA 100%); border:1px solid #E3E8F3; }
.jfa-cta h2{ font-size:1.24rem; margin:0 0 10px; letter-spacing:-.01em; }
.jfa-cta p{ font-size:.96rem; line-height:1.7; color:#4A5473; margin:0 0 18px; max-width:58ch; }
.jfa-cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.jfa-fine{ font-size:.8rem !important; color:#78829E !important; margin:18px 0 0 !important;
  padding-top:16px; border-top:1px solid #E3E8F3; }

.jfa-rel{ margin:52px auto 0; }
.jfa-rel h2{ font-size:1.2rem; margin:0 0 18px; }
.jfa-rel-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
body[class] .jfa-rel-card{ display:block; padding:20px; border:1px solid #E6E9F0;
  border-radius:13px; background:#fff; text-decoration:none;
  transition:transform .18s, box-shadow .18s, border-color .18s; }
body[class] .jfa-rel-card:hover{ transform:translateY(-2px); border-color:#D3DAEA;
  box-shadow:0 10px 26px rgba(16,24,64,.08); }
.jfa-rel-card b{ display:block; font-size:.98rem; line-height:1.35; color:#16204A; margin-bottom:7px; }
.jfa-rel-card span{ display:block; font-size:.86rem; line-height:1.6; color:#5A6480; }

.jfa-pn{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:40px auto 0;
  padding-top:26px; border-top:1px solid #EDEFF6; }
body[class] .jfa-pn a{ display:block; padding:18px 20px; border:1px solid #E6E9F0;
  border-radius:13px; text-decoration:none; background:#fff; transition:border-color .18s; }
body[class] .jfa-pn a:hover{ border-color:#16204A; }
.jfa-pn a.n{ text-align:right; }
.jfa-pn span{ display:block; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  color:#8A93AC; font-weight:600; margin-bottom:6px; }
.jfa-pn b{ display:block; font-size:.95rem; line-height:1.4; color:#16204A; }

.jfa-back{ margin:36px auto 0; font-size:.88rem; }

@media (max-width:640px){
  .jfa-h1{ font-size:1.72rem; }
  .jfa-lede{ font-size:1.08rem; }
  .jfa-body{ font-size:1.02rem; line-height:1.75; }
  .jfa-body h2{ font-size:1.3rem; margin:36px 0 12px; }
  .jfa-cta{ padding:24px 20px; }
  .jfa-pn{ grid-template-columns:1fr; }
  .jfa-pn a.n{ text-align:left; }
  .jfi-hero{ padding:48px 0 32px; }
  .jfi-grid > .jfi-card:first-child{ padding:26px 22px 22px; }
  .jfi-grid > .jfi-card:first-child .jfi-t{ font-size:1.32rem; }
}
/* ===========================================================================
   JFL — article lead capture
   Sits at the end of an article, where the reader has just understood the
   problem. Two columns on desktop so the form is visible without scrolling
   past a wall of reassurance; stacked on mobile with the form first.
   =========================================================================== */

.jfl{margin:56px 0 8px}
.jfl-in{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid #E4E8F2;border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:0 10px 34px rgba(20,28,56,.07)}

.jfl-copy{padding:32px 30px;background:linear-gradient(160deg,#0E1836 0%,#1B2A57 100%);color:#fff}
.jfl-copy .jf-eyebrow{color:#D9B45B;letter-spacing:.09em;font-size:.72rem;
  text-transform:uppercase;font-weight:700;display:block;margin-bottom:10px}
.jfl-copy h2{color:#fff;font-size:1.42rem;line-height:1.25;margin:0 0 12px;letter-spacing:-.01em}
.jfl-copy p{color:#C3CBE2;font-size:.965rem;line-height:1.68;margin:0 0 16px}
.jfl-pts{list-style:none;margin:0 0 16px;padding:0}
.jfl-pts li{position:relative;padding-left:24px;margin-bottom:9px;
  color:#DDE3F2;font-size:.925rem;line-height:1.55}
.jfl-pts li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  border-radius:50%;background:#D9B45B}
.jfl-alt{font-size:.875rem;color:#9FAAC8;margin:0}
.jfl-alt a{color:#D9B45B;text-decoration:underline;text-underline-offset:2px}
.jfl-alt a:hover{color:#EBCB80}

.jfl-form{padding:30px;display:block}
.jfl-hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}
.jfl-f{display:block;margin-bottom:14px}
.jfl-f > span{display:block;font-size:.8rem;font-weight:600;color:#3A4468;
  margin-bottom:6px;letter-spacing:.01em}
.jfl-f input,.jfl-f select{width:100%;box-sizing:border-box;padding:11px 13px;
  font:inherit;font-size:.955rem;color:#141C38;background:#FBFCFE;
  border:1px solid #D7DEEE;border-radius:9px;transition:border-color .15s,box-shadow .15s}
.jfl-f input:focus,.jfl-f select:focus{outline:none;border-color:#1B2A57;
  box-shadow:0 0 0 3px rgba(27,42,87,.11);background:#fff}
.jfl-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jfl-row .jfl-f{margin-bottom:14px}

.jfl-btn{width:100%;margin-top:4px;padding:13px 18px;font:inherit;font-size:1rem;
  font-weight:700;color:#0E1836;cursor:pointer;border:0;border-radius:10px;
  background:linear-gradient(135deg,#E3C46E 0%,#C79F42 100%);
  box-shadow:0 4px 14px rgba(199,159,66,.32);transition:transform .15s,box-shadow .15s}
.jfl-btn:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(199,159,66,.42)}
.jfl-btn:active{transform:none}
.jfl-btn:focus-visible{outline:3px solid #1B2A57;outline-offset:2px}

.jfl-err{margin:0 0 14px;padding:11px 13px;border-radius:9px;font-size:.9rem;
  line-height:1.5;color:#8A2020;background:#FDF1F1;border:1px solid #F0C9C9}
.jfl-fine{margin:14px 0 0;font-size:.775rem;line-height:1.6;color:#6B7593}
.jfl-fine a{color:#1B2A57;text-decoration:underline;text-underline-offset:2px}

.jfl-done{padding:30px 32px;border:1px solid #CDE6D4;border-radius:18px;
  background:linear-gradient(160deg,#F4FBF6 0%,#EAF6EE 100%)}
.jfl-done h2{margin:0 0 8px;font-size:1.34rem;color:#1A5233;letter-spacing:-.01em}
.jfl-done p{margin:0;font-size:.985rem;line-height:1.7;color:#2F5A41}
.jfl-done a{color:#1A5233;font-weight:700;text-decoration:underline;text-underline-offset:2px}

@media (max-width:820px){
  .jfl{margin-top:40px}
  .jfl-in{grid-template-columns:1fr}
  /* form first on a phone: the ask should not be below three paragraphs */
  .jfl-copy{order:2;padding:26px 22px}
  .jfl-form{order:1;padding:24px 22px;border-bottom:1px solid #EDF0F7}
  .jfl-copy h2{font-size:1.24rem}
  .jfl-row{grid-template-columns:1fr;gap:0}
  .jfl-done{padding:24px 22px}
}

/* ===========================================================================
   JFFIX — defects found in UI/UX testing of the article page, 17 Aug 2026.
   Appended last so it wins on source order without needing !important.
   =========================================================================== */

/* 1. CENTRING. `.jfa-wrap > *` sets margin-left/right:auto, but several child
   rules use the `margin` shorthand with 0 sides, which silently resets it.
   The result was an H1, lead block and back link sitting 320px to the left of
   the body copy they belong to. Raising specificity to (0,3,0) restores the
   auto margins without touching anyone's vertical rhythm. */
.jfa .jfa-wrap > *{ margin-left:auto; margin-right:auto; }

/* 2. MEASURE. Body copy was rendering 82 characters per line (measured with
   canvas against Inter at 17.2px, not estimated). Comfortable reading is
   60-75. 640px puts it at 73. The lead block is deliberately left wider so it
   reads as a distinct call to action rather than another paragraph. */
.jfa .jfa-wrap > *{ max-width:640px; }
.jfa .jfa-wrap > .jfl{ max-width:860px; }

/* 3. CONTRAST. Both of these failed WCAG 2.1 AA for normal-size text.
   The byline measured 3.83:1 and the breadcrumb links 3.07:1. */
.jfa-meta{ color:#616B87; }                 /* was #78829E, 3.83:1 -> 5.3:1  */

/* The breadcrumb link rule was being beaten by a same-specificity colour rule
   later in the sheet, so links rendered at the parent's #8A93AC instead of the
   #5A6480 they asked for. Specificity raised, colour darkened. */
.jfa .jfa-crumb a{ color:#56607C; }         /* rendered 3.07:1 -> 6.25:1     */
.jfa .jfa-crumb a:hover{ color:#16204A; }

/* 4. TARGET SIZE (WCAG 2.2 AA, 24x24 minimum). Breadcrumb links measured
   49x21 and the back link 88x17. Padding rather than height so the text
   baseline does not shift. */
.jfa .jfa-crumb a,
.jfa .jfa-back a{ display:inline-block; padding-top:4px; padding-bottom:4px; }

/* 5. iOS ZOOM. Any input under 16px makes mobile Safari zoom the whole page
   on focus, which throws the reader out of the layout mid-form. */
.jfl-f input, .jfl-f select{ font-size:16px; }

/* The lead block is wider now, so the two-up row has room to stay two-up. */
@media (min-width:821px){
  .jfl-row{ grid-template-columns:1fr 1fr; gap:14px; }
}

/* 6. Keyboard focus must be obvious on every control in the block, not just
   the button. A ring plus a border change survives high-contrast modes. */
.jfl-f input:focus-visible,
.jfl-f select:focus-visible{
  outline:3px solid #1B2A57; outline-offset:1px; border-color:#1B2A57; background:#fff;
}
.jfl-alt a:focus-visible,
.jfl-fine a:focus-visible,
.jfl-done a:focus-visible{ outline:3px solid #D9B45B; outline-offset:2px; border-radius:3px; }

/* 7. Respect a reduced-motion preference: the button lift is decorative. */
@media (prefers-reduced-motion:reduce){
  .jfl-btn, .jfl-btn:hover{ transition:none; transform:none; }
}

.jfl-hint{ font-weight:400; color:#6B7590; letter-spacing:0; }

/* ===========================================================================
   JFA-T - article tables. Mostly fee comparisons, so the priority is that a
   reader can scan down a money column and that nothing forces the page
   sideways on a phone.
   =========================================================================== */

.jfa-tw{ margin:28px 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid #E4E8F2; border-radius:12px; background:#fff; }
.jfa-tw{ background-image:linear-gradient(to right, rgba(20,28,56,.055), rgba(20,28,56,0) 22px);
  background-repeat:no-repeat; background-position:right center; background-size:22px 100%; }

.jfa-t{ width:100%; border-collapse:collapse; font-size:.955rem; line-height:1.55; }

.jfa-t thead th{
  background:#F7F9FD; color:#141C38; font-weight:700; text-align:left;
  font-size:.855rem; letter-spacing:.03em; text-transform:uppercase;
  padding:12px 15px; border-bottom:2px solid #E4E8F2; white-space:nowrap;
}
.jfa-t tbody th{ font-weight:600; color:#1B2A57; text-align:left; }
.jfa-t tbody th,
.jfa-t tbody td{ padding:12px 15px; border-bottom:1px solid #EEF1F8; color:#2C3450;
  vertical-align:top; }
.jfa-t tbody tr:last-child th,
.jfa-t tbody tr:last-child td{ border-bottom:0; }
.jfa-t tbody tr:nth-child(even) th,
.jfa-t tbody tr:nth-child(even) td{ background:#FBFCFE; }

.jfa-body .jfa-tw{ max-width:100%; }

@media (max-width:600px){
  .jfa-t{ font-size:.9rem; }
  .jfa-t thead th{ padding:10px 12px; font-size:.8rem; }
  .jfa-t tbody th,
  .jfa-t tbody td{ padding:10px 12px; }
}

/* ===========================================================================
   JFIFIX - insights card titles.

   `.jf h2` sets clamp(1.9rem,3.6vw,2.85rem) at specificity (0,1,1), which
   beats `.jfi-t` at (0,1,0). Card titles were therefore rendering at 45.6px
   inside a 363px column, wrapping to six lines. The featured card looked
   right only because its selector is (0,3,0), which is why this stayed
   invisible while the site had a single article.
   =========================================================================== */
.jfi-card .jfi-t{ font-size:1.22rem; line-height:1.32; letter-spacing:-.01em; }
.jfi-grid > .jfi-card:first-child .jfi-t{ font-size:1.62rem; line-height:1.22; }
@media (max-width:900px){
  .jfi-card .jfi-t{ font-size:1.14rem; }
  .jfi-grid > .jfi-card:first-child .jfi-t{ font-size:1.34rem; }
}

/* ===========================================================================
   JFE - eligibility self-check
   =========================================================================== */

.jfe-hero{background:linear-gradient(160deg,#0E1836 0%,#1B2A57 100%);padding:56px 0 52px;color:#fff}
.jfe-hero .jf-eyebrow{color:#D9B45B;letter-spacing:.09em;font-size:.74rem;
  text-transform:uppercase;font-weight:700;display:block;margin-bottom:12px}
.jfe-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.14;
  letter-spacing:-.02em;margin:0 0 14px;max-width:19ch;text-wrap:balance}
.jfe-hero p{color:#C3CBE2;font-size:1.05rem;line-height:1.7;max-width:56ch;margin:0}

.jfe-wrap{max-width:720px;margin-left:auto;margin-right:auto;padding:44px 0 60px}
.jfe-form{background:#fff;border:1px solid #E4E8F2;border-radius:16px;padding:30px;
  box-shadow:0 10px 34px rgba(20,28,56,.06)}

.jfe-step{position:relative;padding:0 0 24px 44px;margin-bottom:22px;border-bottom:1px solid #F1F4FA}
.jfe-step:last-of-type{border-bottom:0;margin-bottom:8px}
.jfe-n{position:absolute;left:0;top:0;width:29px;height:29px;border-radius:50%;
  background:#1B2A57;color:#fff;font-size:.86rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.jfe-lead{display:block;font-size:.95rem;font-weight:600;color:#1B2A57;margin-bottom:14px}

.jfe-f{display:block;margin-bottom:14px}
.jfe-f > span{display:block;font-size:.9rem;font-weight:600;color:#2C3450;margin-bottom:7px}
.jfe-hint{font-weight:400;color:#6B7590}
.jfe-f select,.jfe-f input{width:100%;box-sizing:border-box;padding:12px 13px;
  font:inherit;font-size:16px;color:#141C38;background:#FBFCFE;
  border:1px solid #D7DEEE;border-radius:9px}
.jfe-f select:focus-visible,.jfe-f input:focus-visible{outline:3px solid #1B2A57;
  outline-offset:1px;border-color:#1B2A57;background:#fff}
.jfe-bad select,.jfe-bad input{border-color:#C0392B;background:#FDF6F5}
.jfe-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* partner count only matters for partnerships, and needs no JavaScript */
.jfe-partners{display:none}
.jfe-step:has(#eStruct option[value="partnership"]:checked) .jfe-partners,
.jfe-step:has(#eStruct option[value="llp"]:checked) .jfe-partners{display:block}

.jfe-btn{width:100%;margin-top:6px;padding:14px 18px;font:inherit;font-size:1.02rem;
  font-weight:700;color:#0E1836;cursor:pointer;border:0;border-radius:10px;
  background:linear-gradient(135deg,#E3C46E 0%,#C79F42 100%);
  box-shadow:0 4px 14px rgba(199,159,66,.32);transition:transform .15s,box-shadow .15s}
.jfe-btn:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(199,159,66,.42)}
.jfe-btn:focus-visible{outline:3px solid #1B2A57;outline-offset:2px}

.jfe-err{margin:0 0 18px;padding:12px 15px;border-radius:9px;font-size:.94rem;
  line-height:1.55;color:#8A2020;background:#FDF1F1;border:1px solid #F0C9C9}
.jfe-fine{margin:16px 0 0;font-size:.8rem;line-height:1.65;color:#6B7593}
.jfe-fine a{color:#1B2A57;text-decoration:underline;text-underline-offset:2px}
.jfe-hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}

.jfe-result{background:#fff;border:1px solid #E4E8F2;border-radius:16px;padding:32px;
  box-shadow:0 10px 34px rgba(20,28,56,.06);border-top:4px solid #1B2A57}
.jfe-r-talk{border-top-color:#2E7D4F}
.jfe-r-early{border-top-color:#C79F42}
.jfe-r-unsure{border-top-color:#4A6FA5}
.jfe-badge{display:inline-block;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:#6B7593;margin-bottom:10px}
.jfe-result h2{margin:0 0 12px;font-size:1.55rem;letter-spacing:-.015em;color:#141C38}
.jfe-result p{font-size:1.02rem;line-height:1.72;color:#2C3450;margin:0 0 14px;max-width:60ch}
.jfe-sub{color:#4A5473!important;font-size:.98rem!important}
.jfe-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0}

@media (max-width:700px){
  .jfe-hero{padding:40px 0 38px}
  .jfe-wrap{padding:30px 0 46px}
  .jfe-form,.jfe-result{padding:22px}
  .jfe-row{grid-template-columns:1fr;gap:0}
  .jfe-step{padding-left:38px}
  .jfe-actions .jf-btn{width:100%;text-align:center}
}

/* JFE-GAP: .jf-sec already supplies 96px vertical padding, so the
   wrapper was doubling it and leaving a 140px hole under the hero. */
.jf-sec .jfe-wrap{ padding-top:0; padding-bottom:0; }
@media (max-width:700px){ .jf-sec .jfe-wrap{ padding:0; } }

/* ===========================================================================
   JFSKIP - the skip link was parked at left:-9999px and stayed there on
   focus, so a keyboard user hit an invisible stop that appeared to do
   nothing. Worse than having no skip link at all. It also had 1.24:1
   contrast, which would have made it unreadable even on screen.
   =========================================================================== */
.jfh-skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  padding:12px 20px; border-radius:0 0 10px 0;
  background:#0E1836; color:#ffffff; font-weight:650;
  text-decoration:underline; text-underline-offset:3px;
}
.jfh-skip:focus,
.jfh-skip:focus-visible{
  left:0;                       /* the whole point: become visible */
  outline:3px solid #D9B45B; outline-offset:-3px;
}

/* ===========================================================================
   JFHEAD-ORDER - nav and footer labels were <h2> and <h4>, which put two
   headings before every page <h1> and skipped a level in the footer.
   They are navigation labels, not document structure, so they are now spans.
   These rules reproduce the previous appearance exactly.
   =========================================================================== */
.jfh-group .jfh-group-t{
  display:block; font-size:.72rem; font-weight:700; color:#6B6E86;
  letter-spacing:.09em; text-transform:uppercase; line-height:1.06;
  margin:0 0 6px;
}
.jf-foot-grid .jf-foot-t{
  display:block; font-size:.76rem; font-weight:650; color:#ffffff;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.06;
  margin:0 0 18px;
}

/* JFSKIP-SPEC -------------------------------------------------------------
   `.jf a` is (0,1,1) and outranked `.jfh-skip` at (0,1,0), so the background
   applied but the colour did not, leaving dark text on a dark panel. Adding
   the `.jf` prefix takes this to (0,2,1), the same technique already used
   elsewhere in this file for the buttons.
   ------------------------------------------------------------------------- */
.jf a.jfh-skip,
.jf a.jfh-skip:link,
.jf a.jfh-skip:visited{ color:#ffffff; background:#0E1836; }
.jf a.jfh-skip:focus,
.jf a.jfh-skip:focus-visible{ color:#ffffff; background:#0E1836; left:0; }

/* ===========================================================================
   JFMOBILE-FIX

   1. iOS Safari zooms the whole viewport when a text field under 16px is
      tapped. Seven typable fields on the homepage were 13.3px or 15.5px, so
      tapping any of them threw the page sideways. Sliders, checkboxes and
      buttons are unaffected and are deliberately left alone.
   2. The menu button was 38x32 and footer links 32px tall, both under the
      44px target people hit reliably on a phone.
   =========================================================================== */
@media (max-width:820px){

  input[type="text"], input[type="tel"], input[type="email"],
  input[type="number"], input[type="search"], input[type="password"],
  input[type="url"], input:not([type]), select, textarea{
    font-size:16px;
  }

  .jfh-burger{ min-width:44px; min-height:44px; }

  footer a{ display:inline-block; padding-top:6px; padding-bottom:6px; }
}

/* ===========================================================================
   JFMOBILE-FIX-2

   The first pass used bare element selectors, which lost to the existing
   class rules. Sixth time this stylesheet has done that today. Targeting the
   actual classes instead:
     .jfx-select     - the homepage purpose dropdown, still 15.52px
     .jf-foot-grid a - footer links, padding was being overridden at 4px
   =========================================================================== */
@media (max-width:820px){
  .jf .jfx-select,
  .jf .jfx-form select,
  .jf .jfx-form input{ font-size:16px; }

  /* 23.8px line-height plus 10 top and bottom clears 44 */
  .jf .jf-foot-grid p a,
  .jf .jf-foot-grid a{ display:inline-block; padding-top:10px; padding-bottom:10px; }
}