/* Theme and global foundation */
:root{
  --navy:#092b52;
  --ink:#0b2340;
  --blue:#1767ae;
  --bright:#4f9cda;
  --pale:#f4f9fd;
  --line:#cbdbe9;
  --white:#fff;
  --font-body:"DM Sans",sans-serif;
  --font-display:"Playfair Display",Georgia,serif
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font:16px/1.6 var(--font-body)
}

h2,h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08
}

h2 em{
  color:#76b8e6;
  font-weight:inherit
}

.page-width{
  width:min(1120px,calc(100% - 48px));
  margin:auto
}

.section-space{
  padding:120px 0
}

/* Header and navigation */
.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:10;
  padding:7px 0;
  border-bottom:1px solid transparent;
  background:transparent;
  box-shadow:none;
  transition:background-color .3s,box-shadow .3s
}

.site-header.is-scrolled{
  border-bottom-color:rgba(9,43,82,.1);
  background:#fff;
  box-shadow:0 8px 24px rgba(2,20,39,.14)
}

.nav-shell{
  width:calc(100% - 24px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:auto
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none
}

.brand>span:last-child{
  display:grid;
  line-height:1
}

.brand strong{
  font-size:14px;
  letter-spacing:.11em
}

.brand small{
  margin-top:5px;
  font-size:7px;
  font-weight:700;
  letter-spacing:.43em
}

.brand-logo-wrap{
  display:grid;
  width:54px;
  height:58px;
  flex:0 0 auto;
  place-items:center;
  overflow:visible
}

.brand-logo{
  display:block;
  width:54px;
  height:58px;
  object-fit:contain
}

.main-nav{
  display:flex;
  align-items:center;
  gap:28px
}

.main-nav a{
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-decoration:none
}

.main-nav a:hover{
  color:#bfe4ff
}

.nav-cta{
  padding:10px 17px!important;
  border:1px solid #fff;
  border-radius:999px;
  background:#fff;
  box-shadow:0 5px 16px rgba(2,20,39,.18);
  color:var(--navy)!important;
  text-shadow:none!important
}

.nav-cta span{
  margin-left:6px
}

.site-header.is-scrolled .brand,
.site-header.is-scrolled .main-nav a{
  color:var(--navy)
}

.site-header.is-scrolled .main-nav a:hover{
  color:var(--blue)
}

.site-header.is-scrolled .nav-cta{
  border-color:var(--navy);
  background:var(--navy);
  color:#fff!important
}

.menu-toggle{
  display:none
}

/* Shared typography, buttons, and links */
.eyebrow{
  margin:0 0 20px;
  color:var(--blue);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase
}

.eyebrow.light{
  color:#9dd0f4
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:14px 22px;
  border:0;
  border-radius:999px;
  font:700 14px var(--font-body);
  text-decoration:none;
  cursor:pointer;
  transition: transform .25s, background .25s;
}

.button:hover{
  transform:translateY(-2px)
}

.button-accent{
  background:#7bc1ee;
  color:#05294c
}

.button-light{
  background:#fff;
  color:var(--navy)
}

.button-primary{
  width:100%;
  background:var(--navy);
  color:#fff
}

.text-link{
  color:var(--blue);
  font-size:14px;
  font-weight:700;
  text-decoration:none
}

.text-link span{
  padding-left:8px
}

/* Full-screen landing slider */
.hero{
  position:relative;
  overflow:hidden;
  color:#fff
}

.hero.hero-split{
  min-height:100svh;
  background:#092b52;
  isolation:isolate;
  cursor:ew-resize;
  user-select:none;
  -webkit-user-select:none
}

.hero-split *{
  user-select:none;
  -webkit-user-select:none
}

.hero-split .hero-image{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover
}

.hero-image-company{
  background-image:linear-gradient(90deg,rgba(4,27,53,.58),rgba(8,38,70,.12)),url("https://images.unsplash.com/photo-1514565131-fce0801e5785?auto=format&fit=crop&w=2200&q=85")
}

.hero-image-talent{
  z-index:1;
  background-image:linear-gradient(90deg,rgba(11,43,79,.15),rgba(4,25,47,.32)),url("../images/ethiopian-woman-hero.png");
  clip-path:inset(0 0 0 54%);
  will-change:clip-path
}

.hero-shade{
  position:absolute;
  z-index:2;
  inset:0;
  background:linear-gradient(180deg,rgba(3,22,44,.34),transparent 35%,rgba(3,20,40,.3));
  pointer-events:none
}

.hero-image-label{
  position:absolute;
  top:49%;
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase
}

.hero-image-company .hero-image-label{
  left:9%
}

.hero-image-talent .hero-image-label{
  right:9%
}

.hero-split-content{
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  width:min(1040px,calc(100% - 48px));
  color:#fff;
  text-align:center;
  pointer-events:none;
  transform:translate(-50%,-42%)
}

.hero-split-content .eyebrow{
  margin-bottom:18px;
  color:#b8e0fa
}

.hero-split h1{
  max-width:none;
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(58px,10vw,157px);
  font-weight:700;
  letter-spacing:-.085em;
  line-height:.82
}

.hero-split h1 em{
  display:block;
  color:#8dcbef;
  font-style:normal
}

.split-tagline{
  margin:28px 0 0;
  color:#fff;
  font-size:clamp(14px,1.5vw,18px);
  letter-spacing:.06em
}

.split-actions{
  display:flex;
  justify-content:center;
  gap:12px
}

.hero-actions-layer{
  position:absolute;
  z-index:5;
  top:calc(50% + 210px);
  left:50%;
  width:max-content;
  pointer-events:auto;
  transform:translateX(-50%)
}

.split-actions .button{
  min-width:184px;
  box-shadow:0 8px 22px rgba(0,0,0,.17);
  transition:transform .22s,background-color .22s,color .22s,border-color .22s,box-shadow .22s
}

.split-actions .button,.split-actions .button *{
  cursor:pointer
}

.split-actions .button:hover{
  box-shadow:0 13px 30px rgba(0,0,0,.28);
  transform:translateY(-4px) scale(1.025)
}

.split-actions .button-light:hover{
  background:#8dcbef;
  color:#062949
}

.button-outline{
  border:1px solid rgba(255,255,255,.8);
  background:rgba(5,35,64,.26);
  color:#fff;
  backdrop-filter:blur(4px)
}

.split-actions .button-outline:hover{
  border-color:#8dcbef;
  background:rgba(126,196,238,.25)
}

.split-actions .button span{
  transition:transform .22s
}

.split-actions .button:hover span{
  transform:translate(3px,-3px)
}

.split-control{
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  left:54%;
  width:2px;
  background:rgba(255,255,255,.9);
  outline:0;
  cursor:ew-resize;
  touch-action:none;
  transform:translateX(-50%)
}

.split-control:before{
  position:absolute;
  top:50%;
  left:50%;
  width:54px;
  height:54px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:50%;
  background:rgba(8,42,75,.57);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  content:"";
  backdrop-filter:blur(6px);
  transform:translate(-50%,-50%)
}

.split-control span{
  position:absolute;
  top:50%;
  left:50%;
  color:#fff;
  font-size:18px;
  transform:translate(-50%,-56%)
}

.is-auto-moving .hero-image-talent,.is-auto-moving .split-control{
  transition:clip-path .85s cubic-bezier(.22,.75,.24,1),left .85s cubic-bezier(.22,.75,.24,1)
}

.split-hint,.hero-scroll{
  position:absolute;
  z-index:3;
  margin:0;
  color:rgba(255,255,255,.85);
  font-size:10px;
  font-weight:bold;
  letter-spacing:.2em;
  text-transform:uppercase
}

.split-hint{
  right:34px;
  bottom:28px
}

.hero-scroll{
  bottom:28px;
  left:50%;
  color:#fff;
  text-decoration:none;
  transform:translateX(-50%)
}

.hero-scroll span{
  display:block;
  margin-top:6px;
  font-size:16px;
  text-align:center
}

/* Intro, services, and process sections */
.ticker{
  overflow:hidden;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  background:var(--pale);
  white-space:nowrap
}

.ticker-track{
  display:flex;
  align-items:center;
  gap:28px;
  width:max-content;
  color:#52708b;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  animation:scroll 30s linear infinite
}

.ticker i{
  color:var(--bright);
  font-style:normal
}

@keyframes scroll{
  to{
    transform:translateX(-35%)
  }

}

.scale-partner{
  padding:112px 0 120px;
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--pale) 100%);
  text-align:center
}

.scale-partner-inner{
  max-width:1180px
}

.scale-partner-heading{
  max-width:850px;
  margin:0 auto
}

.scale-partner-heading .eyebrow{
  margin-bottom:22px
}

.scale-partner h2{
  color:var(--navy);
  font-size:clamp(44px,5.4vw,72px);
  letter-spacing:-.045em
}

.scale-partner h2 em{
  color:var(--blue);
  font-weight:inherit
}

.scale-partner-copy{
  max-width:760px;
  margin:32px auto 0;
  color:#415d77;
  font-size:18px;
  line-height:1.75
}

.scale-progression{
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(70px,130px) minmax(190px,1fr) minmax(70px,130px) minmax(190px,1fr);
  align-items:start;
  gap:24px;
  margin-top:72px
}

.scale-stage{
  display:flex;
  flex-direction:column;
  align-items:center
}

.scale-icon{
  display:grid;
  width:104px;
  height:104px;
  margin-bottom:24px;
  border-radius:50%;
  background:#eaf4fd;
  color:#1670d2;
  place-items:center
}

.scale-icon svg{
  width:52px;
  height:52px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.2
}

.scale-stage h3{
  color:var(--navy);
  font:700 14px/1.3 var(--font-body);
  letter-spacing:.14em;
  text-transform:uppercase
}

.scale-stage p{
  margin:13px 0 0;
  color:#526a81;
  font-size:16px;
  line-height:1.6
}

.scale-arrow{
  position:relative;
  height:104px
}

.scale-arrow i{
  position:absolute;
  top:51px;
  right:0;
  left:0;
  border-top:1px solid #2e82d4
}

.scale-arrow i:after{
  position:absolute;
  top:-5px;
  right:0;
  width:9px;
  height:9px;
  border-top:1px solid #2e82d4;
  border-right:1px solid #2e82d4;
  content:"";
  transform:rotate(45deg)
}

.intro-layout,.section-heading,.contact-layout{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:90px
}

.intro h2,.section-heading h2,.contact h2{
  font-size:clamp(40px,4.5vw,62px);
  letter-spacing:-.04em
}

.intro h2 em,.section-heading h2 em{
  color:var(--blue)
}

.intro-layout>div{
  padding-top:12px
}

.intro-layout p{
  margin:0 0 25px;
  color:#52708b;
  font-size:17px
}

.services,.start-search{
  background:var(--pale)
}

.section-heading{
  align-items:end
}

.section-heading>p{
  margin:0 0 5px;
  color:#52708b
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:54px
}

.service-card{
  position:relative;
  min-height:330px;
  padding:27px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  transition:.3s
}

.service-card:hover{
  box-shadow:0 18px 35px rgba(10,49,83,.1);
  transform:translateY(-6px)
}

.service-card.featured{
  border-color:var(--navy);
  background:var(--navy);
  color:#fff
}

.service-number{
  color:#7590a8;
  font-size:11px;
  font-weight:bold;
  letter-spacing:.12em
}

.featured .service-number{
  color:#99c6e5
}

.service-icon{
  margin:29px 0 25px;
  color:var(--bright);
  font-size:40px;
  line-height:1
}

.service-icon svg{
  width:45px;
  height:45px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2
}

.service-card h3{
  font-size:25px
}

.service-card p{
  margin:12px 0 25px;
  color:#5e7890;
  font-size:14px
}

.service-card .service-price{
  margin:10px 0 4px;
  color:var(--blue);
  font-weight:700
}

.featured p{
  color:#c2ddef
}

.service-card a{
  position:absolute;
  bottom:24px;
  color:var(--blue);
  font-size:13px;
  font-weight:bold;
  text-decoration:none
}

.featured a{
  color:#91cff6
}

.service-card a span{
  padding-left:5px
}

.support-capabilities{
  padding:112px 0 105px;
  background:#fff
}

.support-capabilities-inner{
  max-width:1180px
}

.support-capabilities-heading{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:end;
  gap:64px
}

.support-capabilities-heading h2{
  color:var(--navy);
  font-size:clamp(38px,4vw,54px);
  line-height:1.02;
  letter-spacing:-.04em
}

.support-capabilities-heading h2 em{
  color:var(--blue);
  font-weight:inherit
}

.support-capabilities-heading>p{
  margin:0 0 8px;
  color:#52708b;
  font-size:16px;
  line-height:1.55
}

.capability-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:64px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.capability-card{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:18px;
  min-height:240px;
  padding:30px 26px
}

.capability-card:not(:nth-child(3n)){
  border-right:1px solid var(--line)
}

.capability-card:nth-child(n+4){
  border-top:1px solid var(--line)
}

.capability-icon{
  display:grid;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#eaf4fd;
  color:#2479cd;
  place-items:center
}

.capability-icon svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2
}

.capability-icon-headset:before{
  width:34px;
  height:34px;
  background:currentColor;
  content:"";
  -webkit-mask:url("../images/headset.svg") center/contain no-repeat;
  mask:url("../images/headset.svg") center/contain no-repeat
}

.capability-number{
  color:var(--blue);
  font-size:13px;
  font-weight:700
}

.capability-card h3{
  margin-top:3px;
  color:var(--navy);
  font:700 14px/1.35 var(--font-body);
  letter-spacing:.08em;
  text-transform:uppercase
}

.capability-card ul{
  display:grid;
  gap:5px;
  margin:14px 0 0;
  padding:0;
  color:#526a81;
  font-size:14px;
  list-style:none
}

.capability-card li:before{
  display:inline-block;
  width:13px;
  height:13px;
  margin-right:9px;
  background:#398bda;
  content:"";
  -webkit-mask:url("../images/circle-check.svg") center/contain no-repeat;
  mask:url("../images/circle-check.svg") center/contain no-repeat;
  vertical-align:1px
}

.capability-cta{
  display:flex;
  width:fit-content;
  min-width:280px;
  margin:42px auto 0;
  background:var(--blue);
  box-shadow:0 8px 22px rgba(23,103,174,.2);
  color:#fff;
  transform:none;
  transition:transform .22s,background-color .22s,box-shadow .22s
}

.capability-cta:hover{
  background:var(--navy);
  box-shadow:0 13px 30px rgba(9,43,82,.25);
  color:#fff;
  transform:translateY(-4px) scale(1.025)
}

.capability-cta span{
  transition:transform .22s
}

.capability-cta:hover span{
  transform:translateX(4px)
}

.process{
  padding:115px 0;
  background:var(--navy);
  color:#fff
}

.process-layout{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:115px;
  width:min(1120px,calc(100% - 48px));
  margin:auto
}

.process h2{
  font-size:clamp(42px,5vw,66px);
  letter-spacing:-.04em
}

.process h2 em{
  color:#76bff0;
  font-weight:inherit
}

.process-lead{
  max-width:440px;
  margin-top:32px;
  color:#b8d4e9;
  font-size:17px;
  line-height:1.8
}

.steps{
  margin:0;
  padding:0;
  list-style:none
}

.steps li{
  display:grid;
  grid-template-columns:34px 66px 1fr;
  align-items:start;
  gap:22px;
  padding-bottom:28px;
  margin-bottom:29px;
  border-bottom:1px solid rgba(255,255,255,.18)
}

.steps li:last-child{
  margin-bottom:0
}

.challenge-number,.challenge-label{
  color:#7bc1ee;
  font-size:13px;
  font-weight:bold;
  letter-spacing:.12em;
  text-transform:uppercase
}

.challenge-number{
  padding-top:8px;
  font-size:16px;
  letter-spacing:0
}

.challenge-icon{
  display:grid;
  width:58px;
  height:58px;
  border:1px solid rgba(86,157,224,.55);
  border-radius:50%;
  color:#69b9ed;
  place-items:center
}

.challenge-icon svg{
  width:38px;
  height:38px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2
}

.steps h3{
  margin-top:3px;
  font-size:25px
}

.steps p{
  margin:7px 0 0;
  color:#b8d4e9;
  font-size:14px;
  line-height:1.65
}

.why-eos{
  padding:112px 0 70px;
  background:linear-gradient(180deg,#fff 0%,var(--pale) 100%)
}

.why-eos-inner{
  max-width:1180px
}

.why-eos-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:start;
  gap:72px
}

.why-eos-copy h2{
  color:var(--navy);
  font-size:clamp(40px,4.4vw,60px);
  letter-spacing:-.04em
}

.why-eos-copy h2 em{
  color:var(--blue);
  font-weight:inherit
}

.why-eos-accent{
  display:block;
  width:48px;
  margin:30px 0 26px;
  border-top:3px solid var(--blue)
}

.why-eos-copy>p:last-child{
  max-width:430px;
  margin:0;
  color:#526a81;
  font-size:17px;
  line-height:1.75
}

.comparison-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 45px rgba(10,49,83,.07)
}

.comparison-column{
  display:flex;
  min-width:0;
  padding:30px 26px 28px;
  flex-direction:column;
  text-align:center
}

.comparison-eos{
  border-left:1px solid var(--line);
  background:#f4f9ff
}

.comparison-mark,.comparison-logo{
  display:grid;
  width:62px;
  height:62px;
  margin:0 auto 16px;
  border-radius:50%;
  place-items:center
}

.comparison-mark{
  background:#f2f5f8;
  color:#657b90
}

.comparison-mark svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2
}

.comparison-logo{
  overflow:hidden;
  padding:5px;
  background:var(--navy)
}

.comparison-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  max-width:100%;
  filter:brightness(0) invert(1)
}

.comparison-column h3{
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  color:var(--navy);
  font:700 14px/1.3 var(--font-body);
  letter-spacing:.08em;
  text-transform:uppercase
}

.comparison-eos h3,.comparison-eos .comparison-subhead{
  color:var(--blue)
}

.comparison-subhead{
  margin:15px 0 5px;
  color:#657b90;
  font-size:14px;
  font-weight:700
}

.comparison-column ul{
  margin:0;
  padding:0;
  color:#405a72;
  font-size:14px;
  list-style:none;
  text-align:left
}

.comparison-column li{
  display:flex;
  min-height:54px;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line)
}

.comparison-column li:before{
  width:17px;
  height:17px;
  flex:0 0 auto;
  background:#8193a4;
  content:"";
  -webkit-mask:url("../images/circle-check.svg") center/contain no-repeat;
  mask:url("../images/circle-check.svg") center/contain no-repeat
}

.comparison-eos li:before{
  background:var(--blue)
}

.comparison-cta{
  width:100%;
  margin-top:22px;
  background:var(--blue);
  box-shadow:0 8px 20px rgba(23,103,174,.2);
  color:#fff;
  transform:none
}

.comparison-cta:hover{
  background:var(--navy);
  box-shadow:0 12px 27px rgba(9,43,82,.22);
  transform:translateY(-3px)
}

.why-eos-promise{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:18px;
  row-gap:12px;
  margin-top:34px
}

.why-eos-promise:before,.why-eos-promise:after{
  height:1px;
  background:var(--line);
  content:"";
  flex:1
}

.why-eos-promise:before{
  grid-column:1;
  grid-row:1
}

.why-eos-promise:after{
  grid-column:3;
  grid-row:1
}

.why-eos-promise span{
  grid-column:2;
  grid-row:1;
  color:var(--blue);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase
}

.why-eos-promise p{
  display:flex;
  grid-column:1/-1;
  grid-row:2;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0;
  color:#526a81;
  font-size:14px;
  white-space:nowrap
}

.why-eos-promise p i{
  height:18px;
  border-left:1px solid var(--line)
}

.how-it-works{
  padding:108px 0 112px;
  background:linear-gradient(135deg,#061d35 0%,#092b52 100%);
  color:#fff
}

.how-it-works-inner{
  max-width:1220px
}

.how-it-works-heading{
  max-width:760px
}

.how-it-works-heading h2{
  font-size:clamp(43px,5.2vw,68px);
  letter-spacing:-.04em
}

.how-it-works-heading h2 em{
  color:var(--bright);
  font-weight:inherit
}

.how-it-works-heading>span{
  display:block;
  width:48px;
  margin:26px 0 24px;
  border-top:2px solid var(--bright)
}

.how-it-works-heading>p:last-child{
  max-width:520px;
  margin:0;
  color:#bed4e5;
  font-size:17px;
  line-height:1.75
}

.work-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
  margin:58px 0 0;
  padding:0;
  list-style:none
}

.work-step{
  position:relative;
  min-width:0
}

.work-step:not(:last-child):after{
  position:absolute;
  top:78px;
  left:94px;
  width:calc(100% - 82px);
  border-top:1px solid rgba(79,156,218,.7);
  content:""
}

.work-step:not(:last-child):before{
  position:absolute;
  z-index:1;
  top:74px;
  left:calc(100% + 9px);
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:8px solid var(--bright);
  content:""
}

.work-number{
  display:block;
  margin:0 0 12px 18px;
  color:var(--bright);
  font:600 31px/1 var(--font-display)
}

.work-icon{
  display:grid;
  width:74px;
  height:74px;
  margin-left:2px;
  border:2px solid rgba(79,156,218,.3);
  border-radius:50%;
  color:var(--bright);
  place-items:center
}

.work-icon svg{
  width:42px;
  height:42px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8
}

.work-icon-users:before{
  width:40px;
  height:40px;
  background:currentColor;
  content:"";
  -webkit-mask:url("../images/users.svg") center/contain no-repeat;
  mask:url("../images/users.svg") center/contain no-repeat
}

.work-step>div{
  margin-top:18px
}

.work-step h3{
  font:700 15px/1.3 var(--font-body);
  letter-spacing:.08em;
  text-transform:uppercase
}

.work-step i{
  display:block;
  width:28px;
  margin:14px 0 15px;
  border-top:2px solid var(--bright)
}

.work-step h4{
  margin:0;
  font:700 14px/1.45 var(--font-body)
}

.work-step p{
  margin:8px 0 0;
  color:#b8d0e2;
  font-size:13px;
  line-height:1.65
}

.industries{
  padding:108px 0 112px;
  background:var(--pale)
}

.industries-inner{
  max-width:1180px
}

.industries-heading{
  max-width:820px
}

.industries-heading h2{
  color:var(--navy);
  font-size:clamp(43px,5vw,66px);
  letter-spacing:-.04em
}

.industries-heading h2 em{
  color:var(--blue);
  font-weight:inherit
}

.industries-heading>span{
  display:block;
  width:46px;
  margin:24px 0 22px;
  border-top:2px solid var(--blue)
}

.industries-heading>p:last-child{
  max-width:550px;
  margin:0;
  color:#526a81;
  font-size:16px;
  line-height:1.7
}

.industry-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:48px
}

.industry-card{
  position:relative;
  min-height:265px;
  padding:27px 26px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff
}

.industry-number{
  color:var(--blue);
  font:600 38px/1 var(--font-display)
}

.industry-icon{
  position:absolute;
  top:20px;
  right:22px;
  display:grid;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#eaf4fd;
  color:var(--navy);
  place-items:center
}

.industry-icon svg{
  width:36px;
  height:36px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8
}

.industry-icon-van:before{
  width:36px;
  height:36px;
  background:currentColor;
  content:"";
  -webkit-mask:url("../images/van.svg") center/contain no-repeat;
  mask:url("../images/van.svg") center/contain no-repeat
}

.industry-card h3{
  max-width:240px;
  margin-top:25px;
  color:var(--navy);
  font:700 14px/1.35 var(--font-body);
  letter-spacing:.05em;
  text-transform:uppercase
}

.industry-card p{
  margin:12px 0 0;
  color:#526a81;
  font-size:14px;
  line-height:1.65
}

/* Company search forms */
/* Inquiry form validation feedback */
.form-errors {
  padding: 14px 16px;
  border: 1px solid #f0a4a4;
  border-radius: 8px;
  background: #fff1f1;
  color: #8c2525;
}

.form-errors__title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
}

.form-errors ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

.form-errors li + li {
  margin-top: 3px;
}

/* Inquiry form feedback */
.form-status__message {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #8dcbef;
  border-radius: 8px;
  background: #e8f5fd;
  color: #0b4e82;
  font-size: 14px;
  font-weight: 600;
}

.search-heading{
  margin-bottom:48px;
  text-align:center
}

.search-heading h2{
  font-size:clamp(42px,5vw,64px);
  letter-spacing:-.04em
}

.search-heading>p:last-child{
  max-width:590px;
  margin:16px auto 0;
  color:#58758e;
  font-size:17px
}

.search-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.search-call,.role-form{
  display:grid;
  gap:18px;
  padding:40px;
  border-radius:17px
}

.search-call{
  background:var(--navy);
  color:#fff
}

/* International phone field */
.iti {
  display: block;
  width: 100%;
}

.iti input#phone-number {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding-left: 142px !important;
}

.iti__country-container,
.iti__selected-country {
  height: 46px;
}

.iti__selected-country {
  box-sizing: border-box;
  padding: 0 18px;
  border-right: 1px solid #d9dee7;
  border-radius: 8px 0 0 8px;
}

/* Keep the country-search text clear of its icon */
.iti__search-input {
  box-sizing: border-box !important;
  height: 46px !important;
  min-height: 0 !important;
  padding: 0 16px 0 50px !important;
  background-position: 16px center !important;
}

.role-form{
  border:1px solid var(--line);
  background:#fff
}

.search-call h3,.role-form h3{
  font-size:31px;
  letter-spacing:-.03em
}

.search-call>p:not(.eyebrow){
  margin:-5px 0 9px;
  color:#c2ddef
}

.search-call fieldset{
  margin:0;
  padding:0;
  border:0
}

.search-call legend{
  margin-bottom:10px;
  color:#a8cde8;
  font-size:11px;
  font-weight:bold;
  letter-spacing:.19em;
  text-transform:uppercase
}

.choice-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px
}

.choice{
  padding:9px 14px;
  border:1px solid rgba(202,229,247,.35);
  border-radius:999px;
  background:transparent;
  color:#e6f4fd;
  font:500 14px var(--font-body);
  cursor:pointer;
  transition:.2s
}

.choice:hover,.choice.active{
  border-color:#7bc1ee;
  background:#7bc1ee;
  color:#062949
}

.search-call input,.role-form input,.role-form select,.role-form textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid #c7dbe9;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font:14px var(--font-body)
}

.search-call input{
  border-color:rgba(202,229,247,.28);
  background:rgba(255,255,255,.07);
  color:#fff
}

.search-call input::placeholder{
  color:#b6d5e9
}

.search-call input:focus,.role-form input:focus,.role-form select:focus,.role-form textarea:focus{
  outline:2px solid #8dc7ec;
  border-color:#8dc7ec
}

.role-name-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.form-note{
  margin:0;
  color:#2772ab;
  font-size:13px
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

/* Talent, contact, and footer */
.talent-panel{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:480px;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(120deg,#0f477d,#1675b5);
  color:#fff
}

.talent-copy{
  position:relative;
  z-index:1;
  padding:70px
}

.talent h2{
  font-size:50px;
  letter-spacing:-.04em
}

.talent-copy p:not(.eyebrow){
  max-width:400px;
  color:#d5eafb
}

.talent-art{
  position:relative;
  overflow:hidden;
  background:rgba(4,41,77,.25)
}

.art-circle{
  position:absolute;
  top:20px;
  left:50px;
  width:450px;
  height:450px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%
}

.talent-art>p{
  position:absolute;
  z-index:2;
  right:35px;
  bottom:28px;
  margin:0;
  color:rgba(255,255,255,.8);
  font-size:17px;
  font-weight:bold;
  letter-spacing:.15em;
  line-height:1.05
}

.talent-art p em{
  color:#9bd5f6;
  font-family:var(--font-display);
  font-size:28px
}

.art-person{
  position:absolute;
  bottom:-4px;
  width:118px;
  border-radius:59px 59px 0 0;
  background:#dceeff
}

.art-person:before{
  position:absolute;
  top:-73px;
  left:28px;
  width:62px;
  height:62px;
  border-radius:50%;
  background:#eac8ab;
  content:""
}

.person-one{
  left:58px;
  height:185px;
  background:#255c96
}

.person-two{
  left:180px;
  height:245px;
  background:#91c9ed
}

.person-three{
  left:302px;
  height:155px;
  background:#4b89c3
}

.contact{
  padding:105px 0;
  background:#0a3159;
  color:#fff
}

.contact h2 em{
  color:#7ec4ee
}

.contact-layout{
  align-items:center
}

.contact-layout>div:last-child{
  padding-top:20px
}

.contact-layout>div:last-child p{
  max-width:410px;
  margin:0 0 26px;
  color:#c5e0f2;
  font-size:17px
}

footer{
  padding:32px 0;
  background:#061d35;
  color:#97b4ca
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:12px
}

.footer-brand{
  color:#fff;
  transform:scale(.85);
  transform-origin:left
}

.footer-brand .brand-logo-wrap{
  overflow:hidden;
  border-radius:6px;
  background:#fff
}

.footer-inner p{
  margin:0
}

.footer-inner>a:last-child{
  color:#c9e3f5;
  text-decoration:none
}

/* Responsive layout */
@media(max-width:800px){
  .site-header{
    padding:6px 0;
    border-bottom-color:rgba(9,43,82,.1);
    background:#fff;
    box-shadow:0 5px 18px rgba(2,20,39,.1)
  }

  .site-header .brand,
  .site-header .main-nav a{
    color:var(--navy)
  }

  .site-header .nav-cta{
    border-color:var(--navy);
    background:var(--navy);
    color:#fff!important
  }

  .brand-logo-wrap{
    width:48px;
    height:52px
  }

  .brand-logo{
    width:48px;
    height:52px
  }

  .page-width,.process-layout{
    width:min(100% - 32px,1120px)
  }

  .nav-shell{
    width:calc(100% - 20px)
  }

  .main-nav{
    display:none
  }

  .menu-toggle{
    display:grid;
    gap:5px;
    border:0;
    background:none
  }

  .menu-toggle span{
    display:block;
    width:25px;
    border-top:2px solid var(--navy)
  }

  .menu-open .main-nav{
    position:absolute;
    top:64px;
    right:0;
    left:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:15px;
    border:1px solid rgba(9,43,82,.12);
    background:rgba(255,255,255,.98);
    box-shadow:0 14px 25px rgba(0,0,0,.25);
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%)
  }

  .menu-open .main-nav a{
    padding:11px 15px
  }

  .menu-open .nav-cta{
    text-align:center;
    margin-top:8px
  }

  .section-space{
    padding:75px 0
  }

  .scale-partner{
    padding:76px 0 84px
  }

  .scale-partner h2{
    font-size:clamp(38px,11vw,54px)
  }

  .scale-partner h2 br{
    display:none
  }

  .scale-partner-copy{
    margin-top:24px;
    font-size:16px;
    line-height:1.7
  }

  .scale-progression{
    grid-template-columns:1fr;
    gap:0;
    margin-top:54px
  }

  .scale-icon{
    width:92px;
    height:92px;
    margin-bottom:18px
  }

  .scale-arrow{
    width:1px;
    height:58px;
    margin:8px auto 18px
  }

  .scale-arrow i{
    top:0;
    right:auto;
    bottom:0;
    left:0;
    border-top:0;
    border-left:1px solid #2e82d4
  }

  .scale-arrow i:after{
    top:auto;
    right:auto;
    bottom:0;
    left:-4px;
    transform:rotate(135deg)
  }

  .intro-layout,.section-heading,.contact-layout,.process-layout,.search-grid{
    grid-template-columns:1fr;
    gap:33px
  }

  .service-grid{
    grid-template-columns:1fr
  }

  .support-capabilities{
    padding:76px 0 80px
  }

  .support-capabilities-heading{
    grid-template-columns:1fr;
    gap:24px
  }

  .support-capabilities-heading h2{
    font-size:clamp(38px,10vw,48px)
  }

  .support-capabilities-heading h2 br{
    display:none
  }

  .support-capabilities-heading>p{
    font-size:16px
  }

  .capability-grid{
    grid-template-columns:1fr;
    margin-top:44px
  }

  .capability-card{
    min-height:0;
    padding:26px 8px
  }

  .capability-card:not(:nth-child(3n)){
    border-right:0
  }

  .capability-card:nth-child(n+2){
    border-top:1px solid var(--line)
  }

  .capability-cta{
    width:100%;
    min-width:0
  }

  .service-card{
    min-height:280px
  }

  .process{
    padding:75px 0
  }

  .why-eos{
    padding:76px 0 64px
  }

  .why-eos-layout{
    grid-template-columns:1fr;
    gap:48px
  }

  .why-eos-copy h2{
    font-size:clamp(38px,10vw,50px)
  }

  .comparison-panel{
    grid-template-columns:1fr
  }

  .comparison-eos{
    border-top:1px solid var(--line);
    border-left:0
  }

  .why-eos-promise{
    grid-template-columns:1fr;
    gap:10px;
    text-align:center
  }

  .why-eos-promise:before,.why-eos-promise:after{
    display:none
  }

  .why-eos-promise p{
    grid-column:1;
    flex-direction:column;
    gap:6px;
    white-space:normal
  }

  .why-eos-promise p i{
    display:none
  }

  .how-it-works{
    padding:76px 0 84px
  }

  .how-it-works-heading h2{
    font-size:clamp(40px,11vw,54px)
  }

  .work-steps{
    grid-template-columns:1fr;
    gap:0;
    margin-top:48px
  }

  .work-step{
    display:grid;
    grid-template-columns:74px 1fr;
    column-gap:22px;
    padding-bottom:42px
  }

  .work-step:not(:last-child):after{
    top:91px;
    bottom:10px;
    left:38px;
    width:0;
    border-top:0;
    border-left:1px solid rgba(79,156,218,.7)
  }

  .work-step:not(:last-child):before{
    display:none
  }

  .work-number{
    grid-column:1;
    margin:0 0 10px;
    text-align:center
  }

  .work-icon{
    grid-column:1;
    margin:0
  }

  .work-step>div{
    grid-column:2;
    grid-row:1/3;
    margin:12px 0 0
  }

  .industries{
    padding:76px 0 82px
  }

  .industries-heading h2{
    font-size:clamp(40px,11vw,54px)
  }

  .industry-grid{
    grid-template-columns:1fr;
    margin-top:40px
  }

  .industry-card{
    min-height:235px
  }

  .process h2{
    font-size:clamp(40px,11vw,54px)
  }

  .process-lead{
    margin-top:24px;
    font-size:16px
  }

  .challenge-steps li{
    grid-template-columns:28px 52px 1fr;
    gap:14px;
    padding-bottom:24px;
    margin-bottom:25px
  }

  .challenge-icon{
    width:50px;
    height:50px
  }

  .challenge-icon svg{
    width:32px;
    height:32px
  }

  .challenge-number{
    font-size:14px
  }

  .challenge-steps h3{
    font-size:22px
  }

  .search-call,.role-form{
    padding:28px
  }

  .search-call h3,.role-form h3{
    font-size:28px
  }

  .talent-panel{
    grid-template-columns:1fr
  }

  .talent-copy{
    padding:47px 30px
  }

  .talent-art{
    height:290px
  }

  .contact{
    padding:75px 0
  }

  .footer-inner{
    flex-direction:column;
    align-items:flex-start
  }

  .hero-split-content{
    transform:translate(-50%,-46%)
  }

  .hero-split h1{
    font-size:clamp(56px,16vw,100px)
  }

  .split-actions{
    flex-direction:column;
    align-items:center
  }

  .split-actions .button{
    min-width:190px
  }

  .hero-actions-layer{
    top:calc(50% + 150px)
  }

  .hero-image-company{
    background-position:40% center
  }

  .hero-image-talent{
    background-image:linear-gradient(90deg,rgba(11,43,79,.15),rgba(4,25,47,.32)),url("../images/ethiopian-woman-mobile-crop.png");
    background-position:center;
    background-size:cover
  }

  .hero-image-label{
    display:none
  }

  .split-hint{
    right:16px;
    bottom:15px
  }

  .hero-scroll{
    bottom:15px
  }

  .split-control:before{
    width:48px;
    height:48px
  }

}

@media(max-width:440px){
  .role-name-row{
    grid-template-columns:1fr
  }

  .choice{
    padding:8px 11px;
    font-size:13px
  }

  .talent h2{
    font-size:43px
  }

  .art-person{
    transform:scale(.8);
    transform-origin:bottom
  }

  .person-one{
    left:10px
  }

  .person-two{
    left:104px
  }

  .person-three{
    left:200px
  }

}

.site-footer{
  padding:72px 0 26px;
  background:#061d35;
  color:#97b4ca
}

/* Footer layout refinements */
.footer-main{
  display:flex;
  justify-content:space-between;
  gap:70px;
  padding-bottom:58px
}

.footer-intro{
  max-width:280px;
  margin:20px 0 0;
  color:#9bbbd1;
  font-size:14px
}

.footer-links{
  display:grid;
  grid-template-columns:repeat(3,minmax(100px,1fr));
  gap:55px
}

.footer-links p{
  margin:0 0 15px;
  color:#73b4df;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase
}

.footer-links a{
  display:block;
  margin:8px 0;
  color:#d1e7f6;
  font-size:13px;
  text-decoration:none
}

.footer-links a:hover,.footer-bottom>a:hover{
  color:#7bc1ee
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-top:22px;
  border-top:1px solid rgba(180,216,238,.18);
  font-size:12px
}

.footer-bottom p{
  margin:0
}

.footer-bottom>a{
  color:#d1e7f6;
  text-decoration:none
}

.footer-socials{
  display:flex;
  gap:9px
}

.footer-socials a{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border:1px solid rgba(180,216,238,.35);
  border-radius:50%;
  color:#d1e7f6;
  font-size:10px;
  font-weight:bold;
  text-decoration:none
}

.footer-socials a:hover{
  border-color:#7bc1ee;
  background:#7bc1ee;
  color:#062949
}

@media(max-width:800px){
  .footer-main{
    flex-direction:column;
    gap:42px;
    padding-bottom:42px
  }

  .footer-links{
    gap:24px
  }

  .footer-bottom{
    flex-wrap:wrap
  }

}

@media(max-width:440px){
  .footer-links{
    grid-template-columns:1fr 1fr
  }

  .footer-bottom{
    align-items:flex-start;
    flex-direction:column
  }

}

.footer-main{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto minmax(130px,1fr);
  align-items:start
}

.footer-links{
  justify-self:center
}

.footer-social-column{
  justify-self:end
}

.footer-social-column>p{
  margin:0 0 15px;
  color:#73b4df;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase
}

.footer-socials-large{
  margin-top:0
}

.footer-socials-large a{
  width:45px;
  height:45px
}

.footer-socials svg{
  width:18px;
  height:18px;
  fill:currentColor
}

.footer-socials svg rect,.footer-socials svg circle{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8
}

.footer-socials svg .social-dot{
  fill:currentColor;
  stroke:0
}

@media(max-width:800px){
  .footer-main{
    display:flex
  }

  .footer-social-column{
    align-self:flex-start
  }

  .footer-socials-large{
    margin-top:0
  }

}

@media(max-width:440px){
  .footer-socials-large a{
    width:40px;
    height:40px
  }

}

/* Role request select field */
.role-form select{
  height:48px;
  color:#8b9aaa;
  appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b2340' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E") no-repeat right 14px center;
  background-size:16px;
  padding-right:42px
}

.role-form select.has-value,.role-form select option{
  color:var(--ink)
}

/* Contact inquiry section */
.contact-inquiry{
  background:linear-gradient(180deg,#fff 0%,var(--pale) 100%)
}

.contact-heading{
  max-width:900px;
  margin-right:auto;
  margin-left:auto
}

.contact-heading h2{
  color:var(--navy)
}

.contact-heading h2 em{
  color:var(--blue);
  font-weight:inherit
}

.contact-heading>p:last-child{
  max-width:760px;
  line-height:1.7
}

.contact-grid{
  align-items:stretch;
  gap:18px
}

.contact-guide{
  display:flex;
  padding:48px;
  background:linear-gradient(145deg,var(--navy),#0e4d86);
  flex-direction:column;
  justify-content:space-between
}

.contact-guide h3,.contact-form h3{
  font-size:clamp(34px,4vw,48px)
}

.contact-guide>div:first-child>p:last-child{
  max-width:440px;
  margin:20px 0 0;
  color:#c2ddef;
  font-size:16px;
  line-height:1.7
}

.contact-guide-list{
  margin-top:42px
}

.contact-guide-item{
  display:grid;
  grid-template-columns:62px 1fr;
  align-items:center;
  gap:18px;
  padding:20px 0;
  border-top:1px solid rgba(203,219,233,.22)
}

.contact-guide-item:first-child{
  border-top:0
}

.contact-guide-item>span{
  display:grid;
  width:54px;
  height:54px;
  color:var(--bright);
  place-items:center
}

.contact-guide-item svg{
  width:50px;
  height:50px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.7
}

.contact-guide-item h4{
  margin:0;
  color:#fff;
  font:700 16px/1.35 var(--font-body)
}

.contact-guide-item p{
  margin:4px 0 0;
  color:#c2ddef;
  font-size:14px;
  line-height:1.5
}

.contact-form{
  padding:48px;
  box-shadow:0 16px 38px rgba(9,43,82,.07)
}

.contact-form-heading{
  margin-bottom:4px
}

.contact-form-heading .eyebrow{
  margin-bottom:10px
}

.contact-form input,.contact-form select{
  min-height:50px
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form .multi-select-trigger{
  color:#8b9aaa;
  opacity:1
}

.contact-form select:not(.has-value),
.contact-form select option[value=""]{
  color:#8b9aaa
}

.contact-form textarea{
  min-height:126px;
  resize:vertical
}

.contact-form .button-primary{
  min-height:52px;
  margin-top:2px;
  background:var(--navy);
  transition:transform .22s,background-color .22s,box-shadow .22s
}

.contact-form .button-primary:hover{
  background:var(--blue);
  box-shadow:0 10px 24px rgba(23,103,174,.2);
  transform:translateY(-2px)
}

@media(max-width:800px){
  .contact-guide,.contact-form{
    padding:30px
  }

  .contact-guide-list{
    margin-top:28px
  }

  .contact-guide-item{
    grid-template-columns:52px 1fr;
    gap:14px
  }

  .contact-guide-item>span{
    width:46px;
    height:46px
  }

  .contact-guide-item svg{
    width:43px;
    height:43px
  }
}

/* Services multi-select */
.role-multiselect{
  position:relative
}

.multi-select-source{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none
}

.multi-select-trigger{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:7px;
  width:100%;
  min-height:48px;
  padding:8px 14px;
  border:1px solid #c7dbe9;
  border-radius:8px;
  background:#fff;
  color:#8b9aaa;
  font:14px var(--font-body);
  text-align:left;
  cursor:pointer
}

.multi-select-trigger > span:not(.multi-chip):last-child {
  margin-left: auto;
}

.multi-select-trigger .multi-chip {
  margin-left: 0;
}

.multi-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:#dceefb;
  color:#0d5d9e;
  font-size:12px;
  font-weight:700
}

.multi-chip b{
  font-size:16px;
  font-weight:400;
  line-height:.7
}

.multi-select-options{
  position:absolute;
  z-index:4;
  top:calc(100% + 6px);
  right:0;
  left:0;
  max-height:205px;
  overflow:auto;
  padding:6px;
  border:1px solid #c7dbe9;
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 26px rgba(10,49,83,.14)
}

.multi-select-options button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:10px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:var(--ink);
  font:14px var(--font-body);
  text-align:left;
  cursor:pointer
}

.multi-select-options button:hover,.multi-select-options button.selected{
  background:var(--pale)
}

.multi-select-options button span{
  color:var(--blue);
  opacity:0
}

.multi-select-options button.selected span{
  opacity:1
}