/* BrokerStaffer site styles
   Layout: every page holds the desktop layout (.bs-desktop) and the phone layout (.bs-mobile).
   Phones and tablets (below 1180px) get the phone layout; laptops and up get the desktop layout. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-latin-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-latin-800.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-latin-400.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-latin-500.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-latin-600.woff2) format('woff2')}

/* base, from the approved designs */
body{margin:0;background:#FFFFFF;font-family:'Poppins',system-ui,sans-serif;color:#1F2124}
a{color:#0066FF;text-decoration:none}a:hover{color:#0052CC}
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif;text-wrap:balance}
body *{text-wrap:pretty}
h1,h2,h3,h1 *,h2 *,h3 *{text-wrap:balance}
input[type=range]{accent-color:#0066FF;width:100%;height:28px;cursor:pointer}
button{font-family:inherit;cursor:pointer}
img{display:block}
body{text-wrap-style:pretty}h1,h2,h3,h4,blockquote{text-wrap-style:balance}
.swipe{scrollbar-width:none}.swipe::-webkit-scrollbar{display:none}
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif}
details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}details[open] .plus{transform:rotate(45deg)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:88px}
.bs-mobile [id]{scroll-margin-top:72px}
.bs-faq-q:focus-visible,.bs-menu-btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid #0066FF;outline-offset:3px}

/* switch between layouts */
.bs-mobile{display:none}
@media (max-width:1179px){
  .bs-desktop{display:none}
  .bs-mobile{display:block}
  .bs-mobile>.bs-root{width:auto!important}
  /* tablets: phone layout in a centered column, backgrounds stay full width */
  .bs-mobile{--g:max(20px,calc((100vw - 680px) / 2))}
  .bs-mobile>.bs-root>section,.bs-mobile>.bs-root>header,.bs-mobile>.bs-root>footer{padding-left:var(--g)!important;padding-right:var(--g)!important}
  .bs-mobile .swipe{margin-left:calc(var(--g) * -1)!important;margin-right:calc(var(--g) * -1)!important;padding-left:var(--g)!important;padding-right:var(--g)!important;scroll-padding-left:var(--g)!important}
  .bs-menu{padding-left:var(--g);padding-right:var(--g)}
}
/* side margins: content stays at the designed 1200px and is centered on wide screens */
@media (min-width:1180px){
  .bs-desktop>.bs-root{min-width:0!important}
  .bs-desktop>.bs-root>section,.bs-desktop>.bs-root>header,.bs-desktop>.bs-root>footer{padding-left:max(64px,calc((100% - 1200px) / 2))!important;padding-right:max(64px,calc((100% - 1200px) / 2))!important}
}

/* the smallest phones: headlines one step smaller so long words never overflow */
@media (max-width:349px){.bs-mobile h1{font-size:28px!important}.bs-mobile h2{font-size:24px!important}}
/* phone menu */
.bs-menu{position:fixed;top:60px;left:0;right:0;bottom:0;z-index:49;box-sizing:border-box;background:#FFFFFF;padding:8px 20px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.bs-menu.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.bs-menu-links{display:flex;flex-direction:column}
.bs-menu-links a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid #E3E8F2;font-size:21px;font-weight:600;letter-spacing:-0.01em;color:#1F2124}
.bs-menu-links a::after{content:"\2192";font-weight:500;color:#9AA0AA}
.bs-menu-links a[aria-current="page"]{color:#0066FF}
.bs-menu-links a[aria-current="page"]::after{color:#0066FF}
.bs-menu-cta{display:flex;flex-direction:column;gap:10px}
.bs-menu-cta a{padding:16px 24px;border-radius:30px;background:#0066FF;color:#FFFFFF;font-size:16px;font-weight:600;text-align:center}
.bs-menu-cta a:hover{color:#FFFFFF;background:#0052CC}
.bs-menu-cta span{font-size:13px;color:#6B7280;text-align:center}
body.bs-menu-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bs-menu,.bs-menu.is-open{transition:none}}

/* ---------- motion ----------
   Runs only when <html> has the bs-anim class, which a one-line script in each page's <head> adds unless the
   visitor has asked their device for reduced motion. Without it (or without JavaScript) every page shows
   complete and still. Hooks: data-load (page opening), data-rv (reveal on scroll, kind in the value),
   data-i (stagger order), data-rf (homepage hero replies), data-cta (call-to-action buttons). */
@keyframes bsUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bsPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes bsRing{0%{box-shadow:0 0 0 0 rgba(19,115,51,.45)}100%{box-shadow:0 0 0 10px rgba(19,115,51,0)}}
@keyframes bsRingBlue{0%{box-shadow:0 0 0 0 rgba(0,102,255,.55)}100%{box-shadow:0 0 0 9px rgba(0,102,255,0)}}
@keyframes bsSlide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes bsFade{from{opacity:0}to{opacity:1}}
@keyframes bsFlash{0%,100%{background-color:#EEF4FF}35%{background-color:#D2E2FF}}
[data-i="1"]{--i:1}[data-i="2"]{--i:2}[data-i="3"]{--i:3}[data-i="4"]{--i:4}[data-i="5"]{--i:5}[data-i="6"]{--i:6}[data-i="7"]{--i:7}[data-i="8"]{--i:8}[data-i="9"]{--i:9}[data-i="10"]{--i:10}
html.bs-anim [data-load]{animation:bsUp .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 80ms)}
html.bs-anim [data-rv]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
html.bs-anim [data-rv="row"]{transition-duration:.45s;transition-delay:calc(var(--i,0) * 55ms)}
html.bs-anim [data-rv].bs-pend{opacity:0;transform:translateY(22px)}
html.bs-anim [data-rv="row"].bs-pend{transform:translateX(-12px)}
html.bs-anim [data-rv="logo"].bs-pend{transform:translateY(8px)}
html.bs-anim [data-rv].bs-done{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;transition-delay:0s}
html.bs-anim .bs-in [data-pulse]{animation:bsRingBlue 1.4s ease-out .5s 4}
html.bs-anim [data-flash].bs-in{animation:bsFlash 1.4s ease .55s}
html.bs-anim .bs-faq-a{animation:bsFade .3s ease}
html.bs-anim details[open]>*:not(summary){animation:bsFade .3s ease}
html.bs-anim .bs-menu.is-open .bs-menu-links a{animation:bsUp .4s cubic-bezier(.2,.7,.2,1) both}
html.bs-anim .bs-menu.is-open .bs-menu-links a:nth-child(2){animation-delay:35ms}html.bs-anim .bs-menu.is-open .bs-menu-links a:nth-child(3){animation-delay:70ms}html.bs-anim .bs-menu.is-open .bs-menu-links a:nth-child(4){animation-delay:105ms}html.bs-anim .bs-menu.is-open .bs-menu-links a:nth-child(5){animation-delay:140ms}html.bs-anim .bs-menu.is-open .bs-menu-links a:nth-child(6){animation-delay:175ms}
.bs-root>header{transition:box-shadow .25s ease}
/* homepage hero: a new reply fades in every few seconds */
[data-rf-wrap]{transition:opacity .28s ease}
[data-rf-wrap].bs-fading{opacity:0}
html.bs-anim [data-rf="tag"].bs-pop{animation:bsPop .5s cubic-bezier(.3,1.5,.5,1) both,bsRing 1s ease-out .5s 1}
/* final call to action: drifting light behind the banner, a sweep and a ring on the button */
@keyframes bsDrift{from{transform:translate3d(-6%,-4%,0) rotate(0deg)}to{transform:translate3d(6%,5%,0) rotate(10deg)}}
@keyframes bsShine{0%{left:-60%}22%,100%{left:135%}}
@keyframes bsRingWhite{0%{box-shadow:0 0 0 0 rgba(255,255,255,.4)}100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
html.bs-anim .bs-root>section[id$="book"]{position:relative;overflow:hidden;isolation:isolate}
html.bs-anim .bs-root>section[id$="book"]::before{content:"";position:absolute;inset:-45%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 28% 38%,rgba(255,255,255,.13),transparent 42%),radial-gradient(circle at 76% 66%,rgba(0,35,130,.26),transparent 48%);animation:bsDrift 20s ease-in-out infinite alternate}
/* every call-to-action button: a light sweep, a soft ring when it first comes into view, a press and a ripple when clicked */
@keyframes bsRingBlue2{0%{box-shadow:0 0 0 0 rgba(0,102,255,.28)}100%{box-shadow:0 0 0 10px rgba(0,102,255,0)}}
@keyframes bsRingDark{0%{box-shadow:0 0 0 0 rgba(31,33,36,.2)}100%{box-shadow:0 0 0 10px rgba(31,33,36,0)}}
@keyframes bsRipple{to{transform:scale(1);opacity:0}}
html.bs-anim [data-cta]{position:relative;overflow:hidden;transition:transform .14s ease,box-shadow .25s ease,filter .25s ease}
html.bs-anim [data-cta]::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:30%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);animation:bsShine 7s ease-in-out 1.5s infinite}
html.bs-anim [data-cta="light"]::after{background:linear-gradient(100deg,transparent,rgba(0,102,255,.11),transparent)}
html.bs-anim [data-cta-d="1"]::after{animation-delay:3.2s}
html.bs-anim [data-cta-d="2"]::after{animation-delay:4.9s}
html.bs-anim [data-cta-d="3"]::after{animation-delay:.6s}
html.bs-anim [data-cta].bs-ring{animation:bsRingBlue2 1.6s ease-out .4s 1}
html.bs-anim [data-cta][data-cta-ring="white"].bs-ring{animation-name:bsRingWhite}
html.bs-anim [data-cta][data-cta-ring="dark"].bs-ring{animation-name:bsRingDark}
html.bs-anim [data-cta]:active{transform:scale(.985)}
/* hover: a call-to-action button swaps its background and text colors */
@media (hover:hover){html.bs-anim [data-cta],html [data-cta]{transition:transform .14s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease}html [data-cta]:hover{background:var(--cta-fg,#FFFFFF)!important;color:var(--cta-bg,#0066FF)!important;filter:none!important;transform:none!important}html [data-cta="solid"]:hover{box-shadow:inset 0 0 0 2px var(--cta-bg,#0066FF)!important}html [data-cta="light"]:hover{border-color:var(--cta-fg,#0066FF)!important}}
.bs-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.18;transform:scale(0);animation:bsRipple .6s ease-out forwards}
html.bs-scrolled .bs-root>header{box-shadow:0 8px 24px rgba(16,40,100,.08)}
.bs-desktop a[data-hover]{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .bs-desktop a[data-hover="card"]:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(16,40,100,.14)!important}
  .bs-desktop a[data-hover="btn"]:hover{transform:translateY(-1px);filter:brightness(1.07)}
}